导航条菜单，即左图所示。下面，将一一展开如何制作。
1、首先，制作一个垂直的项目菜单，用<ul><li>标签写出基本内容，然后在样式表里面用margin和padding去掉内外边距，用list-style属性去掉原有的项目符号，插入自己喜欢的项目符号，代码如下：
<!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=utf-8" />
<title>列表和导航条</title>
<style type="text/css">
ul{
padding: 0;margin: 0;
list-style: none;
}
li{ background:url(符号地址.png) no-repeat 0 50%; //这个时候必须写background
height: 30px;line-height: 30px;
padding-left: 30px;
}
</style>
</head>
<body>
<ul>
<li><a href = "#">project1</a></li>
<li><a href = "#">project2</a></li>
<li><a href = "#">project3</a></li>
<li><a href = "#">project4</a></li>
</ul>
</body>
</html>
并且可以同时给项目设置喜欢的边框和背景颜色：
li{
background:url(%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7.png) no-repeat 0 50%;//这个时候必须写background
height: 30px;line-height: 30px;
padding-left: 30px;
display: block;
width: 70px;
background-color: #CCC;
border: 1px solid #666;
}
这个时候，你会发现中间的边框线以为重叠而加粗了，你可以通过去掉下边框解决掉这个问题，然后再给最后一项或第一项加上：
li{
border-bottom:0;
}
ul #last{
border-bottom: 1px solid #666;
}
这个时候，垂直导航条的基本样式已经出来了，当然我们还需要：:hover,:focus,:selected状态：
ul li a:hover,ul li a:focus{
color:#000;
background-color:#960;
}
这个时候，既有漂亮样式也有翻转效果的垂直导航菜单就诞生了~~~
时间： 2024-10-13 01:59:53