XML：CSS基础之十

HTML与CSS导航栏设计

最新推荐文章于 2025-12-04 19:14:36 发布

原创最新推荐文章于 2025-12-04 19:14:36 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xml #css #url #stylesheet #class #xhtml

XML/CSS/XSL 专栏收录该内容

107 篇文章

订阅专栏

b.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>baby</title>
<link href="b.css" _fcksavedurl=""b.css"" _fcksavedurl=""b.css"" rel="stylesheet" type="text/css" />
</head>

</body>
</html>

1.css

/*----------------Base---------------------*/
*{
margin: 0px;
padding: 0px;
}
#nav {
border: 1px solid #CCCCCC;
height:200px;
width: 610px;
display: block;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
font-family: "宋体";
font-size: 12px;
}
#nav li{
float: left;
width: 120px;
list-style-type: none;
}

#nav ul{
display: block;
}
/*----------------1---------------------*/
#nav li a.bei{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: 0px center;
}

#nav li a.bei:hover,#nav li a.bei:active{
background-image: url(baby.jpg);
}

/*----------------2---------------------*/
#nav li a.jing{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -122px center;
width:130px; /*--显示宽度修正--*/
}

#nav li a.jing:hover,#nav li a.jing:active{
background-image: url(baby.jpg);
}

/*----------------3---------------------*/
#nav li a.huan{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -248px center;
}

#nav li a.huan:hover,#nav li a.huan:active{
background-image: url(baby.jpg);
}

/*----------------4---------------------*/
#nav li a.ying{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: -368px center;
width:115px; /*--显示宽度修正--*/
}

#nav li a.ying:hover,#nav li a.ying:active{
background-image: url(baby.jpg);
}

/*----------------5---------------------*/
#nav li a.ni{
display: block;
height: 200px;
background-image: url(baby0.jpg);
background-repeat: no-repeat;
background-position: right center;
}

#nav li a.ni:hover,#nav li a.ni:active{
background-image: url(baby.jpg);
}

<a href="http://www.namipan.com/d/749ae0baeb7f3331f9e5b5c6ae5a88f7ffd342bd5eed0200">素材提供.rar</a>

效果演示如下: