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

無序/有序列表
unorderd列表推薦用于項目列表，順序無關。無序列表（所有列表實際上）W3C阻止作者從單純的應用列表縮進文本的一種手段。這是一個文體問題，由樣式表妥善處理。

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

在它的最簡單形式的有序列表、無序列表（簡稱前進，注意“列表”）將包含類似的標記如下：

<!-- 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>

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

簡言之，UL和OL都被認為是塊級元素，它們的每一個子標記都被認為是塊級元素。因此，我們可以將邊距和填充應用到所有四個方面的兩個項目中。關于UL（或OL的數(shù)字）的彈頭點，左邊距將同時將子彈/數(shù)字移動到右邊和文本，同時填充，同時增加子彈/數(shù)字和內容之間的空間。

樣式表的基本知識

將要使用的列表樣式化為一個列表，是一項相當簡單的任務。要用示例圖形圖標替換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 */
    }

按順序排列的列表的基本樣式同樣簡單明了。考慮下面的列表和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ù)字的字體，然后我們將針對我們的李的標簽改變他們的字體，以便給他們。

與數(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;
}

更高級的列表使用

訪問圖像Tab Rollovers

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

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

這種技術使用兩個背景圖像，它們可以水平平鋪以包含一個長頁面標題或水平收縮以包含一個短頁面標題。我們的HTML標記與上面的技術非常相似。我們的主要變化將集中在我們如何用CSS樣式表。

<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;
}

內容器

一個趨勢是越來越受歡迎的是內容器或滑塊的概念。這些塊級元素循環(huán)（或是切換通過用戶交互）一組預定的內容可以是任何網(wǎng)頁內容。這是一個技術，保留完全的Flash，但隨著JavaScript庫，如jQuery，MooTools的到來，和原型現(xià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"
            });
        });
    
這種技術的例子可以在下面找到。注意不是所有下面的例子使用jCarousel Lite，但他們確實描繪了一個類似的技術效果。