[譯]HTML&CSS Lesson8: 列表

時間 2019-11-08

標籤 html&css html css lesson8 lesson 列表欄目 CSS 简体版

原文原文鏈接

列表清單是咱們平常生活的一部分。未辦事項清單確認咱們接下來要作什麼，行車導航提供路線列表，食譜提供成分列表和說明列表。幾乎全部的東西都有列表，這就很容易理解爲何它們在網上這麼受歡迎。css

若咱們想在網站上建立列表，HTML提供了三種類型的列表：
無序列表、有序列表和描述列表。選擇哪一種列表——或者是否使用列表——歸結於要顯示的內容以及語義上最符合當前內容的標籤選項。html

除了HTML中提供了三種不一樣的列表，咱們還能夠在CSS中用多種方法實現這些列表。例如咱們能夠選擇在列表中使用哪一種列表項標記。這個標記能夠是方形、圓形、數字、字母或者將它隱藏。另外，咱們還能夠設置列表是縱向展現或橫向展現。全部這些選擇在頁面渲染中都扮演着重要的角色。segmentfault

無序列表

無序列表就是一個內容相關但順序可有可無的列表。用HTML建立無序列表，使用無序列表塊狀元素<ul>，無序列表中的每一項都單獨使用列表項元素<li>標記。瀏覽器

默認狀況下，大部分的瀏覽器都會爲<ul>元素添加縱向的margin和左邊的padding，爲<li>元素設置一個前置的圓點標記。這些標記被稱爲列表項標記，它能夠用CSS修改。ide

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

有序列表

有序列表元素<ol>與無序列表使用方式相同，列表項元素的建立也相同。它們的主要不一樣在於，對於有序列表來講，呈現列表項的順序很是重要。佈局

由於是有序的，因此列表項標記默認爲數字，爲非圓點。學習

<ol>
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

`start` 屬性

start屬性定義列表項標記的數字從哪一個值開始。默認狀況下數字從1開始。但有可能列表須要從30或其餘值開始。在<ol>元素上使用start屬性就能夠定義有序列表開始計數的值。優化

start屬性只接受整數值，即使有序列表可使用不一樣類型的數字編號，例如羅馬數字。網站

<ol start="30">
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

`reversed` 屬性

當咱們在<ol>元素上使用reversed屬性，表示列表倒序顯示。若一個有序列表有五個列表項1到5,將會按倒序5到1顯示。ui

reversed屬性是一個布爾值（true或者false），除此以外它不接受任何其餘值。false爲默認值；當值爲true時，<ol>元素的列表項將會按倒序顯示。

<ol reversed>
  <li>Head north on N Halsted St</li>
  <li>Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

`value`屬性

value屬性可使用在有序列表的<li>元素上，用以修改列表的標記值。使用了value值及其如下的全部列表項的數字標記將會按照value值從新計數。

例如，咱們在第二個列表項添加value值爲9，那麼這個列表項標記的數字顯示爲9，同時全部隨後的列表項標記都會從9之後開始計數。

<ol>
  <li>Head north on N Halsted St</li>
  <li value="9">Turn right on W Diversey Pkwy</li>
  <li>Turn left on N Orchard St</li>
</ol>

描述列表

線上還有一種描述列表（但它沒有像無序列表和有序列表那麼常見）。描述列表經常使用於列出多個術語和描述，例如術語表。

HTML建立描述列表使用描述列表元素<dl>。描述列表再也不須要<li>元素標記列表項，而是用另外兩個塊狀元素代替：列表項術語元素<dt>和描述元素<dd>。

描述列表可能包含了多個一對一的術語和描述。除此以外，也多是多個術語對應一個描述或者多個描述對應一個術語。一個術語可能有多種含義和解釋。相對的，一個描述也可能適用於多個術語。

當咱們添加描述時，須要注意<dt>元素須要定義在<dd>元素以前。定義的術語和描述需彼此對應；因此這些元素的順序很是重要。

默認狀況下，<dl>元素與<ul>和<ol>元素同樣，帶有縱向外邊距。此外，<dd>元素也有一個默認的左外邊距。

