HTML&CSS--圣诞树

最新推荐文章于 2025-11-06 10:27:49 发布

原创最新推荐文章于 2025-11-06 10:27:49 发布 · 5.7k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

Web基础之HTML&CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS技术创建一个精美的圣诞树。通过CSS样式控制，实现了树的形状、颜色和装饰效果，展示了HTML和CSS在网页设计中的灵活性。

该文章已生成可运行项目，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>圣诞树</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="  " />
<style>
    #main{
        width: 600px;
        height: 600px;
        margin-top: 200px;
        margin-left: 400px;
        background: silver;
    }
    #top{
        /*margin-top: 200px;*/
        margin-left: 200px; 
        width: 0px;
        height:0px;
        border-top: 100px solid transparent;
        border-right:100px solid transparent;
        border-bottom:100px solid  green;
        border-left:100px solid  transparent;
    }   
    #mid{
        margin-left: 150px;
        margin-top:-180px;
        width: 0px;
        height: 0px;
        border-top:150px solid  transparent ;
        border-right:150px solid  transparent ;
        border-bottom: 150px solid green ;
        border-left:150px solid transparent ;
    }
    #foot{
        margin-left: 100px;
        margin-top:-280px;
        width: 0px;
        height: 0px;
        border-top:200px solid  transparent ;
        border-right: 200px solid  transparent ;
        border-bottom:200px solid green;
        border-left:200px solid  transparent ;
    }
    #pile{
        width: 50px;
        height:150px;
        margin-left: 275px;
        background:brown;
    }
</style>
</head>
    <body>
        <div id = "main">
            <div id = "top"></div>
            <div id = "mid"></div>
            <div id = "foot"></div>
            <div id = "pile"></div>
        </div>
    </body>
</html>