1.01.14列表和表格
1.列表标签
- 一般用于写导航栏
-
无序列表
- ul无序列表
- 独占一整行
- 有内外边距
- type属性有四个属性值
- 实心圆disc(默认值)
- 空心圆circle
- 实心方块square
- none 不显示符号
- li是列表的每一项
- 独占一行
- 没有内外边距
- type属性有四个属性值
- 实心圆disc(默认值)
- 空心圆circle
- 实心方块square
- none 不显示符号
- li含有一个 ::marker 伪元素
- 小tips:行高等于高度,css中文字会垂直居中 line-height=容器高度
- ul无序列表
-
有序列表
-
ol有序列表
- 独占一整行
- 有内外边距
- type属性有三个属性值
- 大写A,小写a 字母序号
- 大写I,小写i 罗马数字序号
- 数字 数字序号
-
li是列表的每一项
- 独占一整行
- 没有内外边距
- type属性有三个属性值
- 大写A,小写a 字母序号
- 大写I,小写i 罗马数字序号
- 数字 数字序号
- li含有一个 ::marker 伪元素
-
-
自定义列表
-
dl自定义列表
- 独占一整行
- 没有内外边距
-
dt标题
- 独占一整行
- 没有内外边距
-
dd对于标题的描述
- 独占一整行
- 有外边距,没内边距
-
-
列表嵌套
所有列表可以相互嵌套
如:<!-- 列表的嵌套: 在 li 标签内部, 嵌入一个完整的ul或ol列表 --> <ul> <li>衣服 <!-- li内部嵌入二级列表 --> <ul> <li>T恤</li> <li>衬衫</li> <li>毛衣 <!-- li内部嵌入三级列表 --> <ol>码数 <li>s</li> <li>m</li> <li>l</li> <li>x</li> <li>xl</li> </ol> </li> <li>卫衣</li> </ul> </li> <li>美食</li> <li>住宿</li> <li>出行</li> </ul>
2.表格table标签
- 没有内外边距
- 表格不能直接包裹文字
- 表格的大小由内容撑开,也可以直接设置宽高
-
tr 行
- 没有内外边距
- 表格不能直接包裹文字
-
td 单元格
- 没有内外边距
- 可以包裹文字
-
完整版table
- 一般用table、tr、td就能实现一个表格,使用thead,tbody,tfoot,caption做的表格更加完整,可以使得浏览器加载表格时更加适配,提高用户体验
- th 单元格
- 相比于td,有文字加粗,居中的效果,常用于表头
- thead表头
- tbody表主体
- tfoot表脚注
- caption表格的标题 一般放在table标签里的第一行
-
属性
- border 表格边框
- 使用时会显示红色
- 例如:
<table border="1"></table>
- cellspacing 单元格与单元格之间的间距
- cellspacing=0可以伪装单一边框,实际是两条边框重叠
- 真正的单一边框应该用CSS:border-collapse属性
- 其属性值如下:
separate:默认值。边框会被分开。
collapse:将边框会合并为一个单线的边框
inherit:继承父元素的 border-collapse 属性的值,早期IE浏览器不支持此值。
- 其属性值如下:
- 真正的单一边框应该用CSS:border-collapse属性
- 例如:
<table border="1" cellspacing="0"></table>
- cellspacing=0可以伪装单一边框,实际是两条边框重叠
- cellpadding 单元格与里面内容的间距
- 例如:
<table border="1" cellspacing="0" cellpadding="5"></table>
- 例如:
- border 表格边框
-
单元格的属性:跨行和跨列
-
rowspan跨行
- 跨了x行,rowspan=“x”,必须注释掉该列的x-1个td单元格
-
colspan跨列
- 跨了x列,colspan=“x”,必须注释掉该行的x-1个td单元格
-
如果是table最后一行既进行跨行又进行跨列,表格会出现问题
- 需要加上style="table-layout:fixed"才不会出问题
- tableLayout 属性用来显示表格单元格、行、列的算法规则
- table-layout 属性值
- automatic :默认。列宽度由单元格内容设定。
- fixed :列宽由表格宽度和列宽度设定。
-