02-黑马web前段开发-进阶

WEB基础认知：

标准的构成由三部分组成：

1. 结构—HTML-页面元素和内容
2. 表现—CSS-网页元素的外观和位置等页面样式（如：颜色、大小等）
3. 行为—JavaScript-网页模型的定义与页面交互

---

WEB进阶:移动web笔记

一、字体图标

1.什么是字体图标？

• 字体图标展示的是图标，本质是文字；
• 处理简单的、颜色单一的图片；
• 如果是复杂的图，应当使用精灵图去实现就好；

2.字体图标的优点

灵活性：灵活地修改样式，例如：尺寸、颜色等；
轻量性：体积小、渲染快、降低服务器请求次数；
兼容性：几乎兼容所有主流浏览器；
使用方便：

1. 下载字体包
2. 使用字体图标

3.图标库

• Iconfont(阿里巴巴矢量库)

4.使用图标

1. 引入字体图标样式表
2. 调用图标对应的类名，必须调用2个类名：

• iconfont类：基本样式，包含字体的使用等
• icon-xxx:图标对应的类名；

示例:

注意：如果IconFont网站上没有所需要的图标，可以自行上传svg矢量图，然后再添加购物车，进行下载使用

二、平面转换

1.平面转换

• 改变盒子在平面内的心态（位移、旋转、缩放）
• 2D转换

平面转换属性：transform

2.位移

• 语法：transform:translate(水平移动距离,垂直移动距离)

• 取值（正负值均可）

  像素单位数值；
  百分比（参照物为盒子自身尺寸）
  注意：X轴正向为右，Y轴正向为下；

• 技巧

  tranlate()如果只给出一个值，表示X轴方向移动距离；
  单独设置某个方向的移动距离：translateX()&translateY()

3.旋转

• 语法：tranform:rotate(角度)
  注意： 角度单位是deg，示例：transform:ratate(360deg)

• 技巧：

  取值为正：则顺时针旋转
  取值为负：则逆时针旋转

• 转换原点：使用transform-origin属性改变转换原点。

• 语法：

  • 默认原点是盒子中心点
  • transform-origin:原点水平位置 原点垂直位置

• 取值：

  1. 方位名词（left、top、right、bootom、center）

  2. 像素单位数值

  3. 百分比（参照盒子自身尺寸计算）

  注意：这个transform-origin属性需要添加到标签本身身上，请不要添加到hover上；

4.多重转换（多个效果叠加）

• 多重转换技巧：transform:translate() rotate();

注意： 旋转会改变坐标轴向，如果先旋转会改变坐标轴向，位移方向会受影响；所以如果多重转换涉及到了旋转，一般放在最后面。

5.缩放

• 语法：transform:scale(x轴缩放倍数，y轴缩放倍数)

• 技巧：一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放

  1. transform:scale(缩放倍数)；

  2. scale值大于1表示放大，scale值小于1表示缩小

6.渐变背景

• 渐变是多个颜色逐渐变化的视觉效果；

• 一般用于设置盒子的背景；

  background-image:linear-gradient(
      颜色1,
      颜色2
  )
  /*半透明渐变:透明：transparent~rgba()*/
  backaground-image:linear-gradient(
    transparent,
    rgba(0,0,0,.6)
  )
  

三、空间转换

1.空间转换

• 空间：是从坐标轴角度定义的。x、y和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

• 空间转换也叫3D转换

• 属性：transform

2.空间位移

• 语法：transform:translate3d(x,y,z)

3. 透视属性

• 使用perspective属性实现透视效果；

• 属性（添加给父级）

  • perspective:值；

  • 取值：像素单位数值，数值一般在800-1200px之间；

  • 透视距离也成为视距，所谓视距就是人的眼睛到屏幕的距离。数值越小，代表人的眼睛距离屏幕越近。

4.空间的旋转

• transform:rotateZ(值)：表示沿着Z轴旋转；那他相当于rotate(值)；

• transform:rotateX(值)：沿着X轴转，类似运动员单杆旋转；

• transform:rotateY(值)：沿着Y轴转，类似跳钢管舞的旋转；

左手法则：

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为旋转正值方向；

拓展了解：

• rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度、这个属性工作中基本不会被使用到；

• x,y,z取值为0~1之间的数字

5.立体呈现

perspective透视属性只增加近大远小、近实远虚的视觉效果、无法呈现立体图形！

• 实现方法：

  • 添加transform-style:preserve-3d;

  • 使子元素出于真正的3d空间中；

  • 默认值flat、表示子元素出于2D平面内呈现；

6. 空间缩放

• transform:scaleX(倍数)：沿着X轴缩放

• transform:scaleY(倍数)：沿着Y轴缩放

