<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS精灵</title>
<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\8\1.css">
</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>
body,ul{
margin: 0; padding: 0; list-style: none;
}
ul{width: 100px; height: 300px;}
li{
width: 100px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 12px;
background:url(images/jingling.png) no-repeat;
float: left;
margin: 10px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动门技术</title>
<link rel="stylesheet" type="text/css" href="D:\桌面\网页设计\8\2.css">
</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>
body,ul,li{padding: 0; margin: 0; list-style: none;}
.all{
width: 500px;
margin: 20px auto;
height: 35px;
line-height: 35px;
}
.all li{
float: left;
}
.all a,.all span{
display: inline-block;
height: 56px;
font: left;
}
.one{
width: 22px;
background: url();
}
.two{
width: 22px;
background: url();
}
.all a:link,.all a:visited{
color: #fff;
font-size: 18px;
font-weight: bold;
font-style: "微软雅黑"
text-shadow:3px 3px 5px #333;
text-decoration: none;
background: url() repeat-x;
padding: 0 20px;
}
.all a:hover{
color: #333;
text-shadow: 3px -3px 5px #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对同级标签的应用</title>
<link rel="stylesheet" href=""D:\桌面\网页设计\8\3.css"">
</head>
<body>
<div class="first">首页</div>
<div class="second">公司简介</div>
<div class="third">产品</div>
<div class="fourth">联系我们</div>
</body>
</html>
div{
width: 12px;
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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对子标签使用margin负值</title>
<link rel="stylesheet" href=""D:\桌面\网页设计\8\4.css"">
</head>
<body>
<div class="dig">
<div class="small"></div>
</div>
</body>
</html>
.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;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登陆注册模块</title>
<link rel="stylesheet" href=""D:\桌面\网页设计\8\5.css"">
</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;
height: 50px;
margin: 20px auto;
}
a{
width: 102px;
height: 50px;
display: block;
float: left;
background: url();
}
.two{
width: 100px;
background-position: -102px 0;
}
.three{
width: 98px;
background-position: -202px 0;
}
