任鸟飞网站设计博客

Web 2.0 提倡tableless(去表格化),将内容与样式完美的分离,利于网站的redesign(再设计)，利用CSS(层叠样式表)来定义网页的样式。

导航菜单设计的优劣不仅影响其导航功能，而且也影响SEO(搜索引擎优化)。下面讲解一下导航菜单的制作过程。

预览 CSS-vertical-menu

XHTML代码

<div id="nav">
  <ul>
    <li><a href="#"><span>任鸟飞网页设计</span></a></li>
    <li><a href="#"><span>关于我们</span></a></li>
    <li><a href="#"><span>业务简介</span></a></li>
    <li><a href="#"><span>联系我们</span></a></li>
    <li><a href="#"><span>留言</span></a></li>
  </ul>
</div>

下面定义其样式

// 将所有元素的填充和边界设置为0px
* {
 padding:0px;
 margin:0px;
}
// 定义body部分的字体和大小
body {
 font-family: "微软雅黑";
 font-size: 14px;
}
// 定义导航菜单 nav
#nav {
 padding:10px;
 background:#ccc;
 margin: 0px auto;
 width: 200px;
}
#nav li {
 list-style-type:none; // 将列表类型设置为 无
}
// 定义链接项的具体样式
#nav a, #nav a:visited {
 display:block;
 width:190px;
 color:#000;
 background-color:#fff;
 text-decoration:none;
 margin: 8px 0px;
 padding: 8px 0px;
 border-left: solid 8px #9ab;
 text-indent: 10px;
}
#nav a:visited {
 color:#c00;
}
#nav a:hover {
 color:#f00;
 border-left: solid 8px #000;
}