【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性-Toy模板网

这篇具有很好参考价值的文章主要介绍了【CSS系列】第六章 · CSS列表、表格、背景、鼠标属性。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

写在前面

1. CSS列表属性

1.1 列表相关的属性

2. CSS表格属性

2.1 边框相关属性（其他元素也能用）

2.2 表格独有属性（只有 table 标签才能使用）

3. CSS背景属性

3.1 背景属性

4. CSS鼠标属性

4.1 鼠标属性

结语

【往期回顾】

【CSS系列】第一章 · CSS基础

【CSS系列】第二章 · CSS选择器

【CSS系列】第三章 · CSS三大特性和颜色的表示

【CSS系列】第四章 · CSS字体属性

【CSS系列】第五章 · CSS文本属性

【其他系列】

【HTML系列】

【Java基础系列】（已更新完）

1. CSS列表属性

1.1 列表相关的属性

列表相关的属性，可以作用在 ul 、 ol 、 li 元素上。

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>列表相关属性</title>
    <style>
        ul {
            /* 列表符号 */
            /* list-style-type: decimal; */
            /* 列表符号的位置 */
            /* list-style-position: inside; */
            /* 自定义列表符号 */
            /* list-style-image: url("../images/video.gif"); */
            /* 复合属性 */
            list-style: decimal url("../images/video.gif") inside;
        }
        li {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>《震惊！两男子竟然在教室做出这种事》</li>
        <li>《一夜暴富指南》</li>
        <li>《给成功男人的五条建议》</li>
    </ul>
</body>
</html>

css鼠标属性,css,前端,html,html5,css3

2. CSS表格属性

2.1 边框相关属性（其他元素也能用）

css鼠标属性,css,前端,html,html5,css3

注意：

以上 4 个边框相关的属性，其他元素也可以用，这是我们第一次遇见它们。
在后面的盒子模型中，我们会详细讲解边框相关的知识。

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01_边框相关属性</title>
    <style>
        table {
            /* border-width: 2px; */
            /* border-color: green; */
            /* border-style: solid; */
            border:2px green solid;
        }
        td,th {
            border:2px orange solid;
        }
        h2 {
            border:3px red solid;
        }
        span {
            border:3px purple dashed;
        }
    </style>
</head>
<body>
    <h2>边框相关的属性，不仅仅是表格能用，其他元素也能用</h2>
    <span>你要加油呀！</span>
    <table>
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td>男</td>
                <td>群众</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
                <td>女</td>
                <td>党员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

2.2 表格独有属性（只有 table 标签才能使用）

css鼠标属性,css,前端,html,html5,css3

以上 5 个属性，只有表格才能使用，即： <table> 标签。

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_表格独有属性</title>
    <style>
        table {
            border:2px green solid;
            width:500px;
            /* 控制表格的列宽 */
            table-layout: fixed;
            /* 控制单元格间距（生效的前提是：不能合并边框） */
            border-spacing: 10px;
            /* 合并相邻的单元格的边框 */
            border-collapse: collapse;
            /* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */
            empty-cells: hide;
            /* 设置表格标题的位置 */
            caption-side: top;
        }
        td,th {
            border:2px orange solid;
        }
        .number {
            width: 50px;
            height: 50px;
        }
    </style>
</head>
<body>
    <table>
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th class="number">序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>政治面貌</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>党员</td>
            </tr>
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>19</td>
                <td>女</td>
                <td>团员</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>20</td>
                <td></td>
                <td>群众</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>21</td>
                <td>女</td>
                <td>党员</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

css鼠标属性,css,前端,html,html5,css3

3. CSS背景属性

3.1 背景属性

css鼠标属性,css,前端,html,html5,css3

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性</title>
    <style>
        body {
            background-color: gray;
        }
        div {
            width: 400px;
            height: 400px;
            border:5px black solid;
            font-size: 20px;
            /* 设置背景颜色，默认值是transparent */
            background-color: skyblue;
            /* 设置背景图片 */
            background-image: url(../images/悟空.jpg);
            /* 设置背景图片的重复方式 */
            background-repeat: no-repeat;
            /* 控制背景图片的位置——第一种写法：用关键词 */
            background-position: center;
            /* 控制背景图片的位置——第二种写法：用具体的像素值 */
            background-position: 100px 200px;
            /* 复合属性 */
            background: url(../images/悟空.jpg) no-repeat 100px 200px;
            
        }
    </style>
</head>
<body>
    <div>你好啊！</div>
</body>
</html>

css鼠标属性,css,前端,html,html5,css3

4. CSS鼠标属性

4.1 鼠标属性

css鼠标属性,css,前端,html,html5,css3

扩展：自定义鼠标图标

/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

代码演示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>鼠标相关属性</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: skyblue;
            cursor: url("../images/arrow.png"),pointer;
        }
        button {
            cursor: pointer;
        }
        input {
            cursor: move;
        }
    </style>
</head>
<body>
    <div>
        把鼠标放进来看一看
        <input type="text">
        <a href="#">百度</a>
        <button>点我</button>
    </div>
</body>
</html>

css鼠标属性,css,前端,html,html5,css3