大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS中怎么实现一个纵向导航菜单

CSS中怎么实现一个纵向导航菜单,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

新北网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、成都响应式网站建设公司等网站项目制作,到程序开发,运营维护。创新互联公司从2013年开始到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

CSS纵向导航菜单实现

CSS中怎么实现一个纵向导航菜单

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

 

CSS

 

css入门

 

css进阶

 

css高级

 

webUI

 

理论知识

 

实战应用

 

高级技巧

 

DOM

 

DOM入门

 

DOM应用

 

DOM与浏览器

 

XHTML

 

参考手册

 

交流论坛

 

从以上可以看出,这次的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上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。

完整代码如下:

    CSS纵向导航菜单     

CSS

 

css入门

 

css进阶

 

css高级

 

webUI

 

理论知识

 

实战应用

 

高级技巧

 

DOM

 

DOM入门

 

DOM应用

 

DOM与浏览器

 

XHTML

 

参考手册

 

交流论坛

 
  

关于CSS中怎么实现一个纵向导航菜单问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


分享文章:CSS中怎么实现一个纵向导航菜单
网站URL:http://dzwzjz.com/article/jsjdhe.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP