当前位置:首页 > DIV+CSS教程 > 正文

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

作者:不详 来源:aa25收集 【 】 浏览: 修改日期:2008-06-17 我要评论(32)     

本站2010年9月新增《十天学会web标准(div+css)》系列教程,欢迎学习!

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



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

<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上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。
好了,完整的效果可以预览一下:


标准之路www.aa25.cn 提示:可以先修改部分代码后再运行

(如果您觉得本站不错,请告诉身边的朋友,或转载到论坛、百度知道、贴吧等,记得带网址哟,不胜感激!)

〖DIV+CSS教程〗Tags: CSS 导航 纵向

所属专题:入门教程

更多评论(32)..会员评论

jxndhrz(183.166.*.*) 发表于:2012-10-21 16:11:33
学习了~
管理员回复:多推荐人来
munglan(220.168.*.*) 发表于:2010-09-21 02:24:24
请问这个代码中h1标签多次使用,我在网上看说h1标签多次使用不太好,这是为什么呢?
管理员回复:从搜索引擎优化角度来讲,h类标签的权重较高,如果用的多可能会让搜索引擎误认为在滥用。本例主要讲解标签的灵活运用
wangjianghua(222.210.*.*) 发表于:2010-06-11 15:04:20
请问站上,怎么不用<ul>\<li>做呢?
管理员回复:本例也是在讲标签的灵活运用
Mcbag(112.94.*.*) 发表于:2010-05-26 19:53:00
#nav h2 a { color:#666666; text-decoration:none;} #nav h2 a:hover { color:#999999; text-decoration:underline;} 站长您好,辛苦了,这段代码,大部分都懂,就这两句不知道什么意思,麻烦您给我解释,先谢了。我是个新手。
管理员回复:链接的样式,和鼠标移到链接上的样式
menghuanyuting(124.65.*.*) 发表于:2010-05-11 17:34:44
非常感谢管理员,又学会了一节课,原来h1,h2还有这种功能,真是太神奇了。但是h1,h2如果做成外部引用CSS文件的话,是不是就有一定的局限性了,如果是用它们来控制整个网站的标题的话,就不能用来控制导航了吧?要么就是标题再重新写其它的命名样式。外部的两个CSS文件里不能分别定义h1,h2的属性吧,名字相同是不是会有冲突了?
管理员回复:是的
zl290405302(113.80.*.*) 发表于:2010-05-08 09:31:05
请问管主,导航栏居左,占据了整条,右侧就不能显示内容了,需要进行哪里的修改?
管理员回复:不明白
ai68738651(58.246.*.*) 发表于:2010-05-07 15:43:41
站长你太好了!上面那个居中的问题你可以这样写:#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; text-align:center;} #nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal; text-align:center;} #nav h2 a { color:#666666; text-decoration:none; text-align:center;} #nav h2 a:hover { color:#999999; text-decoration:underline;}
fenghuazh(218.65.*.*) 发表于:2010-03-23 17:17:24
现在明白margin 和padding的区别了, margin是模块和模块之间的距离,按照我的理解这里的模块应该就是对象,比如说border对象等等,padding是内容和模块之间的距离,希望我的理解能对大家有用
管理员回复:不全对,你可以参考下css手册,上边说的很清楚

出差旅游免费预订酒店

【视频教程】新手常见问题