這個(gè)技巧非常靈活,你可以輕松的改變邊框和背景的布局.它甚至可以讓瀏覽器的字體逐漸變小(也可以增大).

1.認(rèn)真的查看下面的html代碼,并配合下面的示圖,可以讓你更加清楚這些代碼的作用.

復(fù)制代碼代碼如下:

• CSS Design 250⁹⁵

2.給

postion:relative 并添加一個(gè)底邊框樣式.

給 設(shè) position:absolute 并使用負(fù)值讓它們位于邊框之下.

注:使用相對值來控制padding的空間.

復(fù)制代碼代碼如下:

.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.現(xiàn)在來設(shè)置

的CSS樣式

復(fù)制代碼代碼如下:

li {

border-bottom: dashed 1px #000;

padding: 0 0 2.3em 0;

4.也可以使用背景圖片來做邊界(見后面的演示)

復(fù)制代碼代碼如下:

li {

background: url(images/circle.gif) repeat-x left bottom;

}

5.如果你仍在使用IE6以下版本或者buggier IE6,你可能會(huì)注意到布局顯示不正常,要解決這個(gè)問題,只要添加clearfix 給

元素.

復(fù)制代碼代碼如下:

/* 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 */

源碼下載

總結(jié)

以上是生活随笔為你收集整理的html设置列表菜单,css 列表菜单的设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。