网页设计入门--列表
一、无序列表(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>
执行结果如下: