CSS 菜单列表设计
这是一个速成的 CSS 教程, 将向您展示如何使用 CSS 线条属性或者背景图片创建一个菜单列表. 这个技巧会在 <li> 元素上定义 border-bottom 属性, 并使用绝对位置的将嵌套在里面的元素覆盖在线上. 这是非常灵活的, 你可以通过修改边线和背景图片轻易地更改设计. 如果浏览器的字体是可缩放的, 那么它会相当的好用.
演示页面: Demo: CSS Menu Design
原文链接: CSS: Menu List Design
1. HTML 代码
请看一下这里的 HTML 代码和图解, 这有助于你更好地理解后面的 CSS.
1 2 3 | <ul> <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li> </ul> |
2. CSS 代码
重点在这里.
- 为 <li> 元素添加
position:relative和应用border-bottom风格. - 使用
position:absolute和负数的bottom定位属性将下横线两端的元素下移并覆盖在线条上面. - 注意: 请使用相对于字体尺寸 (em) 去控制边距.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | .menu { width: 500px; list-style: none; margin: 0 0 2em; padding: 0; font: 150%/100% Arial, Helvetica, sans-serif; } .menu li { clear: both; margin: 0; padding: 0 0 1.8em 0; position: relative; border-bottom: dotted 2px #999; } .menu strong { background: #fff; padding: 0 10px 0 0; font-weight: normal; position: absolute; bottom: -.3em; left: 0; } .menu em { background: #fff; padding: 0 0 0 5px; font: 110%/100% Georgia, "Times New Roman", Times, serif; position: absolute; bottom: -.2em; right: 0; } .menu sup { font-size: 60%; color: #666; margin-left: 3px; } |
3. 变换线条风格
你可以简单地通过修改 CSS 和边距来变换 <li> 元素的风格.
1 2 3 4 | li { border-bottom: dashed 1px #000; padding: 0 0 2.3em 0; } |
4. 使用图片作为线条
你同样可以使用背景图片来实现菜单列表的线条.
1 2 3 | li { background: url(images/circle.gif) repeat-x left bottom; } |
5. IE6 版本
如果你还在使用满是 bug 的 IE6 浏览器, 你会发现布局不正常. 为了解决这个问题, 可以为 <li> 元素加入一些修复处理, 代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 | /* clearfix */ .menu li:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .menu li {display: inline-block;} /* Hides from IE-mac \*/ * html .menu li {height: 1%;} .menu li {display: block;} /* End hide from IE-mac */ |
声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: CSS 菜单列表设计


这等沙发还不坐上
看见沙发我就坐上了
板凳
为什么是em和px混合的用...而不是声明转换量后全部em呢?MG老师讲讲...
最后的CSS Hack似乎缺了,IE7,记得CSS Hack的顺序是 FF,IE7,IE6?
居然很前排,坐下慢慢看~
从头学习css中
說明的真是清楚
CSS努力學習中
good,CSS 刚好学完这部分,很巧妙的办法。
@ Maxter
This article is translated from another web page. And luckily, it's in English~
Mg12 had given the url at the end of this post.
Sample: http://webdesignerwall.com/demo/menu/menu-list.html
Original English issue: http://www.webdesignerwall.com/tutorials/css-menu-list-design/
先收藏了,等6月考完4级,好好学学CSS~
这个以前用过,不过除了绝对定位,我试了用margin也行。出去的部分在IE6下如果看不见,给IE6专门加个
不支持的position:fixed就行。
每次来都能看到MG12共享的好东西
关注iNove!
mg12兄,想请教下你的的分类Categories一行两列实现问题。
#sidebar .widget_archive li {
width:110px;
float:left;
}
我用了上面CSS之后,那条分隔线放的位置就乱了,会跟文字重叠在一起,得如何处理?帮忙解决下。
这真热闹... = =#
CSS的确是越来越精细了,不过就是有些太麻烦啦
不会CSS的,过来学习一下了
太感謝了。我最近正好想學這個呢。
学习咯
我刚接触wp没多久,也许这个问题很弱..不过还是想知道博主文章后如此格式的Related Posts,是通过什么插件实现的呢!
@苏洋
这是翻译过来的, 每人的做法都不一样.
@Jutoy
6月21日是吧?... 加油!
@huahua
请在 widget_category 的下方再加上 <div class="fixed"><div>
@bruce
http://fairyfish.net/2007/09/12/wordpress-23-related-posts-plugin/
@joel
囧~
您好
我想问下您的首页的Recent Comments头像显示功能是怎么实现的
我试用了您的主题,但是没有显示评论者的头像
谢谢~
用图片做好像简单一点,纯css比较难兼容各种浏览器
好好学习,天天向上。
@园子
那个是插件WP-RecentComments,详细见mg12的插件介绍,http://www.neoease.com/plugins/
我使用了"Thread Twitter".但我的博客页面怎么不显示twitter的信息呢?这是为何?而"Protect my updates "我是关着的.地址:http://www.6ird.com/index.php/twitter
http://www.webdesignerwall.com/wp-content/uploads/2009/01/code-explain.gif
这个图图出不来的了...
css 着实麻烦, 12,评论框用ajax提交的 是用插件实现的吗? 可否分享一下
@Gorden
Quick Comments 插件, 我的博客介绍过的, 你可以搜索一下.
不错,学习ing~~~~
板凳
IE 6 hack还不怎么会呢,学习一下。。。
你好,请问,我设置好了LINKS页面
但是我想像你这样,http://www.neoease.com/links/
分类名称排列的,要如何设置?
@shine
我也有同样的问题,但是经过修改links.php文件解决了
非常感谢Sunts 我修改好了,
說明的真是清楚
不错的方法。很好的技巧。
万恶的IE6,深痛欲绝