html列表
2016-08-01 本文已影响0人
追寻那一抹寒光
1.无序列表
用法如下:
<ul>
<li>列表项内容1</li>
<li>列表项内容2</li>
<li>列表项内容3</li>
<ul>
效果如下:
- 列表项内容1
- 列表项内容2
- 列表项内容3
无序列表可添加的属性为:
- disc:黑点
- circle:圆圈
- square:方块
代码为
<ul type="circle">
<li>列表项内容1</li>
<li>列表项内容2</li>
<li>列表项内容3</li>
<ul>
2. 有序列表
使用标签:<ol>
与<li>
属性:A,a,l,i,start
以A为例,属性设置为A是,代码如下:
<ol style="A">
<li>ios</li>
<li>android</li>
<li>html5</li>
<li>swift</li>
</ol>
效果如下:
有序列表A.png
3. 自定义列表
使用标签:
<dl>:每个自定义列表
<dt>:每个自定义列表项以<dt开始>
<dd>:自定义列表的定义,可以使用段落,换行标签,图像,链接等其他内容
淘宝上经常使用这种列表:
代码:
<dl>
<dt><img src="图片的地址" /></dt>
<dd><a href="https://detail.tmall.com/item.htm?id=525182525801&spm=a21bo.7932663.item.5.3gRGmM">Heilan Home/海澜之家2016夏季热卖男装圆领休闲印花潮流短袖T恤</a></dd>
<dd>时尚印花 舒适面料 柔软亲肤<dd>
<