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>
<
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2017-09-07摘抄自W3school-HTML 列表希望帮助自己系统地打好基础,也能在做笔记的同时添加一些自...
    moralok阅读 271评论 0 0
  • html有三种列表:有序列表、无序列表、自定义列表 有序列表:有序列表是一列项目,列表项目使用数字进行标记。 有序...
    __Qiao阅读 430评论 0 1
  • 一.有序列表 (ordered list) 格式: 语义及运用:给一堆数据添加列表语义,数据有先后之分。常运用于歌...
    饥人谷_刘冲阅读 1,682评论 0 1
  • 旋律永存阅读 179评论 0 0
  • 凌晨3点的昆明是什么样的?之前我从不知道,今年却看到过2次,都因为有一本书要看,我喜欢读各种书,唯独不喜欢读一这种...
    全宏量阅读 351评论 2 1