HTML列表

1、无序列表

各列表项之间没有次序,

  • 特性

    • ul 和 li 标签都是块级标签

    • 宽度默认撑满整个父元素

    • 高度默认由内容撑开

    • 独立成行

    • 自带外间距

    • 自带内填充

    • 自带列表符,去掉自带列表符 li{ list-style: none; }

  • css属性

    • list-style-type属性:列表符类型

      • circle空心圆|disc实心圆,默认值|square实心正方形|none去掉列表符

  • 应用场景 : 新闻列表 、导航 、商品列表

  • 注意:ul的直接子元素只能是li

各项之间为并列关系

2、有序列表

有排列次序,各项之间为并列关系

应用场景: 有序的列表

特性 与无序列表基本一致

3、自定义列表

语法:
     <dl>
         列表容器
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
    </dl>
    dl自定义列表、dt 自定义列表项、dd自定义列表项的注释(描述)

    在浏览器中,dd标签的内容会缩进显示

<dl>
        <dt>词专业名</dt>
        <dd>对专业名次的解释</dd>
        <dt>web大前端</dt>
        <dd>HTML、CSS、JAVASCRIPT</dd>
    </dl>

> 浏览器显示,dd标签的内容会缩进显示

- 特性
  - 宽度默认撑满整个父元素
  - 高度默认由内容撑开
  - 独立成行 
  -dl,dd默认自带外间距
典型应用
- 名词解释、分类(大分类-细节的类别)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值