html+css学习第四天（列表+表格）

一、列表

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;

        }