CSS 编程 | 网页开发 | 为 HTML 元素设置样式

简介

在本实验中，我们将通过实践不同的技术来为 HTML 元素设置样式，从而探索 CSS 编程。通过实际操作练习，我们将学习如何使用选择器、属性和值来创建视觉上吸引人的网页。在本实验结束时，你将对 CSS 有扎实的理解，并能够将其应用到自己的网页开发项目中。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/borders("Borders") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") subgraph Lab Skills css/selectors -.-> lab-35181{{"网页开发中的 CSS 样式技术"}} css/colors -.-> lab-35181{{"网页开发中的 CSS 样式技术"}} css/borders -.-> lab-35181{{"网页开发中的 CSS 样式技术"}} css/width_and_height -.-> lab-35181{{"网页开发中的 CSS 样式技术"}} css/backgrounds -.-> lab-35181{{"网页开发中的 CSS 样式技术"}} end

圆形

虚拟机中已经提供了 index.html 和 style.css。

要使用纯 CSS 创建圆形，可使用 border-radius: 50% 属性来使元素的边框弯曲。确保将 width 和 height 设置为相同的值，以确保得到一个完美的圆形。如果使用不同的值，将创建一个椭圆。以下是一个示例代码片段：

<div class="circle"></div>

.circle {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background: #9c27b0;
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了圆形实验。你可以在 LabEx 中练习更多实验来提升你的技能。