用html和css编写一个红绿灯,样式要求:红灯,黄灯,绿灯里面又各自嵌套小一圈的相同颜色的灯
时间: 2024-03-06 22:47:00 浏览: 27
好的,以下是一个简单的红绿灯示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>红绿灯</title>
<style>
/* 灯的样式 */
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 20px;
border: 10px solid black;
display: inline-block;
}
/* 红灯样式 */
.red {
background-color: red;
}
/* 黄灯样式 */
.yellow {
background-color: yellow;
}
/* 绿灯样式 */
.green {
background-color: green;
}
</style>
</head>
<body>
<!-- 红灯 -->
<div class="circle red">
<!-- 红灯里的小圆圈 -->
<div class="circle red"></div>
</div>
<!-- 黄灯 -->
<div class="circle yellow">
<!-- 黄灯里的小圆圈 -->
<div class="circle yellow"></div>
</div>
<!-- 绿灯 -->
<div class="circle green">
<!-- 绿灯里的小圆圈 -->
<div class="circle green"></div>
</div>
</body>
</html>
```
在这个示例中,我们使用了一个 `div` 元素来表示灯,使用 `border-radius` 属性将其变成圆形。我们还使用了 `background-color` 属性来设置灯的颜色。在每个灯的内部,我们嵌套了一个相同颜色的小圆圈,使用了相同的样式类 `circle`。这样可以使得小圆圈与灯完美重合,看起来就像是灯里又嵌套了一层相同颜色的灯。