回顾挑战

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 38 课，共 76 课。

挑战

简单

在这个复习挑战中，你将使用宽度、高度、外边距、内边距和边框来设置书籍信息框的样式。这将考查你组织内容、设置间距以及应用边框来创建整洁布局的能力。

你会拿到一个 HTML 文档，其中有三个 div 区块，每个区块都包含书名、作者和一段简短介绍。你的任务是使用宽度、高度、外边距、内边距和边框来设置这些框的样式。

按照以下步骤操作：

使用类选择器编写一条 CSS 规则，选中所有 class 为 "book" 的元素。
将每个书籍信息框的宽度设为 350px，将高度设为 150px。
在每个书籍信息框内添加 15px 的内边距，为内容留出空间。
为每个书籍信息框设置实线边框，宽度为 3px，颜色为黑色。
在每个书籍信息框之间添加 20px 的外边距，让它们彼此分开。

亲手试试

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>