利用CSS制作纵向导航菜单

作者:     目录:编程代码 & 网页设计     发表:2009年11月22日

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;
}
标签:

♥支付宝现金红包♥

支付宝现金红包,每天可领,红包金额最高 99元,使用无门槛,支付宝扫码付、还信用卡、充话费都可以使用。

支付宝红包领取方法:

  • 打开支付宝APP,首页搜索数字 1547638 即可领现金红包
  • 手机用户直接 点击这里领取
  • 或者支付宝APP扫描下面二维码领取
支付宝现金红包 每天可领

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.