信息保护中请放心填写
鼎之道、易于行
CSS画圣诞树
时间：2017-09-18
来源：鼎易科技
浏览：3447
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#div1{
width: 500px;
height: 500px;
border: 5px #000 solid;
margin: 0 auto;
text-align: center;
}
h1{
color: #33ff33;
margin-top: 10px;
}
h2{
width: 0;
height:0;
border-top:60px #fff solid;
border-right:70px #fff solid;
border-bottom:70px #3333ff solid;
border-left:70px #fff solid;
position:relative;
left:180px;
}
h3{
width: 0;
height:0;
border-top:100px #fff solid;
border-right:100px #fff solid;
border-bottom:100px #3333ff solid;
border-left:100px #fff solid;
margin-left: 150px;
margin-top: -100px;
}
p{
width: 10px;
height:180px;
margin:0 auto;
background: red;
clear: both; /*不加清除浮动就会在h3下边显示*/
}
</style>
</head>
<body>
<div id="div1">
<h1>圣诞树制作</h1>
<h2></h2>
<h3></h3>
<p></p>
</div>
</body>
</html>
