11、界面样式
常见的界面样式：
- 更改用户的鼠标样式
- 表单轮廓
- 防止表单域的拖拽
- 解决图片或表单问题
- 溢出操作
11.1 鼠标样式 cursor
li {
/* 小手样式 */
cursor: pointer;
}设置在对象上移动时的鼠标样式：
default：小白（默认）pointer：小手`move：：移动text：文本not-allowed：禁止
11.2 轮廓线 outline
给表单添加 outline:0 或 outline:onne 样式后，就可以去掉默认的蓝色边框
input 文本框就会这个默认的蓝色边框样式，可用 outline:0 去除掉
input {
outline: 0;
}11.3 防止拖拽文本域 resize
文本域 textarea 默认是可以拖拽的，但是实际开发中，是不允许的，可添加 resize: none;
textarea { resize:none; }11.4 vertical-align 属性应用
1、设置图片或表单域文字垂直对齐
vertical-align 翻译过来就是垂直对齐，经常用于设置图片表单（行内块元素）与文字垂直对齐
vertical-align: baseline | top | middle | bottombaseline：元素放置在父元素的基线上，默认top：把元素的顶端与行中最高元素的顶端对齐middle：把次元素放置在父元素的中部bottom：把元素的底端与最低元素的底端对齐
<style>
img {
/* 中间对齐 */
vertical-align: middle;
}
</style>
<body>
<img src="..." alt=""> 我失去过
</body>2、解决图片底部默认空白间隙问题
Bug：图片底部会有一个空白间隙，原因是行内块元素会和文字的底部基线对齐
解决办法：
- 给图片img添加：
vertical-align: top | middle | bottom（提倡使用） - 把图片转换为块级元素
display: block;
11.5 溢出文字处理
1、单行文本溢出
- 强制在一行内显示：
white-space: nowrap;（默认是normal，自动换行） - 超出的部分隐藏：
overflow: hidden; - 用省略号代替超出的部分：
text-overflow: ellipsis;
2、多行文本溢出
1. 超出的部分隐藏：overflow: hidden;
2. 用省略号代替超出的部分：text-overflow: ellipsis;
3. 弹性伸缩盒子模型显示：display: -webkit-box;
4. 限制在一个块级元素显示的文本行数： -webkit-line-clamp: 2
5. 设置或检索伸缩盒子的对象的子元素的排序方式： -webkit-box-orient: vertical- 多行文本溢出显示省略号，有较大的兼容性问题，适合 webKit 浏览器或移动端
- 更推荐让后台人员来做这个
12、精灵图
在网页中，往往都会有一些图片来作为修饰，但是有些网站图片过多时（如 电商网页），服务器会频繁地接收和发送图片，造成服务器压力过大，降低页面的加载速度
为了解决这个问题，出现了CSS精灵技术，所谓精灵技术，就是将一些小图片整合到一张大图片上，这样服务器只需要发送一次请求即可
所以，精灵技术的目的就是：为了有效地减少服务器频繁接收和发送请求的次数，提高页面的加载速度
注意：精灵图针对的是小图片
精灵图的使用
- 获取背景图片的带大小，以及坐标
- 利用
background-position移动到图片的位置 - 移动的距离就是图片的x和y坐标；一般都是往左上角移动，所以数值时负的
具体方法：
- 用
width和height设置图片的大小（真是的图片大小） - 用
background导入图片，设置具体坐标
栗子：
.sprites {
width: 60px;
height: 60px;
margin: 50px auto;
/* 背景大图片 不平铺 小图片的坐标 */
background: url(...) no-repeat -155px -106px;
}13、字体图标 iconfont
精灵图有诸多优点，但是缺点也明显：图片大、制作麻烦、图片本身放大和缩小会失真
所以字体图标就是来弥补精灵图的缺点，优点：
- 轻量级：图片小
- 灵活性：本质是文字，可以改变颜色、添加阴影、透明效果、旋转等等
- 兼容性：几乎支持所有浏览器
精灵图和字体图标就是应用在小图片上：
- 复杂的小图片，用精灵图
- 简单的小图片，用字体图标
本质：是文字
使用：
- 字体图片下载
- 引入（引入到html页面中）
- 字体图片的追加
13.1 字体图片下载
icomoon网站：icomoon字库：http://icomoon.io- 阿里字库：
http：//www.iconfont.cn
13.2 字体图片引入
三个步骤：
- 把下载包里面的fonts文件夹放入页面根目录里下
在 CSS 样式中全局声明字体：简单理解吧这些字体文件通过CSS引入到我们页面中
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?p4ssmb'); src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?p4ssmb') format('truetype'), url('fonts/icomoon.woff?p4ssmb') format('woff'), url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; }html 标签内添加小图标（复制小图标到标签中）
<span> </span>
14、CSS 三角
css三角 即用纯css做一个三角，不必做成图片或者字体图标
其实是利用了边框
- 首先设置
width: 0; height: 0; - 然后给它设置一个边框，注意：颜色为透明
- 然后给任意一侧的边框上色就可以了
.one {
width: 0;
height: 0;
/* 设置边框为透明色 */
border: 100px solid transparent;
/* 令其上边框为粉色 */
border-top-color: pink;
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。