<dl>
  <dt>study</dt>
  <dd>The devotion of time and attention to acquiring knowledge on an academic subject, especially by means of books</dd>
  <dt>design</dt>
  <dd>A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made</dd>
  <dd>Purpose, planning, or intention that exists or is thought to exist behind an action, fact, or material object</dd>
  <dt>business</dt>
  <dt>work</dt>
  <dd>A person's regular occupation, profession, or trade</dd>
</dl>

列表嵌套

使列表極爲強大的一個特性是它們嵌套的能力。每一個列表均可以嵌套在另外一個列表裏；它們能夠連續地嵌套。但這種無限嵌套的功能並不合適隨意使用。列表仍是須要應用在最適合它們語義的地方。

嵌套列表的一個目的是便於識別列表的起始位置以及每一個列表和列表項。拿無序列表和有序列表來講，嵌套列表時，<ul>元素和<ol>元素的直接子元素是<li>元素。再重複一遍，<ul>元素和<ol>元素的直接子元素只能是<li>元素。

也就是說，在<li>元素內能夠添加任何標準的元素標籤，包括<ul>或<ol>元素。

若要在列表項中嵌套一個列表，須要新建列表。嵌套列表完成後，閉合包裹的列表項並繼續在原列表項中操做。

<ol>
  <li>Walk the dog</li>
  <li>Fold laundry</li>
  <li>
    Go to the grocery and buy:
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </li>
  <li>Mow the lawn</li>
  <li>Make dinner</li>
</ol>

由於嵌套列表有點複雜——若是寫錯樣式會錯亂—— 咱們來快速回顧一下。<ul>和<ol>元素只能包含<li>元素。<li>元素能夠包含任何普通的元素；但<li>元素自己只能是<ul>或<ol>元素的子元素。

值得注意的是，嵌套列表的項標記會根據嵌套的深度改變。在上面的例子中，無序列表在有序列表內以空心圓而非實心圓做爲項標記。這是由於無序列表是有序列表的一級嵌套列表。

幸運的是，咱們能夠控制任何級別的列表項標記，下面咱們來看看。

列表樣式

無序和有序列表都有默認的項標記，無序列表一般是實心圓，而有序列表是數字。項標記的樣式和定位均可以經過CSS來調整。

`list-style-type`屬性

list-style-type屬性用於設置項標記的內容。從正方形和十進制數一直到亞美尼亞編號都屬可用值範圍。這個樣式能夠寫在<ul>、<ol>或者<li>元素上

任何list-style-type屬性值均可以添加到無序或者有序列表中。這一功能，能夠在無序列表中使用數列項標記，在有序列表使用非數字項標記。

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

ul {
  list-style-type: square;
}

`list-style-type`屬性值

前面提到了list-style-type屬性有一些不一樣的值。這裏羅列出了這些值及其意義。

`list-style-type`值	備註
none	無標記
disc	實心圓
circle	空心圓
square	實心正方形
decimal	十進制數
decimal-leading-zero	初始值爲0的十進制數
lower-roman	小寫羅馬數字
upper-roman	大寫羅馬數字
lower-greek	小寫古希臘語
lower-alpha / lower-latin	小寫ASCII字母
upper-alpha / upper-latin	大寫ASCII字母
armenian	亞美尼亞語
georgian	傳統格魯吉亞編號

圖片項標記

咱們總會碰到list-style-type屬性值不夠使用的時候，這時候咱們就但願可以自定義項標記。達到此目的最經常使用方法是爲<li>元素設置背景圖。

移除默認的list-style-type屬性值，而後在<li>元素設置背景圖和內邊距。

詳細一點來講，就是將list-style-type屬性值設爲none就能夠移除項標記。使用background屬性定義一張背景圖，若有必要還能夠爲其設置定位和重複屬性。接下來設置一個左內邊距爲背景圖留出足夠空間。代碼以下所示：

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  background: url("arrow.png") 0 50% no-repeat;
  list-style-type: none;
  padding-left: 12px;
}

`list-style-position`屬性

