您的位置：首页 > Web前端 > HTML

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

2014-05-05 21:20 519 查看
http://www.cnblogs.com/bobbychencj/archive/2010/10/12/1848870.html#commentform


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

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

HTML的列表控件分为三类：

无序列表unorderedlist
有序列表orderedlist
自定义表definitionlist

1.无序列表（UnorderedList）


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


　　ul无序列表元素


　　li列表项

代码示例:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

</head>

<body>

<formid="form1"runat="server">

<h3>无序列表</h3>

<div>

<divstyle="border:solid1pxBlack;width:104px;height:500px;position:absolute;top:50px;left:15px;">

<h4>默认样式:</h4>

<ul>

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

</div>

<divstyle="border:solid1pxBlack;width:350px;height:500px;position:absolute;top:50px;left:124px;">

<h4>使用ul元素的type属性更改列表项的样式:</h4>

<ultype="circle">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

<ultype="disc">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

<ultype="square">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

</div>

<divstyle="border:solid1pxBlack;width:350px;height:500px;position:absolute;top:50px;left:479px;">

<h4>使用CSS的list-style-type控制列表符号的样式:</h4>

<ulstyle="list-style-type:none">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

<ulstyle="list-style-type:circle">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

<ulstyle="list-style-type:disc">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

<ulstyle="list-style-type:square">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ul>

</div>

<divstyle="border:solid1pxBlack;width:544px;height:500px;position:absolute;top:51px;left:834px;">

<h4>使用CSS的list-style-position属性更改列表符号的位置:</h4>

<ulstyle="list-style-position:inside">

<li>咖啡阿斯顿发沙发沙发上大发犬瘟热去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿一天与人同一个电话的</li>

<li>茶阿斯顿发生的发生的发生法大赛的发生的发送发沙发上的发生的发生的发送发生的发生的发生的发生的发送方</li>

<li>牛奶</li>

</ul>

<h4>使用CSS的list-style-position属性更更改列表符号的位置:</h4>

<ulstyle="list-style-position:outside">

<li>咖啡阿斯顿发沙发沙发上大发犬瘟热去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿去玩儿一天与人同一个电话的</li>

<li>茶阿斯顿发生的发生的发生法大赛的发生的发送发沙发上的发生的发生的发送发生的发生的发生的发生的发送方</li>

<li>牛奶</li>

</ul>

</div>

</div>

</form>

</body>

</html>




实际效果：
　　.png]




2.有序列表（OrderedList）


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


　　ol有序列表元素


　　li列表项

代码示例：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

</head>

<body>

<formid="form1"runat="server">

<div>

<div>

<h4>有序列表：</h4>

<ol>

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ol>

</div>

<div>

<h4>有序列表也可以更改列表符号位其他的值：</h4>

<olstyle="list-style-type:circle">

<li>咖啡</li>

<li>茶</li>

<li>牛奶</li>

</ol>

</div>

</div>

</form>

</body>

</html>


显示效果：
　　




3.自定义列表（DefinitionList）

　　定义列表用户带有各自定义的属于列表。
　　dl定义列表元素
　　dt一项
　　dd一个定义


代码示例：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title></title>

</head>

<body>

<formid="form1"runat="server">

<div>

<h4>自定义列表</h4>

<!--dl自定义列表-->

<dl>

<!--dt自定义列表项-->

<dt>Coffee</dt>

<!--dd定义子项-->

<dd>Blackhotdrink</dd>

<dt>Milk</dt>

<dd>Whitecolddrink</dd>

</dl>

</div>

</form>

</body>

</html>


显示效果：
　　.png]


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航