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

    <ul>:定义无序列表

    <ol>:定义有序列表

    <li>:列表下唯一子元素,定义列表项。

   应用与效果展示:

HTML----列表_ol

HTML----列表_ul_02

  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>

    效果显示:

    HTML----列表_ol_03

    如上所示,通过设置

    “float: left;”,可以使块级li元素变成字符级。搭配使用a元素,便实现了简易的菜单设置。

    (注意:设置display属性也可以达到left的效果,但是对type属性有影响)