字体图标

**目标:**使用字体图标技巧实现网页中简介的图标效果

使用字体图标-Unicode 编码:

20211028181600

  1. 引入样式表:iconfont.css
  2. 复制粘贴图标对应的 Unicode 编码
  3. 设置文字字体
1
2
3
4
5
span {
font-family: 'iconfont';
}

<span>&#xe6eb</span>

使用字体图标-类名:

20211028181940

  1. 引入字体图标样式表
  2. 调用图标对应的类名,必须调用两个类名
1
2
3
<link rel="stylesheet" href="iconfont.css" />

<span class="iconfont icon-auto"></span>

上传矢量图:

如果图标库没有项目所需的图标,则可与设计师沟通,得到 SVG 矢量图,上传 SVG 图标,然后去除颜色提交,即可下载使用

平面转换

**目标:**使用 transform 属性实现元素的位移、旋转、缩放等效果

位移

**目标:**使用 translate 实现元素位移效果

20211028183408

语法:

1
transform: translate(x, y);

取值(正负均可):

  • 像素单位数值
  • 百分比(参照物为盒子自身尺寸)

注意:X 轴正向为右,Y 轴正向为下

技巧:

  • translate()如果只给出一个值,则表示 x 轴方向移动距离
  • 单独设置某个方向的移动距离:translateX() & translateY()

绝对定位居中

**目标:**使用 translate 快速实现绝对定位的元素居中效果

老方法:

1
2
3
4
5
6
7
8
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;

width: 200px;
height: 100px;

新方法:

1
2
3
4
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

原理:

位移取值为百分比数值,参照盒子自身尺寸计算移动距离

旋转

**目标:**使用 rotate 实现元素旋转效果

语法:

1
transform: rotate(角度); /* 角度单位为deg*/

技巧:

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

转换原点

**目标:**使用 transform-origin 属性改变转换原点

语法:

1
transform-origin: 原点水平位置 原点垂直位置;

取值:

  • 方位名词(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算)

多重转换

**目标:**使用 transform 复合属性实现多形态转换

语法:

1
transform: translate() rotate();

原理:

  • 旋转会改变网页元素的坐标轴向
  • 先写旋转,则后面的转换效果的轴向以旋转后的轴向为准,会影响转换结果

缩放

**目标:**使用 scale 改变元素的尺寸

语法:

1
transform: scale(缩放倍数);

渐变

**目标:**使用 background-image 属性实现渐变背景效果

语法:

1
background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.6));

不透明度

语法:

1
opacity: 0-1; /* 0 表示完全透明,1 表示完全不透明 */

综合案例-华为

空间转换

**目标:**使用 transform 属性实现元素在空间内的位移、旋转、缩放等效果

20211028191231

语法:

1
2
3
4
transform: translate3d(x, y, z);
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);

取值:

  • 像素单位数值
  • 百分比

透视

**目标:**使用 perspective 属性实现透视效果

语法:

1
perspective: 值; /* 添加给父级 */

**取值:**像素单位数值,数值一般在 800-1200

**作用:**空间转换时,为元素添加近大远小近实远虚的视觉效果

空间旋转

目标:使用 rotate 实现元素空间旋转效果

语法:

1
2
3
transform: rotateZ(角度);
transform: rotateX(角度);
transform: rotateY(角度);

左手法则

判断旋转方向:左手握住旋转轴,拇指指向正值方向,手指弯曲方向为旋转正值方向

20211028192356

拓展

  • rotate3d(x, y, z, 角度):用来设置自定义旋转轴的位置以及旋转的角度
  • x, y, z 取值为 0-1 之间的数字

立体呈现

**目标:**使用 transform-style: preserve-3d 呈现立体图形

步骤:

  1. 盒子父元素添加 transform-style: preserve-3d
  2. 按需求设置子盒子的位置(位移或旋转)

空间内,转换元素都有自己独立的坐标轴,互不干扰

空间缩放

**目标:**使用 scale 实现空间缩放效果

语法:

1
2
3
4
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

动画

**目标:**使用 animation 添加动画效果

  • 过渡:实现两个状态间的变化过程
  • 动画效果:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

原理:

  • 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
  • 构成动画的最小单元:帧或者动画帧

步骤:

1.定义动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@keyframes 动画名称 {
from {
width: 200px;
}
to {
width: 600px;
}
}

@keyframes 动画名称 {
0% {
width: 200px;
}
50% {
width: 400px;
}
100% {
width: 600px;
}
}

