垂直导航栏

创建垂直导航栏步骤

1. 创建名为navmenu.css的样式表文件

2. 创建名为nav.html的HTML文件

3. 在名为nav.html的HTML文件中通过属性 → 样式 → 附加样式表,导入名为navmenu.css的样式表文件

4. 创建新样式如下:

在选择器类型中选择 →高级 →在名称栏中输入：#navmenu

定位设置：

position： absolute;    /*类型：绝对*/

width：150px;           /*宽：150像素*/   

left： 25px;            /*置入，左、上*/

top： 50px;

5. 创建列表和<div>标签

在名为nav.html的HTML文件中,插入<div>标签和项目列表,并作相关的链接如下:

<div id="navmenu">

  <ul >

    <li><a href="#">首页</a></li>

    <li><a href="#">个人简历</a></li>

    <li><a href="#">我的能力</a></li>

    <li><a href="#">联系我</a></li>

  </ul>

</div>

6. 创建导航栏样式

/*为所有的列表项定义字体外形和大小，删除标准项目符号，并清除列表中的空白和填充*/

#navmenu ul {

   font-family: Verdana, Arial, Helvetica, sans-serif;

   font-size: 14pt;

   font-weight: bold;

   margin: 0px;

   padding: 0px;

   border: 1px solid #990000;

   }

/*保证所出现底部的空白用于分隔每个列表项，两项之间为2px*/

#navmenu li {

   margin-bottom: 2px;

}

/*将链接的激活区域扩展到一个块并添加背景图像、宽度和边框*/

#navmenu a {

   background-image: url(images/listnav_out.jpg);

   display: block;

   width: 140px;

   padding-top: 2px;

   padding-right: 2px;

   padding-bottom: 2px;

   padding-left: 5px;

   border: 1px solid #cc9900;

   list-style-type: none;

}

/*当按钮处于标准或已按状态时定义其文本外观，制定一种特别的颜色并清除连接的下划线*/

#navmenu a:link,#navmenu a:visited {

   color: #993300;

   text-decoration: none;

}

/*在跳转状态中交换图像并改变文本颜色*/

#navmenu a:hover {

   color: #ffffff;

   background-image: url(images/listnav_over.jpg);

   border: 1px dotted #990000;

}

垂直导航栏效果