web前端开发第九天课程

1字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

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

字体图标-下载字体

• iconfont图标库：https://www.iconfont.cn/
• 下载字体
  登录→素材库→官方图标库→进入图标库→选图标，加入购物车→购物车，添加至项目，确定→下载至本地，

字体图标-使用字体

1. 引入字体样式表(iconfont.css)
2. 标签使用字体图标类名

• iconfont：字体图标基本样式(字体名，字体大小等等)
• icon-xxx：图标对应的类名

字体图标-上传矢量图

作用：项目特有的图标上传到iconfont图标库，生成字体

2垂直对齐方式

因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐

效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了

1. display:block;

2. vertical-align:middle;/top;(图片和文字顶对齐)/bottom;

3过度属性

过渡transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果
属性名：transition(复合属性)
属性值：过渡的属性 花费时间(s)
提示：

• 过渡的属性可以是具体的CSS属性
• 也可以为all(两个状态属性值不同的所有属性，都产生过渡效果)
• transition设置给元素本身

img{
width:200px;
height:200px；
transition:all 1s;
}
img:hover{
width:500px;
height：500px;
}

4修饰属性-透明度与光标类型

透明度opacity
作用：设置整个元素的透明度(包含背景和内容)
属性名:opacity:0~1;

光标类型cursor
作用：鼠标悬停在元素上时指针显示样式
属性名：cursor
属性值:

• default默认值，通常是箭头
• pointer小手效果，提示用户可以点击
• text工字型，提示用户可以选择文字
• move十字光标，提示用户可以移动