移动web前端开发

Web前端

---

前言

HTML/CSS 自学笔记，加油！
//使用 vscode
使用视频：B站黑马程序员前端课程（如侵权，立即删，请私信）

一、前端基础进阶

1. 字体图标

• 展示的是图标，本质是字体
• 处理简单的，颜色单一的图片
• 方法：下载字体包，使用字体图标
• 网址：https://www.iconfont.cn

1. 选择需要使用的图标->加入购物车->下载至本地->将该文件夹放入项目文件夹中
2. 引入字体样式表
3. 调用两个类名，iconfont和需要使用的小图标所对应的类名（在矢量图链接中有对应代码）

<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont   需要使用的小图标所对应的类名" >span>

• 若网站中没有，则上传svg矢量图->去除颜色提交
• 下载使用

2. 平面转换

• 改变盒子在平面内的形态（位移，旋转，缩放）

2.1 位移

• transform：translate（水平移动距离，垂直移动距离）；
• 水平方向位移：transform：translateX（水平移动距离）；
• 垂直方向位移：transform：translateY（垂直移动距离）；
• 数值：百分比（参考盒子自身尺寸计算），px

2.2 旋转

• transform:rotate(角度)
• 单位：deg
• 要配合过渡属性transition：all 1s
• 改变转换原点:transform-origin：原点水平位置 原点垂直位置
• 取值：方位名词（left、top、right、bottom、center）//添加到标签上
• 轮胎状滚动前行：transform：translate（） rotate（）；//顺序位置并不能换

2.3 缩放

• transform：scale（）；
• 取值：大于1为放大，小于1为缩小，没单位

3. 渐变背景

div{
    background-image:linear-gradient(颜色1，颜色2，..) ;
}
/*半透明渐变,常用*/
div{
    background-image:linear-gradient(transparent,rgba(0,0,0,0.6)) ;
}

4. 空间转换

4.1 位移

• transform：translate3d（X,Y,Z）；
• 需要设置 perspective：值 透视属性（添加给父级），z才有效果（近大远小）
• 取值:建议800-1200px

4.2 旋转

• transform:rotateX/Y/Z(角度)：绕X/Y/Z轴旋转
• 单位：deg
• 判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向

4.3 立体呈现

• 语法：transform-style ：preserve-3d;

4.4 空间缩放

• transform：scale3d（X,Y,Z）；
• transform：scaleX（倍数）；
• transform：scaleY（倍数）；
• transform：scaleZ（倍数）；

5. 动画

/*定义动画*/
@keyframes 动画名称{
    from{根据实际设置宽高等变化}
    to{}
}
@keyframes 动画名称{
    0%{}
    10%{}
    20%{}
    100%{}
}
/*使用动画*/
div{
    animation: 动画名称  动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;/*前两个必填*/
}

• 速度曲线：liner为匀速/steps（数字）：逐帧动画
• 无限循环设置重复次数和动画方向：

div{
    animation: 动画名称  1s infinite alternate;
}

• 执行完毕时状态：backwards（停留在开始的状态，默认）/forwards(停留在结束的状态)
• 场景：产品轮播图
• 动画暂停：animation-play-state: paused;

二、移动Web

1. 视口标签

• 使网页宽度和设备宽度（逻辑分辨率）相同
• 没视口则网页为980px

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 二倍图

• 设计师给的图宽度为750px，在像素大厨中，开发模式，左上角选择设计图2X
• 防图片止失真

3. 百分比布局/流式布局

• 宽度自适应，高度固定

4. Flex布局

4.1 简介

• 浏览器提倡的布局模型
• 可避免脱标
• Caniuse.com网站查询兼容性

div{
    display: flex;/*给父元素添加*/
}

• 组成：弹性容器，弹性盒子，主轴，交叉轴
• 视觉效果：子级一行排列
• 默认主轴在水平，弹性盒子都是沿着主轴排列

4.2 主轴对齐方式（添加到弹性容器）

• 先找主轴

div{
    justify-content: center;/*盒子与容器有距离，其他居中*/
    justify-content: space-around;/*弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧*/
    justify-content: space-between;;/*弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间*/
    justify-content: space-evenly;;/*弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等*/
}

4.3 交叉轴对齐方式

1. 添加到弹性容器：

div{
   align-items: center;/*居中*/
   align-items: stretch;/*拉伸，子级盒子需要没高度，是默认值*/
}

2. 添加到弹性盒子，控制单个弹性盒子：

div{
  align-self: center;
  align-self: stretch;/*子级没高度，拉伸到和父级一样高；没宽度则为内容宽度*/
}

