CSS中如何实现一个纵向导航菜单

本篇内容介绍了“CSS中如何实现一个纵向导航菜单”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站建设、南谯网络推广、微信小程序开发、南谯网络营销、南谯企业策划、南谯品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供南谯建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

CSS纵向导航菜单实现

CSS中如何实现一个纵向导航菜单

如图所示的CSS纵向导航菜单效果，我们先看一下代码结构：

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

从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向导航系统，但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉，开拓更多的设计思想。

这一次采用的是div+h2+h3的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h2来作二级分类的标题，h3来做二级分类下面的细节内容。在XHTML的讲法意义中，h2,h3,h4这些标签本身就具有用于对文本进行层级划分的意义，直接使用h2,h3来表示层级关系，相对于在标签中加入id或class来做层级的标记更为简单和直观，在这里使用h2,h3来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计：

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

此实现CSS纵向导航菜单的CSS代码部分采用了简化写法，如果哪句意思看不懂，您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了，相信经过这样几次练习，这些代码您已经能完全看懂了，说明您离高手又近了一步了。

大家可能已经注意到了，#nav的边框本例中只设置了左右下和一像素，而没有上，而在h2的样式里设置了上部的上像素？这是为什么呢？因为h2的样式上部都有一条横线，如果nav上部再有一条横线的话成长两条了，结果显示出来就是两像素的高度了。

完整代码如下：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>CSS纵向导航菜单</title> <style> #nav{width:100px;border-color:#c5c6c4;  border-style:solid;border-width:0px1px1px1px;}  #navh2{margin:0px;padding:4px;font-size:12px;  font-weight:bold;font-family:Verdana;  border-top:1pxsolid#c5c6c4;background-color:#CCCCCC;}  #navh3{margin:0px;padding:4px;font-size:12px;  font-family:Verdana;font-weight:normal;}  #navh3a{color:#666666;text-decoration:none;}  #navh3a:hover{color:#999999;text-decoration:underline;}   </style> </head> <body> <dividdivid="nav"> <h2>CSS</h2> <h3><ahrefahref="#">css入门</a></h3> <h3><ahrefahref="#">css进阶</a></h3> <h3><ahrefahref="#">css高级</a></h3> <h2>webUI</h2> <h3><ahrefahref="#">理论知识</a></h3> <h3><ahrefahref="#">实战应用</a></h3> <h3><ahrefahref="#">高级技巧</a></h3> <h2>DOM</h2> <h3><ahrefahref="#">DOM入门</a></h3> <h3><ahrefahref="#">DOM应用</a></h3> <h3><ahrefahref="#">DOM与浏览器</a></h3> <h2>XHTML</h2> <h3><ahrefahref="#">参考手册</a></h3> <h3><ahrefahref="#">交流论坛</a></h3> </div> </body> </html>

“CSS中如何实现一个纵向导航菜单”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

分享题目：CSS中如何实现一个纵向导航菜单
网页地址：https://www.cdcxhl.com/article6/igiiig.html

成都网站建设公司_创新互联，为您提供网站建设、网站导航、软件开发、企业网站制作、电子商务、动态网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容