03-精灵图的使用
1.针对于背景图使用
2.也称为sprites精灵图或雪碧图
3.移动图片位置，此时可以使用background-position
4.移动的距离就是这个目标图片的x和Y坐标。注意网页中的坐标有所不同
5.一般往上往左移动，所以数值为负值
6.使用精灵图的时候需要精确测量，每个小背景图片的大小和位置
09-字体图标的追加和加载原理
10-css三角的做法
11-css三角应用-京东效果
12-用户界面-鼠标样式
{cursor:pointer}
default 小白 默认 pointer 小手 move移动 text文本 not-allowed禁止
13-用户界面-取消表单轮廓和防止拖拽文本域
input{outline:none}
textarea{resize:none}
14-vertical-align属性应用（只针对行内元素、行内快元素）
vertical-align:middle top bottom baseline
15-图片底侧空白缝隙解决方案
vertical-align:middle
display:block
16-单行文字溢出省略号显示
1.先强制一行内显示文本
white-space:nowrap;
2.超出的部分隐藏
overflow:hidden;
3.文字用省略号代替超出的部分
text-overflow:ellipsis;
17-多行文字溢出省略号显示
overflow:hidden;
text-overflow:ellipsis;弹性伸缩盒子模型显示
display:-webkit-box; 限制在一个块元素显示的文本的行数
-webkit-line-clamp:2;设置或检索伸缩盒对象的子元素的排列方式
-webkit-box-orient:vertical;
18-布局技巧-margin负值巧妙运用
19-布局技巧-margin负值巧妙运用
1.如果盒子没有定位，则鼠标经过添加相对定位即可
2.如果盒子都有定位，则利用z-index提高层级
20-布局技巧-文字围绕浮动元素
利用浮动解决图片文字布局问题
21-布局技巧-行内块的巧妙运用
```css
<style>
*{
margin: 0;
padding: 0;
}
.box{
text-align: center;
}
.box a{
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border:1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,
.box .next{
width: 85px;
}
.box .ab,
.box .cd{
border: none;
background-color: #fff;
}
.box input{
height: 36px;
width: 45px;
border: 1px solid #ccc;
outline: none;
}
.box button{
width: 60px;
height: 36px;
background-color: #f7f7f7;
border:1px solid #ccc;
outline: none;
}
</style>
</head>
```
```html
<body>
<div class="box">
<a href="" class="prev"><<上一页</a>
<a href="" class="ab">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="" class="cd">...</a>
<a href="" class="next">>>下一页</a>
到第
<input type="text">
页
<button>确定</button>
</div>
</body>
```
