CSS网页布局入门教程12：纵向导航菜单

站长资源 2024/11/24 佚名

20 1538 20

DDR爱好者之家 Design By 杰米

纵向导航菜单也是网站应用中的一种重要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧！

如图所示的效果，我们先看一下代码结构：

<div id="nav">
    <h1>CSS</h1>
        <h2><a href="#">css入门</a></h2>
        <h2><a href="#">css进阶</a></h2>
        <h2><a href="#">css高级</a></h2>
    <h1>webUI</h1>
        <h2><a href="#">理论知识</a></h2>
        <h2><a href="#">实战应用</a></h2>
        <h2><a href="#">高级技巧</a></h2>
    <h1>DOM</h1>
        <h2><a href="#">DOM入门</a></h2>
        <h2><a href="#">DOM应用</a></h2>
        <h2><a href="#">DOM与浏览器</a></h2>
    <h1>XHTML</h1>
        <h2><a href="#">参考手册</a></h2>
        <h2><a href="#">交流论坛</a></h2>
</div>

　　从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。
　　这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题，h2来做二级分类下面的细节内容。在XHTML的讲法意义中，h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义，直接使用h1,h2来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计：

#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

　　本css代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。
　　大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h1的样式里设置了上部的上像素？这是为什么呢？因为h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。
　　好了，完整的效果可以预览一下：

<!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=gb2312" /> <title>纵向导航菜单</title> <style> #nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;} #nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;} #nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} </style> </head> <body>      <h1>CSS</h1>         <h2>css入门</h2>         <h2>css进阶</h2>         <h2>css高级</h2>     <h1>webUI</h1>         <h2>理论知识</h2>         <h2>实战应用</h2>         <h2>高级技巧</h2>     <h1>DOM</h1>         <h2>DOM入门</h2>         <h2>DOM应用</h2>         <h2>DOM与浏览器</h2>     <h1>XHTML</h1>         <h2>参考手册</h2>         <h2>交流论坛</h2>  </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

CSS网页布局入门教程12：纵向导航菜单

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“CSS网页布局入门教程12：纵向导航菜单”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

CSS网页布局入门教程12：纵向导航菜单

CSS网页布局入门教程13：下拉及多级弹出式菜单

CSS网页布局入门教程11：带当前标识的标签式横向导航图片美化版

评论“CSS网页布局入门教程12：纵向导航菜单”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接