0
点赞
收藏
分享

微信扫一扫

1.01.14列表和表格

诗与泡面 2022-02-26 阅读 26

1.01.14列表和表格

1.列表标签

  • 一般用于写导航栏
  1. 无序列表

    1. ul无序列表
      • 独占一整行
      • 有内外边距
      • type属性有四个属性值
        • 实心圆disc(默认值)
        • 空心圆circle
        • 实心方块square
        • none 不显示符号
    2. li是列表的每一项
      • 独占一行
      • 没有内外边距
      • type属性有四个属性值
        • 实心圆disc(默认值)
        • 空心圆circle
        • 实心方块square
        • none 不显示符号
      • li含有一个 ::marker 伪元素
    • 小tips:行高等于高度,css中文字会垂直居中 line-height=容器高度
  2. 有序列表

    1. ol有序列表

      • 独占一整行
      • 有内外边距
      • type属性有三个属性值
        • 大写A,小写a 字母序号
        • 大写I,小写i 罗马数字序号
        • 数字 数字序号
    2. li是列表的每一项

      • 独占一整行
      • 没有内外边距
      • type属性有三个属性值
        • 大写A,小写a 字母序号
        • 大写I,小写i 罗马数字序号
        • 数字 数字序号
      • li含有一个 ::marker 伪元素
  3. 自定义列表

    1. dl自定义列表

      • 独占一整行
      • 没有内外边距
    2. dt标题

      • 独占一整行
      • 没有内外边距
    3. dd对于标题的描述

      • 独占一整行
      • 有外边距,没内边距
  4. 列表嵌套
    所有列表可以相互嵌套
    如:

    <!-- 列表的嵌套: 在 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标签

  • 没有内外边距
  • 表格不能直接包裹文字
  • 表格的大小由内容撑开,也可以直接设置宽高
  1. tr 行

    • 没有内外边距
    • 表格不能直接包裹文字
  2. td 单元格

    • 没有内外边距
    • 可以包裹文字
  3. 完整版table

    • 一般用table、tr、td就能实现一个表格,使用thead,tbody,tfoot,caption做的表格更加完整,可以使得浏览器加载表格时更加适配,提高用户体验
    • th 单元格
      • 相比于td,有文字加粗,居中的效果,常用于表头
    • thead表头
    • tbody表主体
    • tfoot表脚注
    • caption表格的标题 一般放在table标签里的第一行
  4. 属性

    • border 表格边框
      • 使用时会显示红色
      • 例如:<table border="1"></table>
    • cellspacing 单元格与单元格之间的间距
      • cellspacing=0可以伪装单一边框,实际是两条边框重叠
        • 真正的单一边框应该用CSS:border-collapse属性
          • 其属性值如下:
            separate:默认值。边框会被分开。
            collapse:将边框会合并为一个单线的边框
            inherit:继承父元素的 border-collapse 属性的值,早期IE浏览器不支持此值。
      • 例如:<table border="1" cellspacing="0"></table>
    • cellpadding 单元格与里面内容的间距
      • 例如:<table border="1" cellspacing="0" cellpadding="5"></table>
  5. 单元格的属性:跨行和跨列

    • rowspan跨行

      • 跨了x行,rowspan=“x”,必须注释掉该列的x-1个td单元格
    • colspan跨列

      • 跨了x列,colspan=“x”,必须注释掉该行的x-1个td单元格
    • 如果是table最后一行既进行跨行又进行跨列,表格会出现问题

      • 需要加上style="table-layout:fixed"才不会出问题
      • tableLayout 属性用来显示表格单元格、行、列的算法规则
      • table-layout 属性值
        • automatic :默认。列宽度由单元格内容设定。
        • fixed :列宽由表格宽度和列宽度设定。
举报

相关推荐

0 条评论