HTML、CSS - 粗糙的圣诞树
绿色的树叶、灰色的树干组成的圣诞树
- 粗糙(简易)圣诞树如图:
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
.topbranch {
margin-left:100px;
border:100px solid transparent;
border-bottom:100px solid green;
float:left;
/*上枝叶*/
}
.middleBranch {
width: 0px;
border:200px solid transparent;
border-bottom:200px solid green;
/*中枝叶*/
}
.base {
margin-left:165px;
width:70px;
height:200px;
background-color:gray
/*树干*/
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
3.心得
用HTML+CSS制作一颗圣诞树(两个绿色三角形作为枝叶+灰色长方形作为树干)：
- HTML: 使用section标签,分别为圣诞树的2个枝叶部分和一个树干部分做划分。这三个部分需要的颜色、位置和其他细节通过CSS实现。
- CSS：
- 上枝叶形状通过边框属性(border)实现，位置通过左浮动(float:left)、左外边距(margin-left)实现。 边框的属性依次是：宽度为100px、实线、颜色为green(border-bottom:100px solid green)；border-bottom可以视为一个由四个三角形组成的正方形的底部三角形，这里只需要底部的三角形作为圣诞树的枝叶，所以需要将边框剩下的部分颜色设置为透明(border:100px solid transparent)。
- 中枝叶通过边框属性实现。圣诞树中间的部分比上面的部分宽，所以设置边框的属性依次是：宽度为200px、实线、颜色为绿色；边框剩下的部分为透明，和上枝叶的实现同理。
- 树干通过设置位置、宽度、高度和背景颜色实现。树干的宽度、高度分别为70px、200px，背景颜色为灰色。
注：枝叶与树干的位置居中是通过左外边距实现的。
- 心得来源于在牛客网的一道题上制作圣诞树的过程：
查看12道真题和解析