• transform:scaleZ(倍数)：沿着Z轴缩放

• transform:scale3d(x,y,y)：自定义轴缩放

四、动画

1.动画

过渡指的就是上面的空间转换、平面转换效果、过渡是实现2个状态见的变化过程；

动画效果：多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

• 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面；

• 构成动画的最小单元：帧或动画帧

2.动画实现

1.定义动画：

/*1.两个动作之间的动画*/
@keyframes 动画名称{
from{}
to{}    
}

/*2多个动作之间的动画*/
/*所谓百分比，是指动画时长的*/
@keyframes 动画名称{
    0%{}
    10%{}
    15%{}
    100%{}
}

2.使用动画：

属性：animation：动画名称 动画花费时长；

3.动画的其他属性

animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态；

注意：

1. 动画名称和动画时长必须赋值；

2. 取值不分先后顺序；

3. 如果有两个时间值，第一个时间值表示动画时长、第二个时间表示延迟时间；

4. 速度曲线：比如linear：表示匀速运动，默认的、

5. 延迟时间：表示每一个动作的延迟时间

6. 重复次数：具体数字或者是infinite表示无线循环；

7. 动画方向：alternate表示反向的，工作中比较常用；

8. 执行完毕状态：

• 如果想要执行完毕状态，必须将重复次数和动画方向属性去掉，不然就矛盾了；

• backwards:表示回到最初的状态（默认的）；

• forwards:表示呈现最终结束的状态；

拓展：上面的是复合属性，复合属性指的是可以将所有属性都写在一起，比如buground属性就是；

复合属性可以拆分单独书写：

animation的相关属性如下表：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长	单位秒
animation-delay	延迟时间	单位秒
animation-fill-mode	动画执行完毕时间	forwards:最后一帧状态 backwards:第一帧状态
animation-timing-function	速度曲线	steps(数字):逐帧动画 linear：匀速动画
animation-iteration-count	重复次数	infinite为无限循环 n：重复N次
animation-direction	动画执行方向	alternate为反方向
animation-play-state	暂停动画	paused为暂停、通常配合：hover使用

4.制作逐帧动画

一般的动画效果有两种：补间动画、逐帧动画；一般情况下配合精灵图的时候使用逐帧动画；

• 精灵动画制作步骤

  • 准备显示区域

    • 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图；

  • 定义动画

    • 改变背景图的位置（移动的距离就是精灵图的宽度)；

  • 使用动画

    • 添加速度曲线steps(N)，N与精灵图上小图的个数相同；

    • 添加无限重复效果；

5.多组动画实现效果

实现多组动画效果使用animatin属性给一个元素添加多组动画，用逗号隔开即可；

animation:
    动画1，
    动画2，
    动画N；

注意：如果动画的开始状态和盒子的默认样式相同的，可以省略开始状态from

---

---

WEB移动端网页设计

1.视口标签

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

注意： 视口标签的存在意味着网页的宽度跟设备的宽度一致，如果没有视口标签，那么移动端网页的宽度就是980px

1.Flex布局

1.Flex布局模型

• 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

• Flex布局也叫弹性布局，他是一种浏览器提倡的布局模型、布局网页更简单灵活、避免了浮动脱标的问题

• 设置方式：父元素添加display:flex；，子元素可以自动的挤压或拉伸；

• 组成部分：

  • 弹性容器

  • 弹性盒子

  • 主轴：默认主轴在水平方向（横轴）

  • 侧轴/交叉轴（纵轴）

• 修改主轴对齐方式的属性：justify-content

属性值如下：

属性值	作用
flex-start	默认值，起点开始依次排列
flex-end	终点开始一次排列
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列，空白间距均匀分在弹性盒子两侧
space-between	弹性盒子沿主轴均匀排列，空白间距均匀分在相邻盒子之间
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等

• 使用过align-items调节元素在侧轴的对齐方式

  • align-items：(添加到弹性容器中，即父元素中)

  • align-self：控制某个弹性盒子在侧轴的对齐方式（是添加到子元素中的）

  属性值	作用
  flex-start	默认值，起点开始依次排列
  flex-end	终点开始依次排列
  center	沿侧轴居中排列
  stretch	默认值，弹性盒子沿着主轴线被拉伸至铺满容器， 需要去掉子元素的高度才可以生效

  注意： 如果没有子盒子没有给宽度，则子盒子的宽度为子盒子内容的宽度，如果没有高度，父盒子默认是设置了align-items:stretch; 那子盒子的高度会拉伸至父盒子的高度；

2.Flex伸缩比

属性:

• flex:值

取值分类：

• 数值（整数）

注意：只占用父盒子剩余的尺寸的比重

3. Flex主轴方向

flex布局模型中弹性盒子默认是水平方向的，侧轴默认是垂直方向；

