一、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>效果图
所使用图片
