【HTML5学习笔记】25：CSS表格和列表

来源：互联网发布：银行卡制作软件编辑：程序博客网时间：2024/05/28 22:10

本节学习表格与列表中独有的CSS样式。

表格的独有样式
[1]border-collapse边框是否合并，separate为默认的独立，collapse为合并。
[2]border-spacing边框间距，只在上一个属性为独立时有效。
[3]caption-side设置表格标题(caption标签)所处的位置，默认在上方。
[4]empty-cells空单元格边框是否显示，hide为隐藏。
[5]table-layout设置表格排版方式，默认为auto(过长时拉伸)，还有值fixed(不拉伸而是换行)。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS表格和列表</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <table>    <caption>这里是表格标题</caption>    <tr>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>    </tr>    <tr>        <td>张三四五六七八九十</td>        <td></td>        <td>男</td>    </tr>    <tr>        <td>李四</td>        <td>28</td>        <td>女</td>    </tr>    <tr>        <td>王五</td>        <td>44</td>        <td>男</td>    </tr>    </table></body></html>

@charset "utf-8";table{    width: 400px;    height: 300px;    border: 1px solid red;/*外边框*/    text-align: center;    border-collapse: separate;    border-spacing: 30px;    caption-side: bottom;    empty-cells: hide;    table-layout: fixed;}table tr th{    border: 2px solid green;/*表头内边框*/}table tr td{    border: 2px solid blue;/*非表头内边框*/}

运行结果：
这里写图片描述

列表的独有样式
[1]list-style-type列表前面的标记，默认为disc实心圆，还有circle空心圆，square实心方块，decimal阿拉伯数字等。
[2]list-style-position标记所在的位置，默认为outsize为在内容外，inside则为在内容以内。
[3]list-style-image使用图片作为前缀的标记，none为不使用，url为使用，并且要给出使用哪张图。
[4]list-style简写形式，先写标记形态，再写标记位置，再写url，中间用空格隔开。

*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS表格和列表</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <ul>        <li>张三四五六七八九十</li>        <li>李四</li>        <li>王五</li>        <li>马六</li>    </ul></body></html>

@charset "utf-8";ul{    width: 50px;    list-style-type: upper-roman;    list-style-position: inside;    list-style-image: url("inter.ico");    /*list-style: */}

运行结果(按道理应该用个小图标)：
这里写图片描述

有关垂直对齐

[1]表格中的垂直对齐
text-align可以水平对齐，垂直对齐则可以用CSS中的vertical-align属性，值有baseline(基线)，top(顶端)，middle(默认的中部)，bottom(底端)。还有值sub(作下标)，super(作上标)。
*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS表格和列表</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <table border="1">    <caption>这里是表格标题</caption>    <tr>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>    </tr>    <tr>        <td>张三</td>        <td></td>        <td class="sex">男</td>    </tr>    <tr>        <td>李四<b>vip</b></td>        <td>28</td>        <td>女</td>    </tr>    <tr>        <td>王五</td>        <td>44</td>        <td>男</td>    </tr>    </table></body></html>

@charset "utf-8";table{    width: 400px;    height: 300px;    text-align: center;/*水平对齐:居中*/}.sex{    vertical-align: bottom;/*垂直对齐:贴底*/}b{    vertical-align: super;/*作上标*/}

运行结果：
这里写图片描述

[2]一般情形下的垂直对齐
一般情形下的水平对齐仍然只要用text-align属性即可，垂直对齐也是用CSS中的vertical-align属性，但是用的值是具体长度值或者百分比来调整。在一个盒子中某些信息的垂直对齐，就要建立一个更小的子盒子去装这些信息，然后再用值或者百分比来调整相对位置。
*测试代码

<!DOCTYPE html><html lang="zh-cn"><head>    <title>CSS表格和列表</title>    <meta charset="utf-8">    <link rel="stylesheet" type="text/css" href="style.css"></head><body>    <div>        <span>这里是一般情形下的文本，我希望它居中</span>    </div>    <br>    <em>内容简介:</em><textarea rows="20"></textarea></body></html>

@charset "utf-8";div{    width: 500px;    height: 300px;    background: silver;    text-align: center;}div span{    background: green;    /*用负值向下调*/    vertical-align: -150px;/*在内嵌的标签中用值或者百分比*/}em{    /*用正值向上调*/    vertical-align: 150px;}

运行结果：
这里写图片描述

阅读全文

0 0