sprites（精灵图）
1.概念
CSS Sprite也叫CSS精灵、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，由从前的多次请求变为一次请求。客户端每显示一图片都会向服务器发送请求，所以图片越多请求越多，造成延迟的可能性越大。所以页面有许多icon时，推荐使用CSS Sprite。
2.优点
（1）减少图片的字节。
（2）减少网页的http请求，从而大大的提高页面的性能。
（3）解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
3.原理
（1）需要一个设置好宽和高的容器
（2）通过background-image引入背景图片
（3）通过background-position把背景图片移动到自己需要的位置
调试方法:可以用浏览器自带的调试工具进行调试（如chrome浏览器按f12即可进行调试，慢慢移动background-position的值来达到理想的效果）
注：在使用雪碧图之前，我们首先应该用ps测量每个小图标的位置；下面这张图片就是由许多小图标组成的，先测量它们在这张图中的position;一般position为负值，因为需要把这个小图标向左上角平移裁切，所以position-x和position-y一般都是负值。
4.应用
<div class="icon"></div>
.icon {
width: 230px;
height: 230px;
background-image: url('');
background-repeat: no-repeat;
background-position: -260px -30px;
/*background可以简写为*/
background: url('') no-repeat -260px -30px;
/*background:background-image background-repeat background-position*/
}
滑动门
应用
CSS可见性（元素可见性） overflow： hidden； 将超出部分隐藏（部分隐藏） display: none; 元素隐藏（全部隐藏）（隐藏元素不占置） display: block; 显示元素 visibility： hidden； 隐藏元素（全部隐藏）（隐藏元素占置）
html
<div class="slide">
<ul class="list">
<li>
<a href="#">box1</a>
<div class="box"></div>
</li>
<li>
<a href="#">box2</a>
<div class="box"></div>
</li>
<li>
<a href="#">box3</a>
<div class="box"></div>
</li>
</ul>
</div>
css
body {
margin: 0;
padding: 0;
}
/* 去除ul,li本身才生的边距 */
div,ul,li {
margin: 0;
padding: 0;
}
.slide {
width: 300px;
height: 50px;
}
.list {
width: 100%;
height: 50px;
}
.list li {
list-style: none;
float: left;
font-size: 20px;
line-height: 50px;
display: block;
width: 33.33%;
text-align: center;
}
.list li a {
width: 100%;
height: 50px;
background: red;
display: block;
text-decoration: none;
color: white;
}
.list li:hover a{
background: gold;
}
/* 盒子向下偏移不会造成鼠标到中间空隙消失的情况，因为li把a标签和div包裹起来了（查看chrome调试） */
.list li .box {
margin-top: 10px;
width: 500px;
height: 500px;
background: green;
box-sizing: border-box;
border: 1px solid #fff;
display: none;
/* border-top: none; */
}
.list li:hover .box {
display: block;
}
三角形
html
<div class="triangle">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
</div>
css
.triangle {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.box1 {
width: 0;
height: 0;
border: 50px solid transparent;
border-top-color: red;
background: gray;
}
.box2 {
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
background: gray;
}
.box3 {
width: 0;
height: 0;
border-top: 50px solid black;
border-right: 50px solid red;
border-bottom: 50px solid green;
border-left: 50px solid blue;
}
.box4 {
width: 0;
height: 0;
background: gray;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
.box5 {
width: 0;
height: 0;
background: grey;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
.box6 {
width: 0;
height: 0;
background: grey;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.box7 {
width: 0;
height: 0;
background: grey;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.box8 {
width: 0;
height: 0;
background: gray;
border-right: 100px solid red;
border-top: 50px solid transparent;
}
.box9 {
width: 0;
height: 0;
background: grey;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
}
