《
CSS 入门教程 纵向导航菜单》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302331P2013.htm
如图所示的后果，咱们先看一下代码构造：
从以上可以看出，这次的XHTML部门的代码横向代码略有不同，我们没有持续应用ul和li标签，实在继承使用ul元素也能完好的实现纵向导航体系，然而在这景致点我们盼望更多的供给不同道路来展示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中翻开抉择编纂款式表即可查看详细是哪一项了，信任经由这样几回训练，这些代码您已经能完整看懂了，阐明您离高手又近了一步了。
纵向导航菜单也是网站应用中的一种主要形式，所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航情势。先看一下效果吧！
Tag：导航 菜单 纵向 教程 入门 导航 菜单 纵向 教程 入门
大家可能已经留神到了，#nav的边框本例中只设置了左右下跟一像素,css sprites适用范围和css sprites的利弊，而不上，而在h1的样式里设置了上部的上像素？这是为什么呢？由于h1的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，成果显示出来就是两像素的高度了。
<div id="nav">
<h1>CSS</h1>
<h2><a href="#">css入门</a></h2>
,CSS Sprites技术及图片优化; ,CSS Sprites技术以及图片优化; <h2><a href="#">css进阶</a></h2>
<h2><a href="#">css高等</a></h2>
<h1>webUI</h1>
<h2><a href="#",CSS Sprites技术;>实践常识</a></h2>
<h2><a href="#">实战运用</a></h2>
<h2><a href="#">高级技能</a></h2>
<h1>DOM</h1>
<h2><a href=",CSS Sprites图片合并技术减少请求优缺点;#">DOM入门</a></h2>
<h2><a href="#">DOM利用</a><,css reset重置基础代码;/h2>
<h2><a href="#">DOM与阅读器</a></h2>
<h1>XHTML</h1>
<h2><a href="#">参考手册</a></h2>
,CSS position属性定位总结; <h2><,CSS opacity-实现图片半透明效果;a href="#">,CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案;交换论坛</a></h2>
</div>
这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的题目，h2来做二级分类下面的细节内容。在XHTML的讲法意思中，h1,h2,h3这些标签自身就存在用于对文本进行层级划分的意义，直接使用h1,h2来表现层级关联，相对在标签中参加id或class来做层级的标志更为简略和直观，在这里使用h1,h2来标记不同级别的分类名称也切实是再适合不外了,CSS Hack和向后兼容的常见问题。我们来看一看css代码的设计：
--> [
网站建设之]CSS 入门教程:纵向导航菜单
(责任编辑：网站建设)
CSS 入门教程 纵向导航菜单相关文章