第5章 CSS3的属性

Question

1. 制作隔行换色表格，如图 5-38 所示。

Answer 1

这道题考查的是 CSS 表格属性和 伪类选择器 的综合运用。观察截图可以看到：表格有标题"热点新闻排行"，表头行是深色背景白色文字，数据行奇偶交替灰白色（隔行换色），整体边框合并为细线。

实现思路：

用 border-collapse: collapse 合并表格边框，让表格看起来是细线表格。
用 :nth-child(odd) 和 :nth-child(even) 伪类分别设置奇数行和偶数行的背景色，实现隔行换色。
表头 <th> 设置深色背景和白色文字。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>隔行换色表格</title>
    <style type="text/css">
        body { font-family: "Microsoft YaHei", sans-serif; }
        table {
            width: 600px;
            margin: 20px auto;
            border-collapse: collapse;  /*合并边框，细线表格的关键*/
        }
        caption {
            font-size: 18px;
            font-weight: bold;
            padding: 10px 0;
        }
        th, td {
            border: 1px solid #999;
            padding: 8px 12px;
            text-align: center;
        }
        th {
            background-color: #333;  /*表头深色背景*/
            color: #fff;             /*表头白色文字*/
        }
        /*隔行换色的核心：偶数行设灰色背景*/
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:nth-child(odd) {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <table>
        <caption>热点新闻排行</caption>
        <tr>
            <th>编号</th>
            <th>新闻名称</th>
            <th>日期</th>
        </tr>
        <tr>
            <td>001</td>
            <td>1《生活垃圾管理条例》正式实施了，开展垃圾分类宣传</td>
            <td>2020-08-18</td>
        </tr>
        <tr>
            <td>002</td>
            <td>2《生活垃圾管理条例》正式实施了，开展垃圾分类宣传</td>
            <td>2020-08-18</td>
        </tr>
        <tr>
            <td>003</td>
            <td>3《生活垃圾管理条例》正式实施了，开展垃圾分类宣传</td>
            <td>2020-08-18</td>
        </tr>
        <tr>
            <td>004</td>
            <td>4《生活垃圾管理条例》正式实施了，开展垃圾分类宣传</td>
            <td>2020-08-18</td>
        </tr>
        <tr>
            <td>005</td>
            <td>5《生活垃圾管理条例》正式实施了，开展垃圾分类宣传</td>
            <td>2020-08-18</td>
        </tr>
    </table>
</body>
</html>

代码要点说明：

border-collapse: collapse 是让表格呈现"细线"效果的关键，它把相邻单元格的边框合并成一条线。
tr:nth-child(even) 选中所有偶数行（第2、4行……），tr:nth-child(odd) 选中所有奇数行。这就是"隔行换色"的实现原理。
表头 <th> 用深色背景 + 白色文字，视觉上与数据行形成区分。

📖 参见 5.6 CSS 表格属性（border-collapse、border-spacing）、4.3 CSS3 伪类选择器（:nth-child）

Answer 2

这道题考查用 CSS 美化表单中的 文本输入框（input） 和 多行文本域（textarea）。从截图中可以看到4种不同样式的文本域：默认样式、改变边框颜色和文字颜色、增加背景图片（虚线边框）、改变边框颜色的多行文本域。

实现思路：

第1个是默认的 <input>，不加额外样式。
第2个改变了边框颜色（黄绿色）和输入文字颜色（蓝色）。
第3个用虚线边框（border-style: dashed），并可通过 background-image 设置背景图。
第4个是 <textarea>，设置了边框颜色。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>修饰文本域</title>
    <style type="text/css">
        body { font-family: "Microsoft YaHei", sans-serif; }
        /*第2个文本框：改变边框颜色和文字颜色*/
        .styled-input {
            border: 2px solid yellowgreen; /*黄绿色边框*/
            color: blue;                   /*输入文字为蓝色*/
            padding: 4px 8px;
            font-size: 14px;
        }
        /*第3个文本框：虚线边框 + 背景图*/
        .bg-input {
            border: 2px dashed #999;       /*虚线边框*/
            padding: 4px 8px;
            font-size: 14px;
            width: 200px;
            height: 30px;
            background-image: url(images/bg_input.png);  /*背景图占位*/
            background-repeat: no-repeat;
            background-position: right center;
        }
        /*第4个：多行文本域*/
        .styled-textarea {
            border: 2px solid #333;
            padding: 6px 8px;
            font-size: 14px;
            width: 250px;
            height: 80px;
        }
    </style>
</head>
<body>
    <p>
        <input type="text" />
        默认样式的文本域
    </p>
    <p>
        <input type="text" class="styled-input"
               value="输入的文字显示为蓝色" />
        改变了边框颜色和文字颜色的文本域
    </p>
    <p>
        <input type="text" class="bg-input" />
        增加了背景图片的文本域
    </p>
    <p>
        <textarea class="styled-textarea">改变边框颜色的多行文本域</textarea>
    </p>
</body>
</html>

代码要点说明：

border 是 border-width、border-style、border-color 的简写。2px solid yellowgreen 表示 2像素、实线、黄绿色。
border-style: dashed 是虚线边框，配合背景图可以做出比较有个性的输入框。
<textarea> 是多行文本输入框，可以通过 width 和 height 控制大小。
给表单元素添加 CSS 修饰是美化页面非常常见的做法，核心就是改 border、color、background 这几个属性。

📖 参见 5.8 CSS 属性的应用、5.1 CSS 背景属性

Answer 3

这道题是一个综合性较强的表单练习，考查 表单元素（input、radio、checkbox、select、textarea）与 CSS 美化 的配合。从截图看：页面有大标题"用户调查"，整个表单区域有虚线边框，包含姓名输入框、性别单选按钮、下拉选择框、复选框、留言文本域和提交按钮。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用CSS美化常用的表单元素</title>
    <style type="text/css">
        body { font-family: "Microsoft YaHei", sans-serif; }
        h1 {
            text-align: center;
            font-size: 24px;
            margin: 20px 0;
        }
        /*表单外围的虚线边框容器*/
        .form-wrap {
            width: 500px;
            margin: 0 auto;
            border: 1px dashed #999;
            padding: 20px 30px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 14px;
        }
        /*文本输入框样式*/
        .form-group input[type="text"] {
            width: 200px;
            padding: 4px 8px;
            border: 1px solid #999;
            font-size: 14px;
        }
        /*下拉选择框*/
        .form-group select {
            padding: 4px;
            font-size: 14px;
        }
        /*多行文本域*/
        .form-group textarea {
            width: 400px;
            height: 100px;
            border: 2px solid #333;
            padding: 6px 8px;
            font-size: 14px;
        }
        /*提交按钮*/
        .form-group input[type="submit"] {
            padding: 4px 16px;
            font-size: 14px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>用户调查</h1>
    <div class="form-wrap">
        <form>
            <div class="form-group">
                <label>姓名:</label>
                <input type="text" />
            </div>
            <div class="form-group">
                <label>性别:</label>
                <input type="radio" name="gender" /> 男
                <input type="radio" name="gender" /> 女
            </div>
            <div class="form-group">
                <label>你最关心的环保工程:</label>
                <select>
                    <option>废气净化处理</option>
                    <option>污水处理</option>
                    <option>垃圾分类</option>
                </select>
            </div>
            <div class="form-group">
                <label>你认为治理环境的好方法是:</label>
                <input type="checkbox" /> 森林覆盖
                <input type="checkbox" /> 兴修水利
                <input type="checkbox" /> 治理荒漠
            </div>
            <div class="form-group">
                <label>留言:</label>
                <textarea></textarea>
            </div>
            <div class="form-group">
                <input type="submit" value="提交" />
            </div>
        </form>
    </div>
</body>
</html>

代码要点说明：

表单的整体结构用一个 div.form-wrap 包裹，设置 border: 1px dashed #999 来实现虚线边框效果。
<input type="radio"> 是单选按钮，同一组的 name 必须相同（这里都是 "gender"），这样才能实现"二选一"。
<input type="checkbox"> 是复选框，允许多选。
<select> + <option> 构成下拉选择框。
<textarea> 是多行文本输入区域，用 CSS 的 width/height 控制大小。

📖 参见 5.8 CSS 属性的应用、第3章 HTML5 表单

Answer 4

这道题考查 CSS 伪类 设置超链接的不同状态样式。从截图看：页面有标题"网站标题"，下方有一行导航链接（首页、新闻、客服、联系），鼠标悬停时链接有背景色高亮效果，页面底部还有"联系我们"的文字。

核心知识点：链接的四种伪类 :link（未访问）、:visited（已访问）、:hover（悬停）、:active（激活）。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>使用CSS制作不同区域的超链接风格</title>
    <style type="text/css">
        body {
            font-family: "Microsoft YaHei", sans-serif;
            text-align: center;
        }
        h2 { margin: 20px 0 10px; }
        /*导航区域链接样式*/
        .nav {
            margin: 10px auto;
            font-size: 18px;
        }
        .nav a {
            font-size: 20px;
            margin: 0 10px;
            text-decoration: none;    /*去掉下划线*/
            color: #333;
        }
        .nav a:hover {
            background-color: #ccc;   /*悬停时灰色背景*/
            color: #000;
            padding: 4px 8px;
        }
        .nav a:link, .nav a:visited {
            color: #333;
        }
        /*页脚区域链接样式*/
        .footer a {
            color: #666;
            text-decoration: none;
        }
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h2>网站标题</h2>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">新闻</a>
        <a href="#">客服</a>
        <a href="#">联系</a>
    </div>
    <hr />
    <div class="footer">
        <p><a href="#">联系我们</a></p>
    </div>
</body>
</html>

代码要点说明：

超链接默认是蓝色带下划线的。用 text-decoration: none 去掉下划线，用 color 改变颜色。
a:hover 设置鼠标悬停效果，这里加了灰色背景（background-color: #ccc），模拟"按钮高亮"的感觉。
链接伪类的书写顺序必须是 :link → :visited → :hover → :active（LVHA 口诀），否则可能部分样式不生效。
同一个页面不同区域的链接可以通过不同的父元素类名（如 .nav a 和 .footer a）分别设置样式。

📖 参见 5.8.2 设置链接（链接伪类、文字超链接外观）

Answer 5

这道题考查用 CSS 制作 横向导航栏。从截图看：8 个导航项（网站栏目1~8）横向排列在一行，背景为浅灰色，鼠标悬停时变为深灰色，整体呈现"标签页"风格。

实现思路：用 <ul> + <li> 构建列表，将 <li> 设为 float: left 实现横向排列，链接设为 display: block 使整个区域可点击。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>导航栏</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        body { font-family: "Microsoft YaHei", sans-serif; }
        /*导航容器*/
        #nav {
            width: 960px;
            margin: 40px auto;
            overflow: hidden;  /*清除浮动*/
            background-color: #ddd;
        }
        #nav ul {
            list-style-type: none;  /*去掉项目符号*/
        }
        #nav li {
            float: left;  /*关键：让列表项横向排列*/
        }
        #nav li a {
            display: block;       /*块级显示，整个区域可点击*/
            width: 120px;
            text-align: center;
            line-height: 40px;    /*用行高实现垂直居中*/
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }
        #nav li a:hover {
            background-color: #999;  /*悬停深灰色*/
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">网站栏目1</a></li>
            <li><a href="#">网站栏目2</a></li>
            <li><a href="#">网站栏目3</a></li>
            <li><a href="#">网站栏目4</a></li>
            <li><a href="#">网站栏目5</a></li>
            <li><a href="#">网站栏目6</a></li>
            <li><a href="#">网站栏目7</a></li>
            <li><a href="#">网站栏目8</a></li>
        </ul>
    </div>
