一、列表
1.无序列表:(常用在导航栏)
ul:定义无序列表。
默认样式:
上下有16px外边距,值会根据内容文本大小改变;
左内边距40px。
li:列表中的项。
注意:
默认无序列表有"圆点",可通过css属性改变。
2.有序列表:
ol:定义有序列表。
默认样式:
上下有16px外边距,值会根据内容文本大小改变;
左内边距40px。
li:列表中的项。
注意:
默认无序列表有"阿拉伯数字",可通过html属性改变。
type:列表的类型:
值:
1:默认值,阿拉伯数字。
A:大写英文。
a:小写英文。
I:大写罗马数字。
i:小写罗马数字。
3.自定义列表:(常用在底部导航群)
dl:定义自定义列表。
默认样式:
上下有16px外边距,值会根据内容文本大小改变。
dt:定义列表的项。
dd:定义列表项的描述。
默认样式:
左外边距40px。
二、表格
table:定义表格。
不设置宽度时,宽度被内容撑开;
设置了宽度并且内部内容不设置宽度时,td会按照内容长度比例拉伸。
caption:定义表格的标题。
默认样式:
文本默认在表格的水平居中的位置。
thead:定义表格的表头。
可以省略,浏览器在解析的时候会自动添加。
tbody:定义表格的主体部分。
可以省略,浏览器在解析的时候会自动添加。
tr:定义表格的行。
th:定义表头表格的单元格。
td:定义标准的单元格。
常用的标签属性:
1.边框合并:border-collapse: collapse;
2.行合并,用于设置一个单元格占几行:rowspan
eg:
<td rowspan="2">上午</td>
3.列合并,用于设置一个单元格占几列:colspan
eg:
<td colspan="5">自习</td>
tips:行合并与列合并会使原本存在的单元格往后移位,导致超出表格,记得删除或者注释掉。
多学一招:
letter-spacing: 增加或减少文字与文字的字间距。
eg:
p{
letter-spacing: 18px;
}