默認狀況下項標記位於<li>元素左側，此時list-style-position屬性的值爲outside，表示元素全部內容都顯示在項標記右側。使用list-style-position屬性能夠將默認值outside改成inside或inherit。

屬性值outside表示項標記位於<li>元素左側，而且不容許元素內容在項標記下環繞顯示。屬性值inside（很是少見）使項標記顯示在<li>元素第一行，而且容許其餘內容在項標記下環繞顯示。

HTML

<ul>
  <li>Cupcakes...</li>
  <li>Sprinkles...</li>
</ul>

CSS

ul {
  list-style-position: inside;
}

簡寫列表樣式屬性

咱們以前介紹的列表樣式屬性list-style-type和list-style-position能夠簡寫成一個屬性值list-style。使用list-style屬性能夠一次性設置一個或多個列表樣式屬性。簡寫值的順序爲先設置list-style-type，後設置list-style-position

ul {
  list-style: circle inside;
}
ol {
  list-style: lower-roman;
}

橫向列表

偶爾咱們也想要展現橫向列表。也許咱們想將列表分紅多列，來構建一個導航列表，或者將一些列表項放在一行中。基於內容和所需佈局，有幾種不一樣的方法能夠將列表設置爲單行顯示，例如將<li>元素的display屬性設置爲inline或inline-block，或者爲元素設置浮動。

`display`屬性

將列表設置爲單行顯示最便捷快速的方法就是把<li>的display屬性設置爲inline或inline-block。設置後全部<li>元素會間隔一個空格，單行排列顯示。

若是不須要每一個<li>元素間的空格，能夠根據第五課定位所學，移除元素間的空格。

多半咱們都會用inline-block而非inline屬性值。inline-block屬性值容許咱們簡單快速地爲元素添加縱向外邊距和<li>元素間的距離，這些是inline屬性值不能作到的。

當咱們將display屬性值改成inline或inline-block，列表項標記，如圓點、數字或者其餘的樣式都會被移除。

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  display: inline-block;
  margin: 0 10px;
}

float屬性

修改display屬性值爲inline或inline-block確實很簡單快捷；可是這種方法移除了列表項標記。若是列表項標記是必須的，那麼爲<li>元素設置浮動比修改display屬性更合適。

將<li>元素的float屬性設置爲left，全部<li>元素都會水平無間隙的排列顯示。當咱們爲<li>元素設置浮動後，列表項標記默認顯示，並位於相鄰<li>元素上。爲避免列表項標記與<li>元素顯示重疊，須要添加橫向的margin或padding

HTML

<ul>
  <li>Orange</li>
  <li>Green</li>
  <li>Blue</li>
</ul>

CSS

li {
  float: left;
  margin: 0 20px;
}

爲任何元素設置浮動，都破壞了頁面的流佈局。因此咱們必需要記得清除浮動——最經常使用的是clearfix方法——使頁面回到正常的流佈局中。

導航列表示例

咱們經常使用無序列表開發導航菜單欄。這些菜單欄一般使用以上提到的兩種方法實現水平佈局。下面是一個將display屬性設置爲inline-block的無序列表實現的水平菜單欄示例。

HTML

<nav class="navigation">
  <ul>
    <li><a href="#">Profile</a></li><!--
    --><li><a href="#">Settings</a></li><!--
    --><li><a href="#">Notifications</a></li><!--
    --><li><a href="#">Logout</a></li>
  </ul>
</nav>

CSS

.navigation ul {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  background: #395870;
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, .3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}
.navigation a:hover {
  background: #314b60;
  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3);
}
.navigation li:first-child a {
  border-radius: 4px 0 0 4px;
}
.navigation li:last-child a {
  border-right: 0;
  border-radius: 0 4px 4px 0;
}

練習

如今咱們知道了如何使用HTML和CSS建立列表，咱們回到樣式討論會網站，看看如何使用列表。

