html列表

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>
<

推荐阅读更多精彩内容