</body>
</html>

代码要点说明：

float: left 是将纵向的 <li> 列表转变为横向导航的关键。默认情况下 <li> 是块级元素，会独占一行，设为浮动后就会横向排列。
overflow: hidden 写在父容器上，用于"清除浮动"——让父容器能正确包裹住浮动的子元素。
display: block 让 <a> 标签变成块级元素，这样整个导航项区域都可以点击，而不仅仅是文字部分。
line-height 等于容器高度时，单行文字会自动垂直居中，这是一个非常常用的"小技巧"。

📖 参见 5.8.3 创建导航菜单（列表模式的横向导航菜单）

Answer 6

这道题与第5题类似，也是 横向导航栏，但样式有所不同。从截图看：6 个导航项（网站导航1~6），整体背景是深色（黑色），链接文字为白色，鼠标悬停时该项变为浅色背景 + 更大更粗的文字，有明显的凸出效果。上下有白色的装饰线条。

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ex5-6.html</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        body { font-family: "Microsoft YaHei", sans-serif; }
        #nav {
            width: 900px;
            margin: 40px auto;
            background-color: #333;
            overflow: hidden;
            border-top: 3px solid #fff;
            border-bottom: 3px solid #fff;
        }
        #nav ul {
            list-style-type: none;
        }
        #nav li {
            float: left;
        }
        #nav li a {
            display: block;
            width: 150px;
            text-align: center;
            line-height: 44px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }
        #nav li a:hover {
            background-color: #999;  /*悬停浅灰背景*/
            color: #000;
            font-size: 18px;        /*文字变大*/
            font-weight: bold;       /*文字加粗*/
        }
    </style>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#">网站导航1</a></li>
            <li><a href="#">网站导航2</a></li>
            <li><a href="#">网站导航3</a></li>
            <li><a href="#">网站导航4</a></li>
            <li><a href="#">网站导航5</a></li>
            <li><a href="#">网站导航6</a></li>
        </ul>
    </div>
