第四章 列表标签

第二十九课 无序列表

列表标签:给一堆数据添加列表语义,表示这一堆数据是一个整体
分类:

无序列表(最多)(unordered list)
有序列表(最少)(ordered list)
定义列表(其次) (definition list)

无序列表:给一堆数据添加列表语义,并且这一堆数据中所有的数据都没有先后之分
格式:


  • list item 1

注意点:

1、无序列表是给一堆数据添加列表语义的,告诉浏览器这一堆数据是一个整体,不是添加小圆点的,小圆点css修改样式
2、ul和li标签是一个整体,是一个组合,不会单独使用
3、ul标签中不推荐添加除li标签以外的标签

应用:

1、新闻列表
2、商品列表
3、导航条 css修改样式

列表

  • list item1
  • list item2
  • list item3

第三十课 无序列表练习

搜狐新闻类标


  • list item1
  • list item2
  • list item3
  • list item4
  • list item5

第三十一课 无序列表练习 2


四大名著

  • 《三国演员》

    三国鼎立

  • 《西游记》

    孙悟空

  • 《水浒传》

    武松

  • 《红楼梦》

    贾宝玉

第三十二课 无序列表练习 3


物品清单

  • 蔬菜

    • 白菜
    • 萝卜
    • 黄瓜
  • 水果

    • 苹果
    • 西瓜
    • 香蕉

webstorm 快捷方式
ul>li;ul>li*3

ul>li2>h2+ul>li3

第三十三课 有序列表

有序列表:给一堆数据添加列表语义,并且这一堆数据中所有的数据都有先后之分
其他和ul一样

  1. list item
  1. 演员
  2. 丑八怪
  3. 一人饮酒醉

第三十四课 定义列表

1、给一堆数据添加列表语义
2、dt标题 dd标题描述
格式:

dt:definition title 定义列表中的标题
dd:definition description 定义标题对应的描述的
注意点

1 dl和dt/dd是一个整体,一次出现
2 dl中建议只放dt和dd标签
3 一个dt可以没有对应的dd,也可以没有dd,但是不建议使用
建议使用一个dt对应一个dd
4 和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加其他标签

应用场景:

1、做网站尾部的相关信息

2、做图文混排

北京
中国的首都
上海
富人聚集地

第三十五课 定义列表练习

和li标签一样,当丰富界面时,可以在dt和dd标签中继续添加其他标签



![](0.gif)

图片

图片很好看

购物指南
购物指南 会员介绍 生活旅行/团购 常见问题 大家电 联系客服

内容参考

你可能感兴趣的:(第四章 列表标签)