<!DOCTYPE html>
<html>
<head>
<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>
<style type="text/css">
body,u1{margin:0; padding: 0; list-style: none;}
ul{width:100px;
height:60px;
line-height: 60px;
color:#FFF;
font-size: 12px;
background: url(images/jingling.png) no-repeat;
float: left;
margin: 10px;
padding-left: 65px;
color: #666;
font-size: 24px;
}
</style>
<!DOCTYPE html>
<html>
<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>
<style type="text/css">
.all{
width:500px;
margin: 20px auto;
height: 35px;
line-height: 35px;
}
.all li{float: left;}
.all a,.all span{
display: inline-block;
height: 56px;
float: left;
}
.one{
width: 22px;
background: url(images/left.png);
}
.two{
width: 22px;
background: url(images/right.png);
}
.all a:link,.all a:visited{
color: #FFF;
font-size: 18px;
font-weight: bold;
font-style: "微软雅黑"；
text-shadow:3px 3px 5px #333;
text-decoration: url(imges/middle.png) repeat-x;
padding: 0 20px;
}
.all a:hover{
color: #333;
text-shadow: 3px -3px 5px #FFF;
}
</style>
<!DOCTYPE html>
<html>
<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>
<!DOCTYPE html>
<html>
<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 class="small"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<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>
<style type="text/css">
.yaxian{
width: 102px;
height: 50px;
display: block;
float: left;
background: url(images/login.png);
}
.two{
width: 100px;
background-position: -102px 0;
}
.three{
width: 98px;
background-position: -202px 0
}
</style>
