HTML学习笔记之列表控件 无序列表 ul（Unordered List） 、有序列表 ol（Ordered List） 、定义列表 dl（Definition List）

　　最近在看HTML基础的东西，做个笔记给个自己学习留个记录，同时也给初学HTML的朋友一个参考。

HTML的列表控件分为三类：

  • 无序列表 unordered list
  • 有序列表 ordered list
  • 自定义表 definition list

1. 无序列表 （Unordered List）

　　与例子、名称、组件、想法或选项的列表相关的都可以用做无序列表。无序列表显示前列表有符号，可以使用样式表（CSS）更改符号样式或更改成图片。

　　ul 无序列表元素

　　li 列表项

代码示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <h3>无序列表</h3>
    <div>
        <div  style=" border: solid 1px Black; width:104px; height: 500px; position:absolute; top: 50px; left: 15px; ">
            <h4>默认样式:</h4>
                <ul>
                  <li>咖啡</li>
                  <li>茶</li>
                  <li>牛奶</li>
                </ul>  
        </div>
        <div style=" border: solid 1px Black; width:350px;height: 500px; position:absolute; top: 50px; left: 124px;">
            <h4>使用ul元素的type属性更改列表项的样式:</h4>
            <ul type ="circle">
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>
            <ul type ="disc">
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>
            <ul type ="square">
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>
        </div>   
        <div style=" border: solid 1px Black; width:350px;height: 500px; position:absolute; top: 50px; left: 479px;">
            <h4>使用CSS的list-style-type控制列表符号的样式:</h4>
            <ul style="list-style-type:none" >
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul> 
            <ul style="list-style-type:circle" >
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>     
            <ul style="list-style-type:disc" >
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>    
            <ul style="list-style-type:square" >
              <li>咖啡</li>
              <li>茶</li>
              <li>牛奶</li>
            </ul>  
        </div>
        <div style=" border: solid 1px Black; width:544px; height: 500px; position:absolute; top: 51px; left: 834px;">
            <h4>使用CSS的list-style-position属性更改列表符号的位置:</h4>
                <ul style="list-style-position:inside" >
                  <li>咖啡阿斯顿发沙发沙发上大发犬瘟热去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿一天与人同一个电话的</li>
                  <li>茶阿斯顿发生的发生的发生法大赛的发生的发送发沙发上的发生的发生的发送发生的发生的发生的发生的发送方</li>
                  <li>牛奶</li>
                </ul>   
            <h4>使用CSS的list-style-position属性更更改列表符号的位置:</h4>
                <ul style="list-style-position:outside" >
                  <li>咖啡阿斯顿发沙发沙发上大发犬瘟热去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿一天与人同一个电话的</li>
                  <li>茶阿斯顿发生的发生的发生法大赛的发生的发送发沙发上的发生的发生的发送发生的发生的发生的发生的发送方</li>
                  <li>牛奶</li>
                </ul>
        </div>
    </div>
    </form>
</body>
</html>

 

 

实际效果：

　　ul_thumb[5]

 

2. 有序列表 （Ordered List）

　　有序列表用于以特定徐顺放声的列表项。

　　ol 有序列表元素

　　li 列表项

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div>
            <h4>有序列表：</h4>
            <ol>
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ol>
        </div>
        <div> 
            <h4>有序列表也可以更改列表符号位其他的值：</h4>
            <ol style="list-style-type:circle">
                <li>咖啡</li>
                <li>茶</li>
                <li>牛奶</li>
            </ol>
        </div>
    </div>
    </form>
</body>
</html>

显示效果：

　　ol_thumb6

 

3.自定义列表（Definition List）

　　定义列表用户带有各自定义的属于列表。

　　dl 定义列表元素

　　dt 一项

　　dd 一个定义

 

 

代码示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h4>自定义列表</h4>
            <!--dl 自定义列表 -->
            <dl>
                <!--dt 自定义列表项 -->
                <dt>Coffee</dt>
                    <!--dd 定义子项 -->
                    <dd>Black hot drink</dd>
                <dt>Milk</dt>
                    <dd>White cold drink</dd>
            </dl>
    </div>
    </form>
</body>
</html>

显示效果：

　　dl_thumb[1]

posted @ 2010-10-12 15:39  bobbychen  阅读(6056)  评论(1)  编辑  收藏  举报