HTML&CSS--圣诞树

来源：互联网发布：淘宝全屏导航编辑：程序博客网时间：2024/04/28 20:27
<!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>
0 0