简介
在本实验中,我们将通过实践不同的技术来为 HTML 元素设置样式,从而探索 CSS 编程。通过实际操作练习,我们将学习如何使用选择器、属性和值来创建视觉上吸引人的网页。在本实验结束时,你将对 CSS 有扎实的理解,并能够将其应用到自己的网页开发项目中。
这是一个实验(Guided Lab),提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤,获得实际操作经验。根据历史数据,这是一个 初级 级别的实验,完成率为 89%。获得了学习者 100% 的好评率。
在本实验中,我们将通过实践不同的技术来为 HTML 元素设置样式,从而探索 CSS 编程。通过实际操作练习,我们将学习如何使用选择器、属性和值来创建视觉上吸引人的网页。在本实验结束时,你将对 CSS 有扎实的理解,并能够将其应用到自己的网页开发项目中。
虚拟机中已经提供了 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 中练习更多实验来提升你的技能。