网页导航栏样式设计与实现-优快云博客

效果图：背景是黑色的图片，鼠标经过时的状态背景变成深灰色图片，中间的竖线也是图片：

html代码

<!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" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <title></title>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
       <div id="nav">
           <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>
               <li><a href="#">i贴吧</a></li>
           </ul>
       </div>

css:

body,div,img,ul,a,li{
   padding:0;
}
body{
   background:red;
}
#nav{
   width:960px;
   margin:0 auto;
}
#nav{
   height:50px;
   background:url("images/nav.jpg") repeat-x; （导航的背景色“黑色”，并且是x轴平铺）
}
#nav ul {
   list-style:none;
}
#nav ul li{
   float:left;
   background:url("images/navLine.jpg") right center no-repeat; （中间的竖线以背景的方式插入其中，并且是放在右边居中的位置，不平铺。）
   width:130px;（给栏目与栏目之间加上宽度）
   text-align:center;
   line-height:50px;
}
#nav ul li a{
   text-decoration:none;
   color:white;
   font-size:14px;
   display:block;（a是行内元素，宽高都不起作用，所以要把它变块元素）
   width:130px;（如果不加这个宽度，插入的鼠标经过时的效果，只会是字有多大，背景有多大，所以这个是给鼠标放上是连接的状态所加上的。）
}
#nav ul li a:hover{
   background:url("images/nav2.jpg") repeat-x;
}

制作导航的方法