2.使用动画

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

注意:

  • 动画名称和动画时长必须赋值
  • 取值不分先后顺序
  • 如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

animation 相关属性:

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

逐帧动画

**目标:**使用 steps 实现逐帧动画

步骤:

  1. 设置盒子尺寸是一张小图的尺寸,背景图为当前精灵图
  2. 改变背景图的位置(移动的距离就是精灵图的宽度)
  3. 添加速度曲线 steps(N),N 与精灵图上小图个数相同
  4. 添加无限重复效果

20211030162852

1
2
/* 使用两组动画实现让小人先跑一段的效果 */
animation: run 1s steps(12) infinite, move 3s linear forwards;

视口

**目标:**使用 meta 标签设置视口宽度,制作适配不同设备宽度的网页

语法:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • viewport:视口
  • width=device-width:视口宽度=设备宽度
  • initial-scale=1.0:缩放一倍(不缩放)

二倍图

**目标:**能够使用像素大厨软件测量二倍图中元素的尺寸

  • 现阶段设计稿参考 iPhone6/7/8,设备宽度 375px 产出设计稿
  • 二倍图设计稿尺寸 750px

百分比布局

**目标:**能够使用百分比布局开发网页

  • 百分比布局,也叫流式布局
  • 效果:宽度自适应,高度固定

Flex 布局

**目标:**能够使用 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默认值,弹性盒子沿着主轴线被拉伸至铺满容器

伸缩比

**目标:**使用 flex 属性修改弹性盒子伸缩比

语法:

1
flex: 值; /* 数值为整数 */

主轴方向

**目标:**使用 flex-direction 改变元素排列方向

主轴默认是水平方向,侧轴默认是垂直方向

属性值作用
row行,水平(默认值)
column列,垂直
row-reverse行,从右向左
column-reverse列,从下向上

弹性盒子换行

**目标:**使用 flex-wrap 实现弹性盒子多行排列效果

语法:

1
flex-wrap: wrap;

