WordPress:Styling Lists with CSS

當(dāng)顯示列表內(nèi)容時，WordPress使用標(biāo)準(zhǔn)的XHTML元素：

<ol> 為一個有序的列表 (每條的順序很重要，所以通常用數(shù)字表示)
<ul> 為一個無序的列表(通常情況下顯示bullets)
<li> 為一個列表中一條，可以有序也可以無序。

默認(rèn)情況下，WordPress中多數(shù)列表(和一些列表條目)通過id或者class屬性來識別，使樣式列表變的簡單。通過很小的style.css文件的改動，你可以水平顯示出列表而不是垂直顯示，設(shè)置動態(tài)高亮菜單，[[WordPress:#Styling_the_Bullet|改變 bullet符號]]或者給樣式編號，移除全部bullet符號，或者這些符號的組合。

WordPress 1.5 嵌套列表設(shè)計[ ]

通過WordPress v1.5中的主題創(chuàng)新，不同的主題格式列表有不同的方式。使用者通常想要修改的最多的列表就是邊欄目錄列表。因為很多邊欄有嵌套列表，讓我們更深入的研究一下

從檢查你使用的主題文件夾中找到的style.css文件開始，多數(shù)WordPress主題把邊欄菜單部分用sidebar或者menu標(biāo)示，或者是兩者的組合。這樣，尋找邊欄模板文件，尤其是sidebar.php。以下是sidebar.php文件的樣本，你的版本可能有所不同，但是思想概念是一樣的。

<div id="sidebar">
<ul>
  <li id="search"><form method="get" id="searchform"
      action="/wordpress/index.php">
    <div><input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" value="Search" />
    </div></form></li>
  <li id="pagenav"><h2>Pages</h2>
    <ul>
    <li class="page_item">
       <a 
	title="About Us">About Us</a></li>
    <li class="page_item">
       <a 
        title="Contact">Contact</a></li>
    <li class="page_item">
       <a 
        title="Site Map">Site Map</a></li>
	</ul></li>
  <li><h2>Archives</h2>
      <ul>
	<li><a 
	 title='February 2005'>February 2005</a></li>
	<li><a 
	 title='January 2005'>January 2005</a></li>
	<li><a 
	 title='December 2004'>December 2004</a></li>
	<li><a 
	 title='November 2004'>November 2004</a></li>
      </ul></li>
  <li><h2>Categories</h2>
     <ul>
	<li><a 
	 title="Stories of our life">Stories</a></li>
	<li><a 
	 title="Computer Tips">Computer Tips</a></li>
	<li><a 
	 title="WordPress Tips">WordPress Tips</a></li>
	<li><a 
	 title="Web Page Design Advice">Web Page Design</a></li>
     </ul></li>
  </ul>
</div>

當(dāng)你使用嵌套列表并想要每個列表都有自己的樣式的時候，你必須在樣式表(style.css)中重建"嵌套"。

#sidebar ul {attributes}
#sidebar li {attributes}
#sidebar ul li {attributes}
#sidebar ul ul li {attributes}
#sidebar ul ul ul li {attributes}
#pagenav {attributes}
#pagenav ul {attributes}
#pagenav ul li {attributes}

ul: 第一個樣式(#sidebar ul)設(shè)置整體列表的外觀. 通常包含整個列表的頁邊空白和填充樣式，也可能包含字體庫，顏色和別的內(nèi)容。
li: #sidebar li 分配樣式給現(xiàn)有的列表項目. 這里你可以設(shè)置是否包含bullet 符號，你也可以改變字體，字號，或者顏色，你還可以加入邊線.
ul li: #sidebar ul li確定第一個嵌套類表的樣式. 每個第一級嵌套列表都在這里制定,但是如果它們有詳細(xì)的CSSID的話，你可以設(shè)計每個嵌套的子列表。上述例子中，#search 部分之后, 第一級嵌套列表是#pagenav. 如果你使用頁面，這里是頁面的列表生成的地方。因為頁面工作在WordPress循環(huán)之外, 并且通常高亮顯示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通過把關(guān)于頁面外觀特殊信息輸入#pagenav來設(shè)計頁面，使它的樣式與列表的其他部分不同.
ul ul li: #sidebar ul ul li在#sidebar ul ul中提供了連接的樣式以幫助定義列表的外觀。另外，如果你已經(jīng)定義了#pagenav列表，將會和你剩下的的嵌套列表不同。
ul ul ul li: #sidebar ul ul ul li是二級子表的樣式。如果你有一個帶有子類的分類列表，分類標(biāo)題將是列表的第一級，分類是第二級，而任何子類將是第三級，或者是子表，如下面的例子。一些設(shè)計者喜歡在第三級使用一些較小的字體，不同的符號，或者不同的顏色，高亮顯示，以區(qū)別它們上一層的項目：

Category Title
- Category One
- Category Two
  - Sub-Category One
  - Sub-Category Two
- Category Three

設(shè)計特定列表項目[ ]

你想讓你的分類列表看起來與文檔列表不同嗎？打開index.php或者sidebar.php，仔細(xì)的加入如下樣式參數(shù)來更改列表項目：

<li id="categories"><h2>Categories</h2>.....

<li id="archives"><h2>Archives</h2>....

要想自定義分類和文檔列表，把下列代碼加入樣式表來單獨定義：

#categories {attributes}
#categories ul {attributes}
#categories ul li {attributes}
#archives {attributes}
#archives ul {attributes}
#archives ul li {attributes}

檢查列表的其它部分，給它們一個樣式參數(shù)名，把它們加入到你的樣式表。當(dāng)你能識別出列表的哪一部分控制列表的哪一方面時，就是改變列表外觀的時候了。

設(shè)計個人條目[ ]

如果你想使用圖片替換技巧設(shè)計你的列表，那么每個LI標(biāo)簽需要它自己的類別或者ID，你可以試試Classy wp_list_pages插件。

設(shè)計列表[ ]

列表的一個重要部分就是著重號 – 一個吸引訪問者眼球的點或者圖片，告訴他們"這是個列表"。一個列表中的符號或者數(shù)字的樣式由樣式表中的list-style-type property決定。默認(rèn)的值是disc。其它基本值是circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none。我們把默認(rèn)值改成別的東西如方塊。

#sidebar li {
   list-style: square;
}

不用輸入list-style-type，你可以使用速記形式list-style，而且代替了默認(rèn)的disc，列表現(xiàn)在使用的是小方塊了。

但是不是所有的列表都需要這種著重號，通過他們的整體規(guī)劃，你只需要知道列表是一個列表就夠了。要消除著重號，只需要把樣式表修改成這樣：

#sidebar li {
   list-style: none;
}

現(xiàn)在，任何帶有<li>的標(biāo)簽，#sidebar內(nèi)的ID的DIV標(biāo)簽內(nèi)，都不會在有著重號了。你可以嘗試其他不同的值來看看你可能得到什么樣的結(jié)果。

提示:根據(jù)易用性，整齊的列表要比不整齊的列表更容易瀏覽。

使用圖片代替著重號[ ]

厭倦了乏味的著重號嗎？讓我們用幾個CSS技巧來處理這乏味的東西。在這里，使用list-style-image來指示瀏覽器使用你的圖片代替乏味的默認(rèn)著重號。

找一些有趣的著重圖片然后把下面的代碼加入你的樣式表，來加入一些好看的著重號到你的列表中：

#sidebar ul {
 list-style-image: url(/wp-images/image.gif);
 }

