1.回顾上一节内容：
2.本节笔记
3.例子试题
3.1 中间链接的样式使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*css设置超链接的样式（选择器）*/
#aa{
color: yellow;
}
/*未被访问的样式*/
#aa:link{
color: pink;
}
/*鼠标触碰*/
#aa:hover{
color: orange;
}
/*超链接被点击不放时所设置的样式*/
#aa:active{
color: green;
background-color: red;
}
#aa:visited{
background-color: black;
}
</style>
</head>
<body>
<a href="http://www.4399.com">百度一下</a>
<hr>
<a id="aa" href="http://www.4399.com">百度一下</a>
</body>
</html>
3.2css雪碧图的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#container{
width: 960px;
height: 800px;
/* 显示边框*/
border: 1px solid red;
居中
margin: 0 auto;
}
#container>.top{
width: 960px;
height: 180px;
/*background-color: pink;*/
}
#container>.top>.nav{
width: 960px;
height: 30px;
/*border: 1px solid black;*/
/*text-align: right;*/
}
#container>.top>.search{
width: 960px;
height: 140px;
/*border: 1px solid orange;*/
line-height: 140px;
居中
text-align: center;
}
input{
width: 300px;
height: 35px;
}
button{
width: 80px;
height: 38px;
设置字体大小
font-size: 20px;
}
#container>.main{
width: 960px;
height: 550px;
background-color: #666;
}
#container>.foot{
width: 960px;
height: 70px;
/*background-color: pink;*/
}
#container>.top>.nav ul{
list-style: none;
}
.logo{
width: 40%;
height: 30px;
/*background-color: red;*/
浮左 浮动
float: left;
}
.mynav{
width: 60%;
height: 30px;
/*background-color: orange;*/
float: left;
text-align: right;
}
ul li{
float: left;
}
ul li a{
/*border: 1px solid red;*/
display: inline-block;
width: 70px;
height: 30px;
line-height: 30px;
text-align: center;
color: black;
text-decoration: none;
}
.zking{
width: 30px;
height: 30px;
/*border: 1px solid red;*/
background-image: url("icon.gif");
background-repeat: no-repeat;
}
.zking2{
background-position: -26px 1px;
}
.zking3{
background-position: -54px 3px;
}
.zking4{
background-position: -81px 3px;
}
.btn{
width: 45px;
height: 20px;
font-size: 12px;
设置按钮圆角
border-radius: 10px;
}
</style>
</head>
<body>
<!-- 雪碧图实现导航条 -->
<div id="container">
<div class="top">
<!-- 显示导航条 -->
<div class="nav">
<div class="logo"></div>
<div class="mynav">
<ul>
<li class="zking"></li>
<li><a href="">购物车</a></li>
<li class=" zking zking2"></li>
<li><a href="">帮助中心</a></li>
<li class="zking zking3"></li>
<li><a href="">加入收藏</a></li>
<li class="zking zking4"></li>
<li><a href="">设为首页</a></li>
<li><button class="btn">登录</button></li>
<li><button class="btn">注册</button></li>
</ul>
</div>
</div>
<!-- 显示搜索 -->
<div class="search">
<form action="">
<input type="text">
<button>搜索</button>
</form>
</div>
</div>
<div class="main"></div>
<div class="foot"></div>
</div>
</body>
</html>
效果图
