绿色的树叶、灰色的树干组成的圣诞树

  1. 粗糙(简易)圣诞树如图:

alt

  1. 代码
<!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：
  1. 上枝叶形状通过边框属性(border)实现，位置通过左浮动(float:left)、左外边距(margin-left)实现。 边框的属性依次是：宽度为100px、实线、颜色为green(border-bottom:100px solid green)；border-bottom可以视为一个由四个三角形组成的正方形的底部三角形，这里只需要底部的三角形作为圣诞树的枝叶，所以需要将边框剩下的部分颜色设置为透明(border:100px solid transparent)。
  2. 中枝叶通过边框属性实现。圣诞树中间的部分比上面的部分宽，所以设置边框的属性依次是：宽度为200px、实线、颜色为绿色；边框剩下的部分为透明，和上枝叶的实现同理。
  3. 树干通过设置位置、宽度、高度和背景颜色实现。树干的宽度、高度分别为70px、200px，背景颜色为灰色。

注：枝叶与树干的位置居中是通过左外边距实现的。

  • 心得来源于在牛客网的一道题上制作圣诞树的过程：

https://www.nowcoder.com/practice/4924913926d94e96a70bbf2a50847852?tpId=260&tqId=2337457&ru=/activity/oj&qru=/ta/front-quick-study/question-ranking