Logo内容移除
像小米，百度，京东，淘宝都有自己的Logo(网页的标志),
1.将a标签的背景background作为logo使用，所以点击图片也可以跳转。
2. 可以在logo中设置文字，但是要将文字移除给用户更好的体验。
3. （1）使用text-ident设置一个负值来移除logo中的内容
看下小米官网的logo
使用em也可以。
（2）字体大小调为0 font-size:0px;
（3）文字设置为透明色color:transparent;
盒子阴影
盒子加box-shadow 这个属性:值
box shadow:insert 值（表示内阴影）
例如：
box-shadow: 1px 1px 1px red;
多个阴影用逗号隔开
精灵图
首先精灵图是一张普通的图片,并且图片上包含了若干张背景图片
作用：
设置元素的背景图片,为了减少网络(http)请求图片的次数
使用：
1、先将精灵图作为盒子的背景图片
2、通过background-position 在水平方向和垂直方向移动背景图片（移动距离可以用ps测（推荐），QQ截图也可以等）
3、水平方向移动的距离=要显示的图片在精灵图中的横坐标
4、垂直方向移动的距离=要显示的图片在精灵图中的纵坐标
滑动门
可以制作导航（使用背景图片制作）
注意：使用背景图片导航的内容区域不能设置固定宽度，不然无法随内容变化。一定要使用内容将导航撑开
网上找的素材
bg1:
bg2:
分析：
使用ul >li自作导航栏，导航栏还有a标签，变化的是bg2，随文字（多少）变化（长短），所以想法是在a标签（背景图片bg1）里面加span标签（背景图片bg2）
<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">*{margin: 0px;padding: 0px;}.nav{width: 980px;height: 35px;/*这里高度要和图片的一样*/margin: 0 auto;/*使导航栏居中*/}.nav li{float: left;/*使li标签排成一行*/list-style: none;/*去除li的圆点*/}.nav li a{text-decoration: none;/*去除a标签文本修饰的下划线*/display: inline-block;/*转化为行内快，高生效*/height: 35px;/*不能设置固定宽度，如果设置固定的话，就不会随内容变化*/padding-left: 7px; /*内容与边框的距离*/background:url(image/bg1.png) no-repeat;/*背景图片不重复*/}.nav li a span{display: inline-block;height: 35px;background: url(image/bg2.png) no-repeat right;/*注意不加rigth的话默认显示图片左边*/padding-right: 20px;line-height: 35px;}</style>
</head>
<body>
<div class="nav"><ul ><li><a href="javascript:void(0)"><span>首页</span></a></li><li><a href="javascript:void(0)"><span>导航导航导航导航导航</span></a></li><li><a href="javascript:void(0)"><span>导航导航</span></a></li></ul>
</div>
</body>
</html>
