简介
在本实验中，我们将探索 CSS 编程的基础知识。本实验的目的是向学习者介绍使用 CSS 设计网页样式的基础知识。在本实验结束时，学习者将对如何使用 CSS 创建视觉上吸引人的网页有扎实的理解。
这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个 初级 级别的实验，完成率为 94%。获得了学习者 100% 的好评率。
条纹背景图案
This tutorial is from open-source community. Access the source code
💡 本教程由 AI 辅助翻译自英文原版。如需查看原文，您可以 切换至英文原版
条纹背景图案
虚拟机中已提供 index.html 和 style.css。
此代码在白色背景上创建垂直条纹图案。
要创建该图案：
- 将
background-color属性设置为白色。 - 使用带有
linear-gradient()值的background-image创建垂直条纹。 - 设置
background-size属性以指定每条条纹的大小。 - 将
background-repeat设置为repeat以使图案填充元素。
请注意，元素固定的 width 和 height 仅用于演示目的。
以下是一个示例代码片段：
<div class="stripes"></div>.stripes {
width: 240px;
height: 240px;
background-color: #fff;
background-image: linear-gradient(90deg, transparent 50%, #000 50%);
background-size: 60px 60px;
background-repeat: repeat;
}请点击右下角的“Go Live”在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。
总结
恭喜你！你已完成“条纹背景图案”实验。你可以在 LabEx 中练习更多实验以提升你的技能。
