前端学习总结Day5

文章目录

• 一、列表
• 二、表格

一、列表

list-style:none;  删除列表项的前缀

1、无序列表：常用导航栏。

ul：定义无序列表。

       默认样式：

             上下有16px外边距，值会根据内容文本大小改变。

             左内边距40px。

li：列表中的项。

        注意：

             默认无序列表有"原点"，可通过css属性改变

<ul>
      <li>刘亦菲</li>
      <li>刘亦菲</li>
      <li>刘亦菲</li>
      <li>刘亦菲</li>
      <li>刘亦菲</li>
    </ul>

 2、有序列表：

ol：定义有序列表。

       默认样式：

             上下有16px外边距，值会根据内容文本大小改变。

              左内边距40px。

li：列表中的项。

        注意：

          默认有序列表有"阿拉伯数字"，可通过html属性改变.

          type：列表的类型：

               值：

                          1：默认值,阿拉伯数字

                          A：大写英文

                          a：小写英文

                          I：大写罗马数字

                          i：小写罗马数字

<ol type="i">
      <li>有序列表1</li>
      <li>有序列表2</li>
      <li>有序列表3</li>
      <li>有序列表4</li>
      <li>有序列表5</li>
      <li>有序列表6</li>
    </ol>

3、自定义列表：常用在底部导航栏 

dl ：定义自定义序列表。

              默认样式：

                    上下有16px外边距，值会根据内容文本大小改变。

                     dt ：定义列表项

                    dd ：定义列表项的描述

           默认样式：

                    左外边距40px。

<dl>
      <dt>html</dt>
      <dd>超文本语言</dd>
      <dd>超文本语言</dd>
      <dd>
        <a href="#">描述</a>
        <a href="#">描述</a>
        <a href="#">描述</a>
        <a href="#">描述</a>
        <a href="#">描述</a>
      </dd>
    </dl>

---

 

二、表格

table：定义表格。

             不设置宽度时，宽度被内容撑开

             设置了宽度并且内部内容不设置宽度时，td会按照内容长度拉伸

caption：定义表格的标题

            默认样式：

             文本默认在表格的水平居中的位置。

tehead：定义表格的表头。(可以省略，浏览器在解析的时候自动添加)

tr：定义表格的行。

th：定义表头表格的单元格。

tbody:定义表格的主体部分。(可以省略，浏览器在解析的时候自动添加)

td：代表标准的单元格

border-collapse: collapse  :边框合并

rowspan： 行合并，用于设置一个单元格占几行

<td rowspan="2">上午</td>

colspan：列合并，用于设置一个单元格占几列

 <td colspan="2">下午</td>

---