為列表添加定制的項(xiàng)目符號

　　可使用list-style-image屬性：缺點(diǎn)是對項(xiàng)目符號圖像的位置的控制能力不強(qiáng)。

　　常用的方法：使用list-style-type來關(guān)閉項(xiàng)目符號，將定制的項(xiàng)目符號作為背景添加在列表元素上，使用背景圖像的定位屬性精準(zhǔn)的控制自定義項(xiàng)目符號的對準(zhǔn)方式。

• • • 在列表項(xiàng)左邊添加內(nèi)邊距，為符號留出所需的空間。
    • 將項(xiàng)目符號作為背景圖像應(yīng)用于列表項(xiàng)
    • 如果知道列表項(xiàng)的內(nèi)容不會跨越多行，可以將垂直位置設(shè)置為middle或50%，從而讓項(xiàng)目符號垂直居中。　

<ul><li>Read emails</li><li>Write chapter</li><li>Go shopping</li><li>Cook dinner</li><li>Watch Lost</li> </ul> <style type="text/css"> ul {margin: 0;padding: 0;width: 20em;list-style-type: none; //關(guān)閉項(xiàng)目符號 }li {background: url(img/tick.png) no-repeat 0 50%; //項(xiàng)目符號垂直居中padding-left: 30px; } </style>

得到的結(jié)果：?

創(chuàng)建基本的垂直導(dǎo)航條

<ul class="nav"><li class="selected"><a href="home.htm">Home</a></li><li><a href="about.htm">About</a></li><li><a href="services.htm">Our Services</a></li><li><a href="work.htm">Our Work</a></li><li><a href="news.htm">News</a></li><li class="last"><a href="contact.htm">Contact</a></li> </ul> <style type="text/css"> ul.nav {margin: 0; //外邊距設(shè)置為0padding: 0; //內(nèi)邊距設(shè)置為0width: 8em; //設(shè)置福列表的寬度，代碼更容易維護(hù)list-style-type: none; //去掉默認(rèn)的項(xiàng)目符號background-color: #8BD400; //設(shè)置淺綠色背景border: 1px solid #486B02; //設(shè)置深綠色的邊框border-bottom: none; }ul.nav li {display: inline; /* 在IE6上列表項(xiàng)下添加了額外的空間，所以需要在列表項(xiàng)上設(shè)置display為inline*/ }ul.nav a {display: block; //創(chuàng)建與按鈕相似的單擊區(qū)域color: #2B3F00; //設(shè)置鏈接文本的顏色text-decoration: none; //關(guān)閉下劃線border-top: 1px solid #E4FFD3; //為創(chuàng)建斜面效果，頂邊框設(shè)置比背景淺border-bottom: 1px solid #486B02;//為創(chuàng)建斜面效果，頂邊框設(shè)置比背景深background: url(img/arrow.gif) no-repeat 5% 50%; //列表項(xiàng)前面的圖標(biāo)，及位置padding: 0.3em 1em; }ul.nav a:hover, ul.nav a:focus, ul.nav .selected a {color: #E4FFD3;background-color: #6DA203; } </style>

?結(jié)果如下：

創(chuàng)建簡單的水平導(dǎo)航條

<ol class="pagination">//rel屬性表示結(jié)果集中的前一個(gè)和下一個(gè)頁面，規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系<li><a href="search.htm?page=1" rel="prev">Prev</a></li> <li><a href="search.htm?page=1">1</a></li><li class="selected">2</li><li><a href="search.htm?page=3">3</a></li><li><a href="search.htm?page=4">4</a></li><li><a href="search.htm?page=5">5</a></li><li><a href="search.htm?page=3" rel="next">Next</a></li> </ol> <style type="text/css"> body {font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;font-size: 1.4em;margin-top: 4em; }ol.pagination {margin: 0; //去掉外邊距padding: 0; //去掉內(nèi)邊距l(xiāng)ist-style-type: none; //去掉列表樣式 } //讓列表水平排列而不是垂直排列，可以將display屬性設(shè)置為inline，但是對于比較復(fù)雜的水平列表樣式，如果浮動列表項(xiàng)，然后使用外邊距把它們分開，會更靈活。 ol.pagination li {float: left; //向左浮動margin-right: 0.6em; //設(shè)置右外邊距 }ol.pagination a, ol.pagination li.selected { //對列表項(xiàng)應(yīng)用樣式display: block;padding: 0.2em 0.5em;border: 1px solid #ccc; //設(shè)置邊框text-decoration: none; //去掉下劃線 }ol.pagination a:hover, ol.pagination a:focus, ol.pagination li.selected { //當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，應(yīng)用不同樣式background-color: blue; color: white; }ol.pagination a[rel="prev"], //對于prev和next鏈接應(yīng)用不同的樣式 ol.pagination a[rel="next"] {border: none; //去掉邊框 }ol.pagination a[rel="prev"]:before { //在列表的前面加箭頭content: "\00AB"; //“00AB”添加雙左箭頭padding-right: 0.5em; }ol.pagination a[rel="next"]:after { //在列表的后面加箭頭content: "\00BB"; “00BB”添加雙右箭頭padding-left: 0.5em; } </style> 讓列表水平排列而不是垂直排列，可以將display屬性設(shè)置為inline，但是對于比較復(fù)雜的水平列表樣式，如果浮動列表項(xiàng)，然后使用外邊距把它們分開，會更靈活。

創(chuàng)建圖形化導(dǎo)航條（水平）

<ul class="nav"><li class="first"><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">News</a></li><li><a href="#">Products</a></li><li><a href="#">Services</a></li><li><a href="#">Clients</a></li><li><a href="#">Case Studies</a></li> </ul> <style type="text/css"> body {font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background-color: #fff; }ul.nav {margin: 0;padding: 0;overflow: hidden; //清理li浮動造成的父元素高度為0width: 74em; //設(shè)置整個(gè)導(dǎo)航條的寬度background: #FAA819 url(img/mainNavBg.gif) repeat-x; //以重復(fù)的橘紅色漸變作為背景l(fā)ist-style: none;text-transform: uppercase; //讓鏈接全部大寫 }ul.nav li {float: left; //利用浮動讓列表垂直顯示white-space: nowrap; // 文本不會換行，文本會在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止。 }ul.nav a {display:block; //讓鏈接表現(xiàn)的像按鈕padding: 0 2.96em;line-height: 2.1em; //使用行高讓鏈接文本垂直居中background: url(img/divider.gif) repeat-y left top; //在鏈接之間創(chuàng)建分隔線，可以通過在列表項(xiàng)或錨上設(shè)置水平邊框。為簡單，在錨鏈接應(yīng)用一個(gè)背景圖像text-decoration: none; //關(guān)閉下劃線color: #fff; //鏈接顏色設(shè)置為白色 }ul.nav a:hover , ul.nav a:focus { //設(shè)置翻轉(zhuǎn)狀態(tài)color: #333; }ul.nav li:first-child a { //去掉第一個(gè)鏈接不必要的分割線background: none; } </style>

當(dāng)li元素浮動時(shí)，不再占據(jù)文檔流中的任何空間，所以，它的父元素實(shí)際上沒有內(nèi)容，它就會收縮，從而會隱藏列表背景，所以需要辦法讓父元素包含浮動的子元素，方法為3種清除浮動的方法?，最常用的是overflow:hidden技術(shù).

結(jié)果如下：

簡化的“滑動門”標(biāo)簽頁式導(dǎo)航

使用一個(gè)大圖像和一個(gè)側(cè)邊圖像創(chuàng)建標(biāo)簽頁，隨著標(biāo)簽頁中文本的擴(kuò)展，大圖像的更多部分露出來，較小的圖像留在左邊，蓋住大圖像的硬邊緣，下述實(shí)例中，大圖像為tab-right.gif，側(cè)邊圖像為tab-left.gif

tab-left.gif(應(yīng)用于錨鏈接)tab-right.gif（應(yīng)用于li）

<ul id="mainNav"><li class="first"><a href="#">Home</a></li><li><a href="about.htm">About</a></li><li><a href="news.htm">News</a></li><li><a href="products.htm">Products</a></li><li><a href="services.htm">Services</a></li><li><a href="clients.htm">Clients</a></li><li><a href="casestudies.htm">Case Studies</a></li> </ul> <style type="text/css"> body {font: 76%/1.8 "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;background-color: #fff; }ul {margin: 0;padding: 0;overflow: hidden; //清除li浮動width: 72em;list-style: none;text-transform: uppercase; }ul li {float: left; //向左浮動，以產(chǎn)生水平效果background: url(img/tab-right.gif) no-repeat top right; //應(yīng)用right背景圖像，形成標(biāo)簽頁的右邊緣 }li a {display: block; //讓錨顯示為塊級元素使得整個(gè)區(qū)域可單擊padding: 0 2em;line-height: 2.5em; //設(shè)置行高控制高度，寬度由內(nèi)容的寬度控制background: url(img/tab-left.gif) no-repeat top left; //應(yīng)用left背景，并向左對齊。 當(dāng)標(biāo)簽頁改變尺寸時(shí)，這個(gè)圖像總是對準(zhǔn)左邊，蓋在大圖上面，蓋住左邊的硬邊緣text-decoration: none;color: #fff;float: left; //確保這種技術(shù)在Mac上的IE 5.2中有效 }ul a:hover { //創(chuàng)建翻轉(zhuǎn)效果color: #333; } </style>

結(jié)果如下：

Sukerfish下拉菜單

<ul class="nav"><li><a href="/home/">Home</a></li><li><a href="/products/">Products</a><ul><li><a href="/products/silverback/">Silverback</a></li><li><a href="/products/fontdeck/">Font Deck</a></li></ul></li><li><a href="/services/">Services</a><ul><li><a href="/services/design/">Design</a></li><li><a href="/services/development/">Development</a></li><li><a href="/services/consultancy/">Consultancy</a> </li></ul></li><li><a href="/contact/">Contact Us</a></li> </ul> <style type="text/css"> body {font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;font-size: 1.4em;margin-top: 4em; }ul.nav, ul.nav ul { //給所有的（包括嵌套的）列表設(shè)置外邊距等等margin: 0;padding: 0;list-style-type: none;float: left; //清除li的浮動，其中的一個(gè)辦法是讓父元素也浮動border: 1px solid #486B02;background-color: #8BD400; }ul.nav li {float: left; //產(chǎn)生水平效果width: 8em; //設(shè)置寬度 }ul.nav li ul {width: 8em; //與列表的寬度相等position: absolute; left: -999em; //將嵌套的ul隱藏在屏幕左邊之外margin-left: -1px; }.nav li:hover ul { //添加鼠標(biāo)懸停偽選擇器left: auto; //使得下拉菜單的位置改回正常位置，這樣下拉菜單就會重新出現(xiàn) } /*把導(dǎo)航鏈接設(shè)置為塊級元素，修改列表外觀，設(shè)置背景顏色和斜面邊框*/ ul.nav a {display: block;color: #2B3F00;text-decoration: none;padding: 0.3em 1em;border-right: 1px solid #486B02;border-left: 1px solid #E4FFD3; }ul.nav li li a {border-top: 1px solid #E4FFD3;border-bottom: 1px solid #486B02; border-left: 0;border-right: 0; }ul.nav li:last-child a {border-right: 0;border-bottom: 0; }ul a:hover, ul a:focus {color: #E4FFD3;background-color: #6DA203; } </style>

結(jié)果如下：

?

轉(zhuǎn)載于:https://www.cnblogs.com/lmjZone/p/7741991.html

總結(jié)

以上是生活随笔為你收集整理的ch6 列表和导航条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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