網(wǎng)站制作必要的CSS列表樣式技巧
在標(biāo)記網(wǎng)站時(shí)，HTML中的某些元素適合許多情況，其中一個(gè)更有用的元素是HTML列表。使用列表，開發(fā)人員可以標(biāo)記橫向?qū)Ш?、下拉?dǎo)航、鏈接列表，甚至滾動(dòng)內(nèi)容面板（在JavaScript的幫助下）。這些特性可以幫助開發(fā)人員構(gòu)建新的站點(diǎn)和應(yīng)用程序，以及將新內(nèi)容集成到現(xiàn)有應(yīng)用程序中。

無序/有序列表
unorderd列表推薦用于項(xiàng)目列表，順序無關(guān)。無序列表（所有列表實(shí)際上）W3C阻止作者從單純的應(yīng)用列表縮進(jìn)文本的一種手段。這是一個(gè)文體問題，由樣式表妥善處理。

另一方面，當(dāng)列表元素的順序重要時(shí)，鼓勵(lì)使用有序列表，例如：烹飪菜譜或按轉(zhuǎn)身方向使用。對(duì)于本文中的示例，可以用OL代替UL或反之亦然。這個(gè)選擇取決于你的判斷力。

在它的最簡(jiǎn)單形式的有序列表、無序列表（簡(jiǎn)稱前進(jìn)，注意“列表”）將包含類似的標(biāo)記如下：

<!-- an unordered list example -->
<ul>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ul>

<!-- an ordered list example -->
<ol>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ol>

檢查列表的框模型揭示如下：

簡(jiǎn)言之，UL和OL都被認(rèn)為是塊級(jí)元素，它們的每一個(gè)子標(biāo)記都被認(rèn)為是塊級(jí)元素。因此，我們可以將邊距和填充應(yīng)用到所有四個(gè)方面的兩個(gè)項(xiàng)目中。關(guān)于UL（或OL的數(shù)字）的彈頭點(diǎn)，左邊距將同時(shí)將子彈/數(shù)字移動(dòng)到右邊和文本，同時(shí)填充，同時(shí)增加子彈/數(shù)字和內(nèi)容之間的空間。

樣式表的基本知識(shí)

將要使用的列表樣式化為一個(gè)列表，是一項(xiàng)相當(dāng)簡(jiǎn)單的任務(wù)。要用示例圖形圖標(biāo)替換OL中的子彈，您可以做如下操作：

HTML

<ul>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ul>

CSS

ul li{
    list-style:none; /* removes the default bullet */
    background: url(../images/icon-for-li.gif) no-repeat left center;
    /*adds a background image to the li*/
    padding-left: 10px
    /* this would be the width of the background image, plus a little more to space things out properly */
    }

按順序排列的列表的基本樣式同樣簡(jiǎn)單明了?？紤]下面的列表和CSS。

<ol>
    <li><a href="#">List Item One</li>
    <li><a href="#">List Item Two</li>
    <li><a href="#">List Item three</li>
    <li><a href="#">List Item Four</li>
    <li><a href="#">List Item Five</li>
&lt/ol>

CSS

使用CSS，我們將改變字體的字體來改變數(shù)字的字體，然后我們將針對(duì)我們的李的標(biāo)簽改變他們的字體，以便給他們。

與數(shù)字不同的視覺表示。

ol{
    font-family: Georgia, "Times New Roman", serif;
    color: #ccc;
    font-size: 16px;
}
ol li a{
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
}

更高級(jí)的列表使用

訪問圖像Tab Rollovers

雖然這是一篇較舊的文章，發(fā)表于2003，但其中包含的信息非常寶貴。對(duì)simplebits丹cedarholm解釋如何使用CSS的創(chuàng)建導(dǎo)航圖像，HTML和圖像。如果在它的絕對(duì)值得一讀，你沒有讀過這篇文章。下面的代碼是一個(gè)概括的版本，但丹提供的一個(gè)完整的解釋的代碼在自己的網(wǎng)站simplebits

CSS

<ul id="nav">
<li id="thome"><a href="#">Home</li>
<li id="tservices"><a href="#">Our Services</li>
<li id="tabout"><a href="#">About Us</li>
&lt/ul>

HTML

#nav {
margin: 0;
padding: 0;
height: 20px;
list-style: none;
display: inline;
overflow: hidden;
}

#nav li {
margin: 0;
padding: 0;
list-style: none;
display: inline;
}

#nav a {
float: left;
padding: 20px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:20px; /* for IE5/Win only */
}

#nav a:hover {
background-position: 0 -20px;
}

#nav a:active, #nav a.selected {
background-position: 0 -40px;
}

#thome a  {
width: 40px;
background: url(home.gif) top left no-repeat;
}
#tservices a  {
width: 40px;
background: url(services.gif) top left no-repeat;
}
#tabout a  {
width: 40px;
background: url(about.gif) top left no-repeat;
}

雖然上面的方法是很好的，如果你知道你的導(dǎo)航項(xiàng)將會(huì)是什么，它不會(huì)出現(xiàn)問題，如果你使用的內(nèi)容管理或博客系統(tǒng)，如WordPress，允許您創(chuàng)建和重命名頁面隨意。下面的技術(shù)已經(jīng)存在了一段時(shí)間，但同樣有用，如果不是比以前的技術(shù)有用的話。Douglas Bowman寫了一篇文章，題目是2003：CSS的滑動(dòng)門

這種技術(shù)使用兩個(gè)背景圖像，它們可以水平平鋪以包含一個(gè)長(zhǎng)頁面標(biāo)題或水平收縮以包含一個(gè)短頁面標(biāo)題。我們的HTML標(biāo)記與上面的技術(shù)非常相似。我們的主要變化將集中在我們?nèi)绾斡肅SS樣式表。

<div id="header">
<ul>
<li><a href="#">Home</li>
<li id="current"><a href="#">Services</li>
<li><a href="#">About Us</li>
</ul>    
</div>    

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif") repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}
#header li {
float:left;
background:url("left.gif") no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a {
float:left;
display:block;
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac */
#header a {float:none;}
/* End IE5-Mac hack */
#header a:hover {
color:#333;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
color:#333;
padding-bottom:5px;
}

內(nèi)容器

一個(gè)趨勢(shì)是越來越受歡迎的是內(nèi)容器或滑塊的概念。這些塊級(jí)元素循環(huán)（或是切換通過用戶交互）一組預(yù)定的內(nèi)容可以是任何網(wǎng)頁內(nèi)容。這是一個(gè)技術(shù)，保留完全的Flash，但隨著JavaScript庫，如jQuery，MooTools的到來，和原型現(xiàn)在可以做嚴(yán)格的HTML / JavaScript和CSS。我們的代碼下面是使用jQuery和jQuery插件叫做jCarousel Lite為例。

HTML

<button class="prev">Prev</button>
<button class="next">Next</button>
        
<div class="anyClass">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul>
</div>
    
    
  $(function() {
            $(".anyClass").jCarouselLite({
                btnNext: ".next",
                btnPrev: ".prev"
            });
        });
    
這種技術(shù)的例子可以在下面找到。注意不是所有下面的例子使用jCarousel Lite，但他們確實(shí)描繪了一個(gè)類似的技術(shù)效果。