色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css樣式畫圖小汽車

陳安慧1年前6瀏覽0評論

在網頁中可以使用CSS樣式來畫圖,接下來讓我們一起來嘗試畫一輛小汽車。

.car {
width: 200px;
height: 100px;
background-color: #bfbfbf;
position: relative;
}
.car:before {
content: "";
width: 60px;
height: 60px;
background-color: #4d4d4d;
position: absolute;
bottom: 0;
left: 20px;
border-radius: 10px;
}
.car:after {
content: "";
width: 60px;
height: 60px;
background-color: #4d4d4d;
position: absolute;
bottom: 0;
right: 20px;
border-radius: 10px;
}
.car .door {
width: 30px;
height: 60px;
background-color: #4d4d4d;
position: absolute;
bottom: 0;
left: 45px;
border-radius: 10px;
}
.car .roof {
width: 100px;
height: 40px;
background-color: #4d4d4d;
position: absolute;
top: 0;
left: 50%;
margin-left: -50px;
border-radius: 10px;
}
.car .wheel {
width: 50px;
height: 50px;
background-color: #333;
position: absolute;
bottom: 0;
left: 0;
border-radius: 50%;
transform: translateX(20px);
}
.car .wheel:last-child {
left: auto;
right: 0;
transform: translateX(-20px);
}

上述代碼中,我們使用了:before和:after偽元素來分別畫出了小汽車的左右兩個車燈,使用.door選擇器畫出了車門,使用.roof選擇器畫出了車頂,使用.wheel選擇器畫出了車輪。

最后,我們可以在HTML中使用.car類來展示這輛小汽車:

<div class="car">
<div class="door"></div>
<div class="roof"></div>
<div class="wheel"></div>
<div class="wheel"></div>
</div>

通過以上的CSS樣式和HTML結構,我們成功地畫出了一輛小汽車,可以在網頁上展示。