目前咱們頁面中全部<header>和<footer>元素內的菜單欄都由超連接元素組成。咱們可使用無序列表使這些元素更有條理。
使用無序列表（<ul>元素）和列表項（<li>元素）優化咱們菜單欄的結構後，這些新的元素會使菜單欄縱向排列。
爲了使元素水平排列，咱們將<li>元素的display屬性值改成inline-block，但完成後<li>元素間會留有間隙。回想第五課定位的內容，咱們知道能夠經過在<li>元素的開始標籤和結束標籤之間添加註釋來消除空格。
完成後，<header>元素中的菜單欄代碼以下所示：

<nav class="nav primary-nav">
  <ul>
    <li><a href="index.html">Home</a></li><!--
    --><li><a href="speakers.html">Speakers</a></li><!--
    --><li><a href="schedule.html">Schedule</a></li><!--
    --><li><a href="venue.html">Venue</a></li><!--
    --><li><a href="register.html">Register</a></li>
  </ul>
</nav>

同理，<footer>元素中的菜單欄修改後代碼以下所示：

<nav class="nav">
  <ul>
    <li><a href="index.html">Home</a></li><!--
    --><li><a href="speakers.html">Speakers</a></li><!--
    --><li><a href="schedule.html">Schedule</a></li><!--
    --><li><a href="venue.html">Venue</a></li><!--
    --><li><a href="register.html">Register</a></li>
  </ul>
</nav>

別忘了在全部HTML文件中修改這部分代碼
寫好無序列表後，咱們須要清除列表項的一些樣式，並將其設置爲水平佈局。咱們可使用class nav來幫咱們完成。
咱們將全部class爲nav的元素內的<li>元素的display屬性設置爲inline-block，設置一些外邊距margin，並將垂直屬性vertical-align設置爲上對齊top。
除此以外，咱們使用僞類選擇器:last-child將最後一個<li>元素的右外邊距margin設爲0。這是爲了確保<li>元素與父元素間的水平間隙都被移除。
咱們在main.css文件的導航樣式下，添加咱們須要的樣式：

.nav li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
}
.nav li:last-child {
  margin-right: 0;
}

你也許很疑惑爲何無序列表沒有項標記或別的默認樣式。這是由於這些樣式都在咱們的樣式表中被重置了。若是去查看下重置的樣式，就會發現<ul>，<ol>，和<li>元素都設置了margin和padding爲0。<ul>和<ol>元素還設置了list-style爲none
咱們的菜單欄不是惟一使用列表的地方，咱們也將其應用到別的頁面中，例如Speakers頁面。下面讓咱們來給討論會添加演講者信息。
在speakers.html文件的引導區塊下，添加一個新的區塊用來展現咱們的演講者信息。咱們能夠複用一些現有的樣式，使用class屬性值爲row的<section>元素包裹演講者信息，能夠直接應用到白色背景和內邊距。在<section>元素中添加class屬性爲grid的<div>元素用以集中展現咱們的演講者信息
到此爲止，添加的HTML以下所示：

<section class="row">
  <div class="grid">

  </div>
</section>

在<div>元素中，每一個演講者的信息都有獨立的<secion>元素，元素內有兩列。第一列由<div>元素標記，佔用<section>元素2/3的空間，第二列由<aside>元素標記，佔用<section>元素剩餘的1/3空間，這裏的內容展現演講者一些次要的或特定的信息。
咱們可使用現有的class col-2-3和col-1-3來設置，完成後代碼以下所示：

<section id="shay-howe">

  <div class="col-2-3">
    ...
  </div><!--

  --><aside class="col-1-3">
    ...
  </aside>

</section>

這裏有一些須要注意的點。首先，每一個演講者的<section>元素都有獨立的id屬性，並用演講者的名字做爲屬性值。當咱們爲討論會建立日程表，這個id就會被看成錨點連接到演講者信息。
另外，<div>元素的結束標籤和<aside>元素的開始標籤以前添加了HTML註釋。由於這倆元素的display屬性值爲inline-block，咱們須要清除他們之間的間隙。
在佔有2/3空間的<div>元素中，咱們會使用標題和段落標籤，用來展現演講者的名字，演講內容的標題和摘要，以及一小段傳記。
以上內容的代碼以下所示：

