竖型导航栏的制作
1、新建html文件index.html，使用文本编辑器进行编辑。
如下图：
2、在<body>内开始编写导航栏的html代码。
使用ul标签建立一个无序列表<ul class="nav">
<li>Home</li>
<li>Hidden Cameras</li>
<li>CCTV Cameras</li>
<li>Employee</li>
<li>Helpful Hints</li>
<li>F.A.Q</li>
<li>About Us</li>
<li>Contact US</li>
</ul>
效果如下图：
此时的列表还不能点击进行导航，我们使用<a>标签进行超链接:
<ul class="nav">
<li><a href="">Home</a></li>
<li><a href="">Hidden Cameras</a></li>
<li><a href="">CCTV Cameras</a></li>
<li><a href="">Employee</a></li>
<li><a href="">Helpful Hints</a></li>
<li><a href="">F.A.Q</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Contact US</a></li>
</ul>
效果如下图：
3、为了使得导航栏更加美观我用CSS进行样式设计，此时应在<head>标签里进
行引用。
<head>
<link href="./style.css" rel="stylesheet" type="text/css" /> </head>
4、新建CSS文件使用文本编辑器进行编辑
A.应为html页面默认有内、外边距。
为方便我们进行样式设计，把所有标
签默认的内、外边距设为0px。
*{
margin:0px;
padding:0px;
}
B.为了使导航栏在页面中间我们通过设置列表所在的<div>标签的属性实现
#main
{
width:900px;
margin:50px auto;
position:relative
}
C．为了导航栏突出于页面我们对列表标签整体进行设计
.nav {
height:320px;
width:150px;
background:#90BADE;
border-right:1px solid #333;
margin:0 auto;
}
效果如下图：
C.为了去掉列表项中默认的项目标示我们对项目标签进行设置
.nav li {
list-style:none;
width:150px;
border-bottom: 1px solid #90bade;
}
效果如下图：
E．为了实现标签的块状显示我们对<a>进行设置.nav li a{
display:block;
height:36px;
color:#FFF;
width:120px;
*width:150px;
line-height:36px;
background-color:#2175BC;
border-right:10px solid #508FC4;
border-left:10px solid #1958B7;
padding-left:10px;
text-decoration:none;
font-size:13px;
border-bottom:1px solid #555555;
}
效果如下图：
F.为了使鼠标表在项目上滑过时有突出显示我对<a>标签的hover属性进行设置。
.nav li a:hover{
background-color:#508FC4;
border-right:10px solid #5AA1E1;
border-left:10px solid #1B65D2;
}
效果如下图：。