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

WordPress:Styling Lists with CSS

來自站長(zhǎng)百科
Seadragon530（討論 | 貢獻(xiàn)）2008年4月16日 (三) 15:25的版本
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索

When presenting lists of things, WordPress:WordPress uses standard XHTML elements:

  • <ol> for an Ordered List (where the order of items is important, so items are numbered)
  • <ul> for an Unordered List (normally shown as items with bullets)
  • <li> for each item in a list, ordered or unordered.

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

  • <ol> for an Ordered List (where the order of items is important, so items are numbered)
  • <ul> for an Unordered List (normally shown as items with bullets)
  • <li> for each item in a list, ordered or unordered.

By default, most lists (and some list items) in WordPress are identified by id or class attributes, making styling lists easy. With fairly simple changes to the style.css file, you can display the list horizontally instead of vertically, feature dynamic menu highlighting, [[WordPress:#Styling_the_Bullet|change the bullet]] or numbering style, remove the bullets altogether, or any combination of these.

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

WordPress 1.5 Nested Lists Layout

With the innovation of Themes in WordPress v1.5, different themes format lists in different ways. The most common lists users often want to modify in WordPress are the sidebar menu lists. Since many sidebars feature nested lists, let's look at those in more depth.

WordPress 1.5 嵌套列表設(shè)計(jì)

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

Begin by examining the style.css file found within the Theme's folder you are using. Most WordPress Themes label their sidebar menu section with the words sidebar, menu, or a combination of both. So, look for the sidebar Template file, typically called sidebar.php. This is a sample sidebar.php layout; your version may be different, but the concept will be the same.

從檢查你使用的主題文件夾中找到的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>

When you are working with nested lists and you want an individual style for each list, you have to recreate the "nest" in the stylesheet (style.css).

當(dāng)你使用嵌套列表并想要每個(gè)列表都有自己的樣式的時(shí)候，你必須在樣式表(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
The first style (#sidebar ul) sets the look for the overall list. It usually contains the margins and padding styles and may contain the font-family, color, and other details for the overall list.
li
The #sidebar li assigns a style to the actual list item. Here you can set the format to include a bullet or not. You can also change the font, font-size, or color, and you can even add borders.
ul li
The #sidebar ul li determines the style of the first nested list. Each first level nested list will be customized here, but you can style each of these sub-lists differently if they are contained within a specific CSS ID. In the above example, after the #search section, the first nested list is #pagenav. If you use WordPress:Pages this is where the list of WordPress:Pages would be generated. Since WordPress:Pages work outside of The WordPress Loop, and often highlight specific information like "About Us", "Contact", and "Site Map", you may want to design the WordPress:Pages style differently than the rest of your lists by putting the specific information about the look of the WordPress:Pages in the #pagenav.
ul ul li
The #sidebar ul ul li applies style to the links within the #sidebar ul ul to help customize the look of this list. Again, if you have customized the #pagenav list, it will be different from the rest of your nested list items.
ul ul ul li
The #sidebar ul ul ul li is the style for the sub-sub-list. If you have a list of categories with subcategories, the category title will be the first level of the list, the categories would be the second level of the list, and any subcategories would be the third level, or sub-sub-list, such as the example below. Some designers like having the third level list feature a smaller font, a different bullet, or even a different color to highlight them from the list items above them:
  • Category Title
    • Category One
    • Category Two
      • Sub-Category One
      • Sub-Category Two
    • Category Three
ul
第一個(gè)樣式(#sidebar ul)設(shè)置整體列表的外觀. 通常包含整個(gè)列表的頁邊空白和填充樣式，也可能包含字體庫(kù)，顏色和別的內(nèi)容。
li
#sidebar li 分配樣式給現(xiàn)有的列表項(xiàng)目. 這里你可以設(shè)置是否包含bullet 符號(hào)，你也可以改變字體，自號(hào)，或者顏色，你還可以加入邊線.
ul li
#sidebar ul li確定第一個(gè)嵌套類表的樣式. 每個(gè)第一級(jí)嵌套列表都在這里制定,但是如果它們有詳細(xì)的CSSID的話，你可以設(shè)計(jì)每個(gè)嵌套的子列表。上述例子中，#search 部分之后, 第一級(jí)嵌套列表是#pagenav. 如果你使用頁面，這里是頁面的列表生成的地方。因?yàn)?頁面工作在WordPress循環(huán)之外, 并且通常高亮顯示特殊的信息比如"About Us", "Contact", and "Site Map", 你可能想通過把關(guān)于WordPress:Pages外觀特殊信息輸入#pagenav來設(shè)計(jì)頁面，使它的樣式與列表的其他部分不同.
ul ul li
#sidebar ul ul li在#sidebar ul ul中提供了連接的樣式 以幫助定義列表的外觀。另外，如果你已經(jīng)定義了#pagenav列表，將會(huì)和你剩下的的嵌套列表不同。
ul ul ul li
#sidebar ul ul ul li是二級(jí)子表的樣式。如果你有一個(gè)帶有子類的分類列表，分類 標(biāo)題將是列表的第一級(jí)，分類是第二級(jí)，而任何子類將是第三級(jí)，或者是子表，如下面的例子。一些設(shè)計(jì)者喜歡在第三級(jí)使用一些較小的字體，不同的符號(hào)，或者不同的顏色，高亮顯示，以區(qū)別它們上一層的項(xiàng)目：
  • Category Title
    • Category One
    • Category Two
      • Sub-Category One
      • Sub-Category Two
    • Category Three


Styling Specific List Items

Do you want your Categories List to look different from your Archives List? Then open up the index.php or sidebar.php and carefully add the following style references to the appropriate list item:

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

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

設(shè)計(jì)特定列表項(xiàng)目

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

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

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

To customize the Categories and Archives list, add the following to your stylesheet to customize these individually: 

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

Go through any other sections of your list and give them a style reference name and add them to your style sheet. When you've identified which part of the list controls which aspect of the list, it's time to start changing the look of the list.

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

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

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

Styling individual items

If you want to use image replacement techniques to style your list, each LI tag will need its own class or ID. Try the Classy wp_list_pages plugin.

設(shè)計(jì)個(gè)別項(xiàng)目

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

Styling Your Lists

An important part of a list is the bullet - an eye catching dot, spot, or graphic that tells viewers "this is a list". The style of bullet or numbering for a list is determined by a list-style-type property in the style sheet. The default value is disc. Other basic values are circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, and none. Let's change the default value to something else, like a square. 

#sidebar li {
   list-style: square;
}

設(shè)計(jì)列表

列表的一個(gè)重要部分就是著重號(hào) – 一個(gè)吸引訪問者眼球的點(diǎn)或者圖片，告訴他們"這是個(gè)列表"。一個(gè)列表中的符號(hào)或者數(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;
}

Instead of typing list-style-type, you see a shorthand form of list-style, and instead of using the default disc, the list now features small squares.

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

But not all lists need bullets. By their overall layout, you just know a list is a list. To eliminate the bullet, change the stylesheet to this: 

#sidebar li {
   list-style: none;
}

Now, anything tagged with <li>, within the DIV of the ID of #sidebar, would have no bullet. Experiment with different values to see the results you can achieve.

HINT: In terms of accessibility, an ordered list is easier to navigate than an unordered list.

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

#sidebar li {
   list-style: none;
}

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

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

Using a Custom Image Instead of a Bullet

Tired of boring bullets? Let's get rid of the boring with a few CSS techniques. In this case, use list-style-image to instruct the browser to use your bullet image instead of the old boring default bullets.

使用圖片代替著重號(hào)

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

Find some interesting bullet graphics and add the following code in your style sheet to add some jazzy bullets to your lists: 

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

Note that you could also use an absolute link rather than a relative link. Simply change the url(/wp-images/image.gif ) to url(http://example.com/wp-images/image.gif).

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

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

注意你也可以使用絕對(duì)連接而不是相關(guān)連接。簡(jiǎ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)題之后的下劃線，你可以簡(jiǎn)單的加入一個(gè)邊框樣式到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; ....}

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

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

And your end result would look like this:

Category Title
Category One

Category Two

Category Three

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

Category Title
Category One

Category Two

Category Three

Or really expand the possiblities to something like this:

Category Title
Category One

Category Two

Category Three

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

Category Title
Category One

Category Two

Category Three

You can have a lot of fun with your list bullets and list layouts. If you are having trouble with your bullets and lists, check out the resources listed below and then visit the WordPress support forums to get more help.

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

Troubleshooting Nested Lists

If you are having trouble with your nested lists, the following might provide the solution. Also check WordPress:CSS Troubleshooting for more styling help issues.

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

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

Improper Tag Structure

The number one cause for errors or non-validation within a nested list is the lack of proper list structure. Here is a very simplified and correct nested list layout. Note that when a new list begins (nested), the </li> at the end of the last list item is not closed. It is left open until the new nested list is completed, and then closed.

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

導(dǎo)致嵌套列表中的錯(cuò)誤或者是non-validation的首要原因就是缺少合適的列表結(jié)構(gòu)。這里是一個(gè)很簡(jiǎn)單的正確的嵌套列表設(shè)計(jì)。注意當(dāng)一個(gè)新的列表形成(嵌套)的時(shí)候，最后一個(gè)列表項(xià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

Template Tag Lists

Different WordPress:Template Tags used within lists have different ways of using and relying upon list tags. Some tags automatically include the UL and LI so all you have to do is include the tag in the list by itself and it will do all the work. Other tags require the UL to be in place followed by the template tag and it generates its own LI tags. Other template tags require designating which type of list tags are needed or use none at all if not listed in the tag's parameters.

模板標(biāo)簽列表

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

If you are having trouble with your nested lists when using template tags like wp_list_cats or wp_list_pages, check their paramaters to see how they use the list tags and compare it with your usage.

如果你在使用模板標(biāo)簽時(shí)，如wp_list_cats or wp_list_pages，對(duì)你的嵌套列表產(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)的原因之一。子列表項(xiàng)的樣式受它的"父"列表的影響。如果父級(jí)的列表樣式使用了"紅色"，而你想讓子列表使用"蘭色"，那么你需要在子列表樣式中進(jìn)行設(shè)置，這樣它們才會(huì)不受父列表的影響。

Nested lists within the WordPress Sidebar typically contain links. Therefore, while you can style the list as much as you want, the style for links will override the list style. You can control the way the links in the list work by giving them a specific style class of their own, including their hover attributes: 

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

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

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

Resources

資源