练习一
- 效果：
- 背景图素材：
图片 nav.png
图片nav-on.png
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动门练习2</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
margin: 200px;
}
/* 清除列表项前面的圆点 */
li {
list-style: none;
}
ul li {
float: left;
}
ul li a{
display: block;
height: 78px;
background-image:url(../images/nav.png);
background-repeat: no-repeat ;
/* 注意对background几个属性分开设置，下面设置鼠标滑过时的background-image时才能覆盖background-image:url(../images/nav.png); */
}
/* 这里因为滑动时的背景图有下边框，所以测量nav-on.png的大小会比较容易区分几个a的大小。 */
ul li:nth-child(1) a{
width: 100px;
}
ul li:nth-child(2) a{
width: 124px;
background-position: -100px 0px;
}
ul li:nth-child(3) a{
width: 146px;
background-position: -224px 0px;
}
ul li:nth-child(4) a{
width: 120px;
background-position: -370px 0px;
}
ul li:nth-child(5) a{
width: 123px;
background-position: -490px 0px;
}
ul li:nth-child(6) a{
width: 122px;
background-position: -613px 0px;
}
/* 点击时直接改变背景图 */
ul li:hover a{
background-image: url(../images/nav-on.png);
}
</style>
</head>
<body>
<!-- ul>li*6>a[href="#"] 生成下方内容的快捷键-->
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body>
</html>
练习二
- 效果：
- 背景图素材
图片 bg.gif
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习滑动门</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul{
margin: 200px;
}
li {
list-style: none;
}
ul li {
float: left;
}
ul a {
display: block;
width: 62px;
height: 22px;
background-image: url(../images/bg.gif);
background-repeat: no-repeat;
}
ul li:nth-child(2) a {
background-position: -62px 0px;
}
ul li:nth-child(3) a {
background-position: -124px 0px;
}
ul li:nth-child(4) a {
background-position: -186px 0px;
}
/* 点击时的背景 */
ul li:nth-child(1):hover a{
background-position: 0px -22px;
}
ul li:nth-child(2):hover a{
background-position: -62px -22px;
}
ul li:nth-child(3):hover a{
background-position: -124px -22px;
}
ul li:nth-child(4):hover a{
background-position: -186px -22px;
}
</style>
<body>
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</body>
</html>