4.4 伸缩比

div{
  flex: 整数;/*给没宽度的盒子设置，占用父盒子剩余尺寸的份数*/
}

4.5 改变主轴方向为垂直

div{
  flex-direction: column;
}

4.6 弹性盒子换行

div{
  flex-wrap: wrap;
}

4.7 行的对齐方式

div{
  align-content: center;/*与justify-content取值相似*/
}

三、移动适配

1. rem相对单位

1.1 rem简介

• 1rem=1HTML字号大小
• 步骤：

html{
    font-size: 10px;/*先设置根标签字号*/
}
div{
   width: 5rem; 
}

1.2 媒体查询设置差异化CSS样式

• 不同的视口宽度，设置不同的根字号

@media(媒体特性){
    选择器{
        CSS属性
    }
}
@media(width:375px){         /*视口宽度为375px时css属性生效*/
    html{
        font-size: 37.5px; /*HTML标签的根字号为视口宽度的1/10*/
    }
}

• rem单位的尺寸=px单位数值/基准根字号（取三位小数，基准根字号由设计师给出）
• 配合flexible.js使用

<script src="./js/flexible.js">script>

2. Less语法：css预处理器

• css选择器套选择器，可自动生成代码格式
• 可在代码中直接用除法
• 文件后缀：.less
• 安转vscode插件：Easy Less
• 作用：less文件自动生成css文件

2.1 注释

• 单行注释：//注释内容
• 块注释：/注释内容/ 快捷键shift+alt+a

2.2 计算

• 加减乘，除需要加括号

.box{
    width:(66/5rem);
}

2.3 Less嵌套会直接生成后代选择器

.父级选择器{
     .子级选择器{
         }
     }

• &表示当前选择器

.box{
    width:(66/5rem);
    &:hover{
        color: aliceblue;
    }
}
/*结果：*/
.box {
  width: 13.2rem;
}
.box:hover {
  color: aliceblue;
}

2.4 Less设置属性值

• 对应变量：@变量名：值；
• 使用变量：CSS属性：@变量名；

 @color:pink;
 div{
     color: @color;
 }

• 修改方便

2.5 Less导入

• @import 空格’'文件路径”；
• less文件可不加后缀

 @import './index';

2.6 Less导出css文件

• 实现less有相同的导出路径

1. 配置插件：设置–搜索EasyLess–在setting.json中编辑–添加代码（必须是双引号）

• 所有导出都会到该文件

"less.compile": {
    "out":"../css/"
    }

2. 在less开头第一行加代码

• 可单独控制文件导入位置

// out: ./目标文件夹/

2.7 Less禁止导出css文件

• 在less开头第一行加代码

// out: false

3. vm/vh

• 相对视口的尺寸的计算结果
• 1vw=1/100视口宽度
• 1vh=1/100视口高度
• 可直接计算使用
• vw尺寸=px/(1/100视口宽度)
• 基于less写
• 在做项目是选vm和vh中的一个使用，混用会出问题

div{
   width: 5vw; 
   height:5vw;
}

四、响应式网页

1. 媒体查询

1.1 一般写法

• 媒体特性常用写法：max-width min-width

@media(max-width:50px){/*小于该值变*/
    选择器{
        CSS属性
    }
}
@media( min-width:10px){/*大于该值变*/
    选择器{
        CSS属性
    }
}

• 书写书顺序
• min-width：从小到大
• max-width：从打到小
• 场景：当窗口发生变化，可以设置display：none；隐藏某些图片

1.2 link写法

<link rel="stylesheet" media="(媒体特性)" href="xx.css">

2. BootStrap框架

• 下载：BootStrap下载地址
• 点击直接下载
• 引入框架使用：

<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">

• 调用container类即可形成响应式网页

2.1 BootStrap栅格系统

• 布局响应式网页
• BootStrap3默认将网页分成12份
  

       <div class="container">
           <div class="col-lg-3 col-md-6">1div>
           <div class="col-lg-3 col-md-6">2div>
           <div class="col-lg-3 col-md-6">3div>
           <div class="col-lg-3 col-md-6">4div>
       div>

• .container是默认制定宽度且居中，自带内间距15px
• 如若想取消内间距加row类，自带外间距-15px

2.2 BootStrap使用

• 打开https://www.bootcss.com/
• 打开BootStrap3->全局css样式->按需求ctrl+c/ctrl+v
• 组件直接复制黏贴改内容
• 图标直接复制设置类
• 插件使用：引入js文件再复制黏贴

  <script src="./js/jquery.js">script>
  <script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js">script>