九乡新闻网青岛啤酒扎啤:CSS目录菜单设计 CSS: Menu List Design
来源：百度文库 编辑：九乡新闻网 时间：2024/04/27 22:33:54
CSS: Menu List Design
This is a quick CSS tutorial to show you how to create a menulist using either the CSS border style or a background image. The trickis to apply a bottom border to the element, thenuse the absolute position property to shift the nested elements down tocover the border. It is very flexible — you can easily change thelayout by altering the border or background image. It even works whenthe browser's font size is being scaled (increased or decreased).
View Demo Menu Design
1. HTML Code
Take a look at the HTML code and the diagram. They will help you understand how the CSS work.
- CSS Design 25095
2. CSS Code
The key points are:
- Specify the
element toposition:relativeand apply a bottom border style. - Use
position:absolutewith negativebottomvalue to shift theandelement below the border. - Remember: use relative value (em) to control the padding space.
.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. Change Border Style
You can easily change the style by editing the CSS border and padding for the element.
li {border-bottom: dashed 1px #000;padding: 0 0 2.3em 0;}4. Use Image as Border (see final demos)
You can also use a background image.
li {background: url(images/circle.gif) repeat-x left bottom;}5. IE6 Version (see IE6 demo)
If you are still using the old and buggie IE6 browser, you may noticethe layout doesn't render properly. To fix the issue, simply add the clearfix trick to the element.
/* 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 */