HTML----列表

  1. ul和ol列表的基本用法

    <ul>:定義無序列表

    <ol>:定義有序列表

    <li>:列表下唯一子元素,定義列表項。

   應用與效果展示:

wKioL1NBYwuRBKroAADJnSzZyA0878.jpg

wKiom1NBYzPyZDaBAACd5n2l-0E130.jpg

  1. ul和ol的type屬性

    雖然不建議,但是通過list-style-type,讓ul和ol在頁面顯示上由無序變有序,由有序變無序。

    type主要有以下幾個屬性值:

    disc—實心圓(ul默認)、circle—空心圓、square—實心方塊
    1—數字(ol默認)、a—小寫字母、A—大寫字母、i—小寫希臘字母、I—大寫希臘字母。

應用

  • 用列表ul或ol做菜單欄

    <head>

    <title>test</title>

    <style>

    li{

    border:1px blue dashed;

    float: left;

    list-style-type: none;

    padding: 5px 5px;

    }

    </style>

    </head>


    <body>

    <ul>

    <li>第一個</li>

    <li>第二個</li>

    <li>第三個</li>

    </ul>

    </body>

    </html>

    效果顯示:

    wKioL1NBaTXwSCjpAAAvkDC_tGI232.jpg

    如上所示,通過設置

    “float: left;”,可以使塊級li元素變成字符級。搭配使用a元素,便實現了簡易的菜單設置。

    (注意:設置display屬性也可以達到left的效果,但是對type屬性有影響)


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