<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS精灵</title>
</head>
<body>
<ul>
<li class="box1">聊天</li>
<li class="box2">下载</li>
<li class="box3">视频</li>
<li class="box4">记事本</li>
<li class="box5">博客</li>
</ul>
</body>
</html>
02.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css滑动门技术</title>
</head>
<body>
<ul class="all">
<li>
<span class="one"></span><a href="#">首页</a><span class="two"></span>
</li>
<li>
<span class="one"></span><a href="#">公司产品</a><span class="two"></span>
</li>
<li>
<span class="one"></span><a href="#">就业指导信息</a><span class="two"></span>
</li>
<li>
<span class="one"></span><a href="#">留言薄</a><span class="two"></span>
</li>
<li>
<span class="one"></span><a href="#">添加友情链接</a><span class="two"></span></li>
</ul>
</body>
</html>
03.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对同级标签应用margin负值</title>
<style type="text/css">
div{
width:120px;
height:48px;
background: #0CF;
float: left;
opacity: 0.7;
border: 2px solid #FFF;
border-radius: 50px;
text-align: center;
line-height: 48px;
color: #000;
}
.second,.third,.fourth{
margin-left: -15px;
}
</style>
</head>
<body>
<div class="first">首页</div>
<div class="second">公司简介</div>
<div class="third">产品</div>
<div class="fourth">联系我们</div>
</body>
</html>
04.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对子标签应用margin负值</title>
<style type="text/css">
.big{
width: 400px;
height: 50px;
border: 2px solid #aaa;
border-radius: 50px;
background-color: #F36;
margin: 40px auto;
}
.small{
width: 80px;
height: 50px;
background-color: #FFF;
border: 2px solid #CCC;
margin-top: -30px;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="big"></div>
<div class="small"></div>
</body>
</html>
05.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册模块</title>
</head>
<body>
<div class="yaxian">
<a href="#" class="one"></a>
<a href="#" class="two"></a>
<a href="#" class="three"></a>
</div>
</body>
</html>
.yaxian{
width: 300px;
}
