简介
在本实验中，我们将探索 CSS 编程的基础知识，并学习如何使用 CSS 对网页进行样式设置和格式化。通过一系列实践练习，你将对 CSS 语法、选择器、属性和值有扎实的理解，并能够创建视觉上吸引人且响应式的网页。在本实验结束时，你将在 CSS 方面拥有坚实的基础，并准备好承担更高级的网页开发项目。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 100%。获得了学习者 100% 的好评率。
圆点背景图案
虚拟机中已提供 index.html 和 style.css。
要创建圆点背景图案，你可以遵循以下步骤：
- 将
background-color属性设置为黑色。 - 使用
background-image属性和两个radial-gradient()值来创建两个圆点。 - 使用
background-size属性指定图案的大小。使用background-position来适当地放置这两个渐变。 - 将
background-repeat设置为repeat。 - 请注意，元素固定的
height和width仅用于演示目的。
以下是一个带有类 polka-dot 的 div 元素的示例 HTML 代码：
<div class="polka-dot"></div>
以及相应的 CSS 代码：
.polka-dot {
width: 240px;
height: 240px;
background-color: #000;
background-image:
radial-gradient(#fff 10%, transparent 11%),
radial-gradient(#fff 10%, transparent 11%);
background-size: 60px 60px;
background-position:
0 0,
30px 30px;
background-repeat: repeat;
}
请点击右下角的“上线”以在端口 8080 上运行网络服务。然后，你可以刷新 Web 8080 标签页来预览网页。
总结
恭喜你！你已经完成了圆点背景图案实验。你可以在 LabEx 中练习更多实验来提升你的技能。