</body>
</html>

代码要点说明：

与第5题相比，这个导航栏的整体底色是深色（#333），文字默认为白色，风格更"酷"一些。
悬停效果不仅改变了背景色，还改变了文字大小（font-size: 18px）和粗细（font-weight: bold），让悬停时的视觉反馈更加强烈。
border-top 和 border-bottom 给导航栏上下加了白色边线，与深色背景形成对比，起到装饰效果。
制作导航栏的核心套路就三步：① list-style: none 去项目符号；② li { float: left } 横向排列；③ a { display: block } 块级点击区域。

📖 参见 5.8.3 创建导航菜单（列表模式的横向导航菜单）

Answer 7

这道题是本章最综合的一道，考查 CSS 布局、表格、图像样式、链接、浮动 等多方面知识的综合运用。从截图看，页面分为两部分：

顶部导航区：一行图标导航（和谐社区、诚信守法、交通出行、便民服务），每个导航项有图标+文字。
广告展示区：标题"商圈广告"，下方是3行4列共12张图片缩略图，每张图下方有标题文字（1号商广告~12号商广告），底部还有翻页导航（首页、上页、下页、尾页等）。

我们用占位色块代替实际图片，重点展示 CSS 布局结构：

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>社区网广告</title>
    <style type="text/css">
        * { margin: 0; padding: 0; font-family: "Microsoft YaHei", sans-serif; }
        body { background-color: #f5f5f5; }
        .container {
            width: 800px;
            margin: 20px auto;
            background: #fff;
        }
        /*顶部导航区*/
        .top-nav {
            overflow: hidden;
            padding: 15px 20px;
            border-bottom: 1px solid #ddd;
        }
        .top-nav .nav-item {
            float: left;
            width: 25%;
            text-align: center;
        }
        .top-nav .nav-item .icon {
            /*用占位色块代替图标*/
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #999;
            margin-bottom: 5px;
            vertical-align: middle;
        }
        .top-nav .nav-item span {
            font-size: 14px;
            color: #333;
            vertical-align: middle;
            margin-left: 5px;
        }
        /*广告标题*/
        .ad-title {
            text-align: center;
            font-size: 16px;
            color: #fff;
            background-color: #999;
            padding: 8px 0;
            margin: 15px 20px 10px;
        }
        /*广告图片网格*/
        .ad-grid {
            overflow: hidden;
            padding: 0 20px;
        }
        .ad-item {
            float: left;
            width: 25%;
            padding: 8px;
            text-align: center;
        }
        .ad-item .img-placeholder {
            /*用占位色块代替广告图片*/
            width: 100%;
            height: 120px;
            background-color: #ccc;
        }
        .ad-item p {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        /*底部翻页导航*/
        .pagination {
            text-align: center;
            padding: 15px 0;
            font-size: 12px;
            color: #666;
            clear: both;
        }
        .pagination a {
            color: #333;
            text-decoration: none;
            margin: 0 3px;
        }
        .pagination a:hover {
            color: #c00;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航区 -->
        <div class="top-nav">
            <div class="nav-item">
                <span class="icon"></span>
                <span>和谐社区</span>
            </div>
            <div class="nav-item">
                <span class="icon"></span>
                <span>诚信守法</span>
            </div>
            <div class="nav-item">
                <span class="icon"></span>
                <span>交通出行</span>
            </div>
            <div class="nav-item">
                <span class="icon"></span>
                <span>便民服务</span>
            </div>
        </div>

        <!-- 广告标题 -->
        <div class="ad-title">商圈广告</div>

        <!-- 广告图片网格：3行 x 4列 = 12张 -->
        <div class="ad-grid">
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>1号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>2号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>3号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>4号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>5号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>6号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>7号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>8号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>9号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>10号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>11号商广告</p>
            </div>
            <div class="ad-item">
                <div class="img-placeholder"></div>
                <p>12号商广告</p>
            </div>
        </div>

        <!-- 底部翻页导航 -->
        <div class="pagination">
            <a href="#">首页</a>
            <a href="#">上页</a>
            <a href="#">下页</a>
            <a href="#">尾页</a>
            第1页/共1页
        </div>
    </div>
</body>
</html>

代码要点说明：

整体布局思路：外层 .container 固定宽度居中，内部分为顶部导航、广告标题、图片网格、底部翻页四个区域。
顶部导航和图片网格都用 float: left 实现横向排列，width: 25% 实现4列等分。
图片用 .img-placeholder（灰色色块）代替，实际项目中替换为 <img src="..."> 即可。
这道题综合运用了：浮动布局、overflow: hidden 清除浮动、百分比宽度、链接样式、文本居中等多个 CSS 核心技能。
在实际的社区网项目中，这些广告图片和文字通常是从数据库动态加载的，但 HTML+CSS 的结构是一样的。

📖 参见 5.9 实训——制作社区网页面、5.8 CSS 属性的应用

第5章 CSS3的属性

编程题