注意你也可以使用絕對連接而不是相關(guān)連接。簡單的把url(/wp-images/image.gif )改為url(http://example.com/wp-images/image.gif)就可以了

Adding a Border to Your List[ ]

To add a border, like an underline, after your title, you can simply add a border style to the top of the ul under the title, rather than on the title itself.

#sidebar ul ul {...; border-top: solid 1px blue; ....}

給你的列表添加邊框[ ]

想添加邊框，如標(biāo)題之后的下劃線，你可以簡單的加入一個邊框樣式到ul的頂部，標(biāo)題下邊，而不是在標(biāo)題本身上添加。

#sidebar ul ul {...; border-top: solid 1px blue; ....}

Go a step further and add a whole box around your list with the title sitting atop it:

#sidebar ul ul {...; border: solid 1px blue; ....}

更深一步的添加一個帶有上方標(biāo)題的整個圍繞列表的方框：

#sidebar ul ul {...; border: solid 1px blue; ....}

Add a colored background to your list along with its new border:

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

給你的列表連同新的邊框一起添加彩色背景：

#sidebar ul ul {...; border-top: solid 1px blue;
     background:#CCFFFF; ....}

你的最終結(jié)果可能顯示如下：

Category Title

Category One

Category Two

Category Three

或者也可能擴(kuò)展成這樣：

Category Title

Category One

Category Two

Category Three

你可以從列表設(shè)計和著重號上找到很多樂趣。如果你有困難，查看下面列出的資源然后訪問WordPress 支持論壇獲得幫助。

發(fā)現(xiàn)并解決嵌套列表問題[ ]

如果你對你的嵌套列表有疑問，下面的內(nèi)容可能提供了一些解決方法。同樣查看CSS問題解決以獲得更多有關(guān)樣式的幫助。

不合適的標(biāo)簽結(jié)構(gòu)[ ]

導(dǎo)致嵌套列表中的錯誤或者是non-validation的首要原因就是缺少合適的列表結(jié)構(gòu)。這里是一個很簡單的正確的嵌套列表設(shè)計。注意當(dāng)一個新的列表形成(嵌套)的時候，最后一個列表項結(jié)束的地方</li>不是閉合的。它是開放的，直到新的嵌套列表完成，然后閉合。

<ul>
   <li>Category One</li>
   <li>Category Two     <----Note: No Closing List Tag
      <ul>
          <li>Sub-Category One</li>
          <li>Sub-Category Two     <----Note: No Closing List Tag
              <ul>
                 <li>Sub-Sub-Category One</li>
                 <li>Sub-Sub-Category Two</li>     <----Note: Closing List Tag
              </ul></li>           <----Note: Nested List Closed
           <li>Sub-Category Three</li>
      </ul></li>       <----Note: Nested List Closed
    <li>Category Three</li>
</ul>      <----Note: End of entire list

模板標(biāo)簽列表[ ]

列表中使用的不同的模板標(biāo)簽有不同的使用方法并且依賴于列表標(biāo)簽。一些標(biāo)簽自動包含UL 和 LI，這樣你所需要做的就是把標(biāo)簽放進(jìn)列表，它就會做好一切工作。一些標(biāo)簽需要通過模板標(biāo)簽把UL放在合適的，然后它會生成它自己的標(biāo)簽。一些標(biāo)簽要求指明，如果沒有在標(biāo)簽參數(shù)中列出的話，哪種列表標(biāo)簽形式是需要的或者完全不需要的，

如果你在使用模板標(biāo)簽時，如wp_list_cats or wp_list_pages，對你的嵌套列表產(chǎn)生了什么問題，查閱它們的參數(shù)，看看它們?nèi)绾问褂昧斜順?biāo)簽，與你的使用方法做做比較。

