css 列表菜單的設(shè)計(jì)
發(fā)布時(shí)間：2009-11-30 17:17:23 作者：佚名 
我要評論
我要評論這是一個(gè)很簡單的教程,主要教你怎么用list的邊框樣式和背景圖像來創(chuàng)建一個(gè)菜單出來.技巧在于使用list的相對定位,來轉(zhuǎn)移邊框的位置.
這個(gè)技巧非常靈活,你可以輕松的改變邊框和背景的布局.它甚至可以讓瀏覽器的字體逐漸變小(也可以增大).
1.認(rèn)真的查看下面的html代碼,并配合下面的示圖,可以讓你更加清楚這些代碼的作用.
<ul>
<li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>
2.給<li> postion:relative 并添加一個(gè)底邊框樣式.
給<strong><em> 設(shè) position:absolute 并使用負(fù)值讓它們位于邊框之下.
注:使用相對值來控制padding的空間.
.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è)置<li>的CSS樣式
li {
border-bottom: dashed 1px #000;
padding: 0 0 2.3em 0;
4.也可以使用背景圖片來做邊界(見后面的演示)
li {
background: url(images/circle.gif) repeat-x left bottom;
}
5.如果你仍在使用IE6以下版本或者buggier IE6,你可能會注意到布局顯示不正常,要解決這個(gè)問題,只要添加clearfix 給<li>元素.
/* 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 */
源碼下載
1.認(rèn)真的查看下面的html代碼,并配合下面的示圖,可以讓你更加清楚這些代碼的作用.
復(fù)制代碼
代碼如下:<ul>
<li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
</ul>
2.給<li> postion:relative 并添加一個(gè)底邊框樣式.
給<strong><em> 設(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è)置<li>的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,你可能會注意到布局顯示不正常,要解決這個(gè)問題,只要添加clearfix 給<li>元素.
復(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 */
源碼下載
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng)，可以同時(shí)控制行和列，相比 Flex（一維布局），更適合用在整體頁面布局或復(fù)雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個(gè)非常基礎(chǔ)且重要的屬性，它們用于控制元素周圍的空白區(qū)域，本文將詳細(xì)介紹 padding 和 margin 的概念、區(qū)別以及如何在實(shí)際項(xiàng)目中使用它們2025-04-07- will-change 是一個(gè) CSS 屬性，用于告訴瀏覽器某個(gè)元素在未來可能會發(fā)生哪些變化，本文給大家介紹CSS will-change 屬性詳解，感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中，去除a標(biāo)簽（超鏈接）的下劃線的幾種方法，本文給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2025-04-07
在前端開發(fā)中，CSS（層疊樣式表）不僅是用來控制網(wǎng)頁的外觀和布局，更是實(shí)現(xiàn)復(fù)雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展，CSS的用法也日益豐富和高級,本文將2025-04-07css中的 vertical-align與line-height作用詳解
文章詳細(xì)介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案，感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性（如relative、absolute、fixed或sticky），本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細(xì)介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標(biāo)懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標(biāo)懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實(shí)現(xiàn)了提示內(nèi)容的隱藏和顯示，感興趣的朋友一起2025-03-10
前端 CSS 動態(tài)設(shè)置樣式：:class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法：對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式；通過數(shù)組語法,可以同時(shí)綁定多個(gè)類名或樣式,此外2025-02-26
