264节---------4月28日

字体图标

一种高效的图标使用方式，显示的是图表，本质属于文字

是一些网页常见的小图标，可以直接网上下载

推荐下载网站

• icomoon字库
• 阿里iconfont字库

字体图表的使用

1. 下载完毕之后，注意原先的文件不要删
2. 把下载包里的fonts文件夹放入页面根目录下
3. 打开style.css文件，从开头选择到block，直接复制到CSS编辑器中（在CSS样式中全局声明字体，一定要注意文件路径的问题）
4. html标签内添加小图标，粘贴到<span>里
5. 给<span>指定一个字体

字体图标的追加

把压缩包里的selection.json重新上传，然后选中自己想要的新的图表，重新下载压缩包，并替换原来的文件即可。

---

CSS三角

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

---

CSS用户界面样式

更改一些用户操作样式，以提高用户的体验

常见的有

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

鼠标样式cursor

li{  cuesor：pointer；}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

属性值

• default默认
• pointer小手
• move移动
• text文本
• not-allowed禁止

例如：

<li style="cursor：pointer">我是鼠标小手样式</li>

取消表单轮廓线

给表单添加outline：0；或者outline：none；，就可以去掉默认的蓝色边框

例如：

input{ outline：none；}

防止拖拽文本域textarea

实际开发中，我们文本域右下角是不可以拖拽的。

textarea{ resize：none；}

---

vertical-align属性应用

经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

属性值有

• baseline
• top
• middle
• bottom

解决图片底部默认空白缝隙问题（两种方法）

• 给图片添加vertical-align:top/middle/bottom
• 把图片转化为块级元素display:block