网页设计入门--列表

一、无序列表（ul:unordered lists）

<ul>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ul>

list-style-type:disc（实心圆）|circle（空心圆）|square（正方形）|none;

如果要分别定义每个列表的样式，可以通过如下代表实现：

<html>
<head>
<title></title>
<style type="text/css">
.special1{list-style-type:circle;}
.special2{list-style-type:square;}
</style>
</head>
<body>
<ul>
<li>列表内容1</li>
<li class="special1">列表内容2</li>
<li class="special2">列表内容3</li>
</ul>
</body>
</html>

结果如下：

PS:1、可以通过list-style-image:none|url(图片路径);实现给列表插入项目图片的效果；

    2、可以通过在css里添加li{float:left;}，实现列表的列转行效果。

二、有序列表（ol:ordered lists）

list-style-type:decimal（阿拉伯数字1,2,3,...）|upper-alpha（A,B,C,...）|lower-alpha（a,b,c,...）|upper-roman（I,II,III,...）|lower-roman（i,ii,iii,...）|none;

代码如下：

<html>
<head>
<title></title>
<style type="text/css"></style>

</head>
<body>
<ol>
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ol>

<ol start="2">
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ol>

<ol type="a">
<li>列表内容1</li>
<li>列表内容2</li>
<li>列表内容3</li>
</ol>

</body>
</html>

实现结果如下：

三、定义列表（dl:definition list, dt:definition title, dd:definition description）

<dl>
<dt>列表一</dt>

<dd>列表内容1</dd>
<dd>列表内容2</dd>
<dd>列表内容3</dd>
<dt>列表二</dt>

<dd>列表内容4</dd>
<dd>列表内容5</dd>
<dd>列表内容6</dd>
</dl>

执行结果如下：

 

posted @ 2015-04-23 12:33  年年  阅读(403)  评论(0)    收藏  举报