**调整行对齐方式:**align-content(取值与 justify-content 基本相同

移动适配

  • rem:目前多数企业在用的解决方案
  • vw / vh:未来的解决方案

rem

**目标:**能够使用 rem 单位设置网页元素的尺寸

**效果:**屏幕宽度不同,网页元素尺寸不同(等比缩放)

**原理:**rem 单位是相对于 HTML 标签字号计算结果,1rem = 1HTML 字号

媒体查询

**目标:**能够使用媒体查询设置差异化 CSS 样式

语法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 目前rem布局方案中,将网页等分成10份,HTML标签的字号为视口宽度的 1/10 */
@media (width: 320px) {
html {
font-size: 32px;
}
}

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

@media (width: 414px) {
html {
font-size: 41.4px;
}
}
/* rem单位的尺寸 = px单位数值 / 基准根字号 */

flexible

**目标:**使用 flexible.js 配合 rem 实现在不同宽度的设备中,网页元素尺寸等比缩放效果

  • flexible.js 是手淘开发出的一个用来适配移动端的 js 框架
  • 核心原理就是根据不同视口宽度给网页中 html 根节点设置不同的 font-size
1
2
3
4
5
<body>
<div class="box"></div>

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

less

**目标:**使用 less 运算写法完成 px 单位到 rem 单位的转换

less 是一个 css 预处理器,扩充了 css 语言,使 css 具备一定的逻辑性、计算能力

注释

单行注释:

  • 语法://注释内容
  • 快捷键:ctrl + /

块注释:

  • 语法:/* 注释内容 */
  • 快捷键:shift + alt + a

运算

  • 加、减、乘直接书写计算表达式
  • 除法需要添加小括号或.
1
2
3
4
5
6
7
.box {
width: 100 + 50px;
height: 2 * 32px;

width: (100 / 4px);
height: 100 ./ 4px;
}

嵌套

1
2
3
4
5
6
7
8
9
.father {
color: red;
.son {
width: 100px;
}
&:hover {
color: green;
}
}

其对应的 css 为:

1
2
3
4
5
6
7
8
9
.father {
color: red;
}
.father .son {
width: 100px;
}
.father:hover {
color: green;
}

变量

**目标:**能够使用 less 变量设置属性值

1
2
3
4
5
6
7
8
9
@fontcolor: pink;

.box {
color: @fontcolor;
}

a {
color: @fontcolor;
}

导入

1
2
3
// 如果是less文件,可以省略后缀.less
@import "base.less";
@import "style";

导出

**方法一:**在vscodesetting.json中添加以下代码

1
2
3
"less.compile": {
"out": "../css/"
}

**方法二:**less 文件第一行添加以下代码

1
2
3
4
5
6
7
/* 文件夹名称后面记得添加/ */
// out: ./css/

// out ./css/style.css

/* 禁止导出 */
// out:false

vw / vh

**目标:**能够使用 vw / vh 单位设置网页元素的尺寸

  • 相对视口的尺寸计算结果
  • vw(viewport width):1vw = 1/100 视口宽度
  • vh(viewport height):1vh = 1/100 视口高度

vw 单位尺寸 = px 单位数值 / (1/100 视口宽度)

vh 单位尺寸 = px 单位数值 / (1/100 视口高度)

开发中 vw 和 vh 不会混用,全面屏视口高度尺寸大,混用可能会导致盒子变形

响应式网页

媒体查询

**目标:**能够根据设备宽度的变化,设置差异化样式

基本语法:

1
2
3
4
5
@media (max-width: 1200px) {
body {
background-color: pink;
}
}

书写顺序:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 因为CSS的层叠性,该绿色会被最下面的天蓝色层叠掉,不生效 */
@media (min-width: 1200px) {
body {
background-color: green;
}
}
@media (min-width: 768px) {
body {
background-color: pink;
}
}
@media (min-width: 992px) {
body {
background-color: skyblue;
}
}
  • min-width(大于等于):从小到大
  • max-widht(小于等于):从大到小

完整写法:

1
2
3
@media mediatype and|not|only (media feature) {
CSS-Code;
}

媒体类型

描述
all默认值,用于所有设备
print用于打印机和打印预览
screen用于电脑屏幕,平板电脑,智能手机等。
speech应用于屏幕阅读器等发声设备

媒体特性

属性
width、height数值
max-width、max-height数值
min-width、min-height数值
orientationportrait:竖屏、landscape:横屏

外链式 CSS 引入

1
2
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">

Bootstrap

**目标:**使用 Bootstrap 框架快速开发响应式网页

使用步骤:

  1. 下载:https://www.bootcss.com/
  2. 引入:<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
  3. 调用 class 类:使用 Bootstrap 提供的样式

Bootstrap 栅格系统

**目标:**使用 Bootstrap 栅格系统布局响应式网页

  • 栅格化是指将整个网页的宽度分成若干等份
  • Bootstrap3 默认将网页分成 12 等份
超小屏幕小屏幕中等屏幕大屏幕
响应断点<768px>=768px>=992px>=1200px
别名xssmmdlg
容器宽度100%750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列数12121212
列间隙30px30px30px30px
  • .container 是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认被指定宽度且居中,即版心
  • .container-fluid 也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%
  • 分别使用.row 类名和.col 类名定义栅格布局的行和列

注意:

  1. container 类自带间距 15px
  2. row 类自带间距-15px

全局 CSS 样式

**目标:**掌握 Bootstrap 手册用法,使用全局 CSS 样式美化标签

Bootstrap 中预定义了大量类用来美化页面,掌握手册的查找方法是学习全局样式的重点

图片

1
2
3
4
<img src="..." alt="..." class="img-responsive"> <!-- 图片自适应 -->
<img src="..." alt="..." class="img-rounded"> <!-- 图片设置圆角 -->
<img src="..." alt="..." class="img-circle"> <!-- 图片设置正圆 -->
<img src="..." alt="..." class="img-thumbnail"> <!-- 图片添加边框线 -->

20211109162445

辅助类

  • pull-left:强制元素左浮动
  • pull-right:强制元素右浮动
  • text-left 文:本左对齐
  • text-right:文本右对齐
  • text-center:文本居中对齐
  • center-block:块元素居中
  • clear fix:清除浮动元素的影响

组件

**目标:**使用Bootstrap 组件快速布局网页

使用方法:

  • 引入 Bootstrap 样式
  • 复制结构,修改内容

Glyphicons 字体图标

和 iconfont 使用方法类似,先引入对应的 CSS,然后再调用类名即可

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

<i class="glyphicon glyphicon-user"></i>

插件

**目标:**使用JavaScript 插件实现常见的交互效果

使用步骤:

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

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

定制

**目标:**能够根据项目需求定制 bootstrap 框架

定制步骤:

  • 导航栏 → 定制
  • 输入目标变量值
  • 编译并下载,使用定制后的框架