修改主轴方向属性： flex-direction

属性值：

属性值	作用
row	行，水平（默认值）
column	列，垂直
row-reverse	行，从右往左
column-reverse	列，从下往上

注意： 如果修改主轴的方向，那么修改对齐方式的时候，就得注意主轴的方向了；

4. Flex设置弹性盒子换行

弹性盒子换行显示：flex-wrap:wrap; 默认值是：no wrap表示不换行的意思

调整行对齐方式：align-content

取值与justify-content基本相同；就是没有 `space-evenly`

---

2.Rem单位的使用

1.REM单位（移动适配的解决方案）

• 相对单位

• rem单位是相对于HTML标签的字号计算结果

• 1rem=1HTML字号大小

所以：当使用rem作为单位的时候，必须先给HTML标签添加字号font-size

2.REM移动适配-媒体查询

使用媒体查询设置差异化CSS样式。

写法：

@media(媒体特性){
    选择器{
    CSS属性；
}
}

示例：

    @media (width: 375px) {
      html {
        font-size: 37.5px;
      }
    ｝
    @media (width: 320px) {
      html {
        font-size: 32px;
      }
    }

一般工作习惯：

在rem布局方案中，将网页等分成10份，HTML标签的字号为是视口宽度的1/10；

例如上面的视口宽度为320px，那一般设置HTML标签的字号为1/10，即32px；

3. flexible

• flexible.js是手机淘宝开发出来的一个用于适配移动端的js框架；

• 核心原理就是根据不同的视口宽度给网页中的html根节点设置不同的font-size

---

3. Less语法

• Less是一个CSS预处理器，Less文件的后缀名是.less；

• 扩充了CSS语言，使CSS具备一定的逻辑性、计算能力；

注意：浏览器不识别less代码，目前阶段，网页需要引入对应的css文件，也就是说，你可以用less写，但是最终引用的还是css；

1.Easy LESS插件

• vscode插件

• 作用：less文件保存自动生成css文件；

2.LESS语法

1. 运算：

   • 加、减、乘直接书写计算表达式即可；

   • 除法需要添加小括号、或者/前面加个点，例如 width:(100/4px);或者 width:100./4px

2. 快速生成后代选择器

   • 语法：

     .父级选择器｛
         //父级
         .子级选择器｛
             //子级样式
         ｝
     ｝
     

注意：&不添加选择器，他表示的当前选择器的意思；通常用来添加当前选择器的后代选择器;例如：&:hover{...}

3. Less变量

• 变量：存储数据，方便使用和修改

• 定义变量：@变量名：值；

• 使用变量：css属性：@变量名；

  示例：

  @color:pink;
  .box{
      color:@color;
  }
  

4. LESS导入

   导入：@inport “文件路径”

   @import 'base.less';
   //可以不开
   @import 'test';
   

   注意：@import 与引号之间有空格；分号也是必须的；

   一般加载less文件的最开头补位；

5. Less导出指定目录；

• 方法1：在vc中搜索easy设置less.compile添加out属性值为指定目录即可；

• 方法2：在less文件的开头处添加注释`//out: ./css/ 表示生成的文件放在当前目录的css目录下；

6. 禁止导出less；

   方法：在less文件的第一行添加 //out:false即可；

   之所以禁止导出，是因为上面说的，可能有些less是公共的，用来进行import而已；

---

4.vw/vh单位

• 相对单位

• 相对视口的尺寸计算结果

• vw:viewport width

  • 1vw=1/100视口宽度

• vh:viewport height

  • 1vh=1/100视口高度

相对于rem来说，无需给HTML标签元素设置font-size，且比rem更加精细；

5. 响应式布局

能够根据设备的宽度变化，设置差异化样式；

1. 媒体特性

• 媒体特性常用写法：

  特性名称	属性	值
  视口的宽高	width、height	数值
  视口最大宽或高	max-width、max-height	数值
  视口最小宽或高	min-width、min-hegiht	数值
  屏幕方向	orientation	portrait:竖屏 landscape:横屏

使用媒体查询：

@media(媒体个性）｛
    css属性；
｝

注意： 媒体查询也有层叠性!!!

媒体查询的完整写法（了解）： @media 关键词 媒体类型 and (媒体特性）{css代码}

关键词：and / only / not

媒体类型：

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3中情形

2. 媒体查询-外联式

代码：

   <link rel="stylesheet" media="(min-width:800px)" href="./css/tess.css" />

6.BootStrap框架的使用

• Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定
  HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

• 中文官网: https://www.bootcss.com/

bootstrap一般使用使用3.4.1版本的，引入的时候，引入bootstrap.min.css跟bootstrap.css是一样的效果，只不过bootstrap.mini.css加载更快；