HTML&CSS基礎學習筆記14—有序列表及列表嵌套

我們上篇講到了無序列表,那麼今天就來看看有序列表和他們的組合嵌套使用吧。

有序列表

現在我們要做那堆雜事了,但是發現這麼多雜事,先做哪個好呢?於是我們給這堆雜事弄個優先級排序,讓我們能夠按照順序做下去。HTML裏用<ol>標籤來表示有序列表,<ol>標籤的列表項依然是用<li>標籤表示。

它的代碼模板是這樣的:

<span style="font-family:Microsoft YaHei;"><ol>  
    <li></li>  
    <li></li>  
    ...  
</ol></span>

看看他的具體代碼實現是怎樣的吧:

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title>使用有序列表</title>  </head>  <body>  <h1>爲有序列表添加列表項</h1>  <ol>  
    <li>開會</li>  
    <li>寫報告</li>  
    <li>睡覺</li>     </ol>  </body>  </html>

瀏覽器結果是:

wKiom1fUtxWBjs1qAAAlGJT6WUE311.png-wh_50 

列表嵌套

我們知道標籤是可以嵌套的,所以列表也是可以嵌套的。當我們列表中的某些列表項是列表時,我們就可以用嵌套。

現在就通過一個例子來看看無序列表和有序列表是如何嵌套使用的吧:

<!DOCTYPE html>  <html lang="en">  <head>  
    <meta charset="UTF-8">  
    <title>使用有序列表和無序列表</title>  </head>  <body>  <h1>省份城市</h1>  <ul>  
    <li>安徽省</li>  
    <li>北京市</li>  
    <li>重慶市</li>  
    <li>福建省</li>  
    <li>甘肅省  
        <ul>  
            <li>蘭州市</li>  
            <li>嘉峪關市</li>  
            <li>金昌市</li>  
        </ul>  
    </li>  </ul>  </body>  </html>

結果是怎樣的呢?不妨前去http://www.mayacoder.com/lesson/lesson?lesson_id=31&knowledge_id=4 體驗看看吧。

結果如下:

wKioL1fUtyCAZDkMAAAYt0Cngpg225.png-wh_50


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章