<section id="shay-howe">

  <div class="col-2-3">

    <h2>Shay Howe</h2>
    <h5>Less Is More: How Constraints Cultivate Growth</h5>
    
    <p>By setting constraints, we force ourselves...</p>
    
    <h5>About Shay</h5>

    <p>As a designer and front-end developer, Shay...</p>
  
  </div><!--
  --><aside class="col-1-3">
    ...
  </aside>
</section>

在佔有1/3空間的<aside>元素中，咱們將添加一個class爲speaker-info的<div>元素。使用<div>元素是由於咱們很快會爲這個元素添加樣式。
在設置樣式以前，咱們先在這個<div>元素中添加一個無序列表，並在列表項中引用一些跟演講者相關的連接
目前爲止，這部分的HTML代碼以下所示：

<section id="shay-howe">

  <div class="col-2-3">

    <h2>Shay Howe</h2>
    <h5>Less Is More: How Constraints Cultivate Growth</h5>

    <p>By setting constraints, we force ourselves...</p>

    <h5>About Shay</h5>

    <p>As a designer and front-end developer, Shay...</p>

  </div><!--

  --><aside class="col-1-3">
    <div class="speaker-info">

      <ul>
        <li><a href="https://twitter.com/shayhowe">@shayhowe</a></li>
        <li><a href="http://learn.shayhowe.com/">learn.shayhowe.com</a></li>
      </ul>
    </div>
  </aside>
</section>

class爲speaker-info的<div>元素準備完成後，咱們爲它添加一些樣式。
首先咱們在main.css文件中分出一個新的Speakers區塊用來添加speakers頁面的樣式。再來咱們爲屬性值爲speaker-info的class添加1px的灰色實線外邊框和5px的圓角。
接下來，咱們添加屬性margin-top值爲88px，使元素定位在與演講描述第一段相同的垂直線上，再添加縱向padding爲22px給嵌套的無序列表提供空間
最後將此元素內的的文本設置爲居中
CSS 完成後代碼以下所示：

/*
  ========================================
  Speakers
  ========================================
*/
  
.speaker-info {
  border: 1px solid #dfe2e5;
  border-radius: 5px;
  margin-top: 88px;
  padding: 22px 0;
  text-align: center;
}

讓咱們花一分鐘時間回顧下爲何咱們要在這裏使用<div>元素並設置相關樣式
咱們在class爲col-1-3的<aside>元素中添加<div>元素是由於咱們咱們想繼承class col-1-3的padding值，使之在<div>元素的邊框外展現。以後還會在<div>元素內添加一張圖片放在無序列表旁邊。所以咱們建立了一個<div>元素而非把這些樣式直接應用在<ul>元素上。
隨着演講者愈來愈多，咱們須要確認它們之間的縱向間距相等。爲此咱們建立了一個class speaker，併爲其添加下外邊距margin-bottom爲44px，以下所示：

.speaker {
  margin-bottom: 44px;
}

咱們將這個class添加在每一個演講者的<section>元素上，除卻最後一個。咱們在最後一個演講者元素上省略它是由於咱們不但願在<footer>元素前生成沒必要要的邊距。多個演講者的佈局以下所示：

<section class="row">
  <div class="grid">

    <section class="speaker" id="chris-mills">

      <div class="col-2-3">
        ...
      </div><!--

      --><aside class="col-1-3">
        ...
      </aside>

    </section>
    
    <section id="shay-howe">
    
      <div class="col-2-3">
        ...
      </div><!--
    
      --><aside class="col-1-3">
        ...
      </aside>
    
    </section>
    
  </div>
</section>

此處留意下，第一個演講者 Chris Mills 的<section>元素添加了class屬性值speaker生成了縱向邊距，使之與做者 Shay Howe 的<section>元素分開。而最後一個演講者的<section>元素，仍是做者 Shay Howe 的，並無添加class屬性值speaker，使之與<footer>元素之間保持了合適的距離。

到此咱們的導航菜單已經完成，演講者speakers頁面也已成形。