圣誕節(jié)是西方的傳統(tǒng)節(jié)日,著名的圣誕樹就成為了這個節(jié)日的標志。現(xiàn)在我們就來學習如何使用HTML語言畫一個圣誕樹吧。
<html>
<head>
<title>圣誕樹</title>
<style>
/* 樹梢 */
.top {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0f0;
margin: 0 auto;
}
/* 樹干 */
.middle {
width: 20px;
height: 100px;
background-color: #964B00;
margin: 0 auto;
}
/* 圣誕燈 */
.light {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #F00;
margin: 10px auto;
box-shadow: 0 0 10px #FFF, 0 0 20px #FFF, 0 0 30px #FFF, 0 0 40px #F00, 0 0 70px #F00, 0 0 80px #F00, 0 0 100px #F00;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="middle"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
</body>
</html>
以上就是一個簡單的圣誕樹框架代碼,我們可以根據(jù)自己的需求進行一些修改,例如調(diào)整顏色、大小、形狀等等,讓它更加符合我們的喜好。