css纵向导航:如何用CSS制作纵向导航菜单？来源: 发布时间:星期四, 2009年2月12日 浏览:151次 评论:0
应用Web标准进行网页制作以后  我们通常用ul无序列表标签来构建菜单 我们以前讨论过很多横向菜单 制作在前面文章中我们讲述了 用“ul+li”及css制作韩国风格菜单 是 种纵向导航菜单我们今天来看另种纵向导航菜单我们不断整理总结经验、提高编码水平才能在实际操作中更加得心应手我们看下面 XHTML代码:<ul><span>www.52css.com</span> <li><a href=\"http://www.52css.com\" target=\"_blank\">Div+CSS教程</a></li> <li><a href=\"http://www.52css.com\" target=\"_blank\">CSS布局例子</a></li> <li><a href=\"http://www.52css.com\" target=\"_blank\">CSS在线手册</a></li> </ul> <ul><span>www.52css.com</span> <li><a href=\"http://www.52css.com\" target=\"_blank\">Div+CSS教程</a></li> <li><a href=\"http://www.52css.com\" target=\"_blank\">CSS布局例子</a></li> <li><a href=\"http://www.52css.com\" target=\"_blank\">CSS在线手册</a></li> </ul> 这是两个无序列表 每个列表中有 3个列表项即是导航菜单内容我们用CSS对此进行样式 定义让它按我们要求显示出来我们看下面CSS代码:*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, \"宋体\", Arial; list-style:none;} a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;} a:hover,a:active{color:#000;background-color: #ADC2F5;} a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; } ul{ background:#fff; width:150px; border:1px solid #06f; margin:0px 20px -1px 20px; padding:1px;} span{ display:block;background:#036; padding-left:13px; color:#fff; } 首先我们进行了全局定义；然后定义了链接了样式 请注意我们对a定义是设为块元素并设置了下边框线以及宽度等接着我们定义了无序列表UL样式请注意ul定位以及内边距最后我们定义了ul中span样式整个设置完成我们来看看下面 纵向导航菜单效果:=\"ubbbuttonrt\">[ 可先修改部分代码 再运行查看效果 ] 大家可以试着修改上面 代码并运行查看效果不断试验和研究才会进步更快:)0
相关文章读者评论发表评论 |
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