Parent/Child Relationships[ ]

Discussed in The CSS Parent and Child Relationship, lists are one of the big culprits. Styles in the child list items are influenced by its "parents". If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style

父/子關(guān)系[ ]

在 CSS 父和子的關(guān)系中討論過的，列表是很多故障出現(xiàn)的原因之一。子列表項的樣式受它的"父"列表的影響。如果父級的列表樣式使用了"紅色"，而你想讓子列表使用"蘭色"，那么你需要在子列表樣式中進(jìn)行設(shè)置，這樣它們才會不受父列表的影響。

WordPress邊欄中的嵌套列表通常包括連接。這樣，當(dāng)你設(shè)計你想要的列表時，連接的樣式將不受列表樣式影響。你可以通過給出一個特定的樣式，來控制列表中的連接的樣式，包括它們的屬性：

#sidebar a {attributes}
#sidebar a:hover {attributes}
#categories a {attributes}
#categories a:hover {attributes}
#archives a {attributes}
#archives a:hover {attributes}

資源[ ]

創(chuàng)建水平菜單
動態(tài)菜單高亮
定義邊欄
站點結(jié)構(gòu) 1.5
走進(jìn)模板標(biāo)簽
馴服列表
Listamatic
CSS 文本格式

初學(xué)者層疊樣式表交互指南:列表
Max Design的定義列表 - 誤用或誤解?
CSS Unleashed - 列表, 菜單, 表格和內(nèi)容以及更多的使用經(jīng)驗
Simplebits的嵌套列表設(shè)計

久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WIKI使用導(dǎo)航

站長百科導(dǎo)航

站長專題