一、CSS链接的四种状态【演示前清除浏览器记录】
1.1 a:link 普通的、未被访问的链接？？？
1.2 a:visited 用户已被访问的链接？？？
1.3 a:hover 鼠标指针位于链接的上方=====
1.4 a:active 链接被点击的时刻=====
二、Sprite雪碧图应用
【导航条图标的精确位置】
1.回顾上一页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #oDiv{ width: 100px; height: 100px; background-color: red; /*定位*/ position: absolute; top: -50px; left: -50px; visibility: } </style> </head> <body> <!-- 课前回顾： 1.盒模型:div margin 外边距 左外边距 margin-left padding 内填充 border 边框 content 2.HTML标签的分类 行内|内联标签 块状标签 行内-块状 3.css布局的属性 position定位 absolute 绝对定义 relative 相对定义 static 默认 fiexd 固定 z-index 多个标签处于层叠效果，覆盖的问题。 A 遮住 B display visibility overflow float:浮动 clear 清除浮动 --> <div id="oDiv"></div> </body> </html>
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>css雪碧图的使用
<!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>效果图
所使用图片