用网页画一辆汽车,写出完整代码
时间: 2023-03-19 12:23:30 浏览: 88
好的,以下是一个简单的HTML和CSS代码,可以用来画一辆汽车:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>画一辆汽车</title>
<style>
.car {
position: relative;
width: 300px;
height: 150px;
background-color: #ccc;
border-radius: 20px;
overflow: hidden;
}
.car::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 100%;
background-color: #333;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.car::after {
content: "";
position: absolute;
bottom: 0;
left: 50px;
height: 50px;
width: 200px;
background-color: #333;
border-radius: 50%;
}
.wheel {
position: absolute;
bottom: 0;
height: 60px;
width: 60px;
background-color: #000;
border-radius: 50%;
transform: translateX(-50%);
}
.front-wheel {
left: 50px;
}
.back-wheel {
right: 50px;
}
</style>
</head>
<body>
<div class="car">
<div class="wheel front-wheel"></div>
<div class="wheel back-wheel"></div>
</div>
</body>
</html>
```
这段代码会创建一个包含两个黑色圆形轮子的灰色汽车。其中,汽车本身的样式由类名为“car”的元素定义,前轮和后轮的样式分别由类名为“wheel front-wheel”和“wheel back-wheel”的元素定义。
CSS代码中使用了绝对定位、圆角、盒模型、伪元素、transform等属性,用于实现汽车和轮子的形状和位置。