{"html":"<!DOCTYPE html>\r\n<html>\r\n    <head>\r\n        <meta charset=utf-8>\r\n        <style type=\"text/css\">\r\n            .topbranch {\r\n                width: 0px;\r\n                height: 0px;\r\n                /*\r\n                * TODO: 上枝叶效果\r\n                */\r\n                float: left;\r\n                border-bottom: 100px solid green;\r\n                border-top: 100px solid transparent;/*透明*/\r\n                border-left:100px solid transparent;/*透明*/\r\n                border-right:100px solid transparent;/*透明*/\r\n                margin-left: 100px;/*左外边距实现*/\r\n            }\r\n            .middleBranch {\r\n                width: 0px;\r\n                height: 0px;\r\n                /*\r\n                * TODO: 中枝叶效果\r\n                */\r\n                border-top: 200px solid transparent;/*透明*/\r\n                border-bottom: 200px solid green;\r\n                border-left:200px solid transparent;/*透明*/\r\n                border-right:200px solid transparent;/*透明*/\r\n            }\r\n            .base {\r\n                /*\r\n                * TODO: 树干效果\r\n                */\r\n                float: left;\r\n                height: 200px;\r\n                width: 70px;\r\n                background-color: gray;\r\n                margin-left: 165px;\r\n                /*要让树干（.base）在 .middleBranch 下方居中，我们需要确保树干的左侧边缘位于 .            middleBranch 的水平中心位置。因此：\r\n\r\n                .middleBranch 的总视觉宽度为 400px。\r\n                树干的宽度为 70px，因此它的中心点应该位于 .middleBranch 的 200px 处（400px / 2）。\r\n                要使树干的中心与 .middleBranch 的中心对齐，我们需要将树干的左侧边缘放置在 200px    -               (70px / 2) = 165px 处。*/\r\n            }\r\n        </style>\r\n    </head>\r\n    <body>\r\n    \t<section class=\"topbranch\"></section>\r\n        <section class=\"middleBranch\"></section>\r\n        <section class=\"base\"></section>\r\n    </body>\r\n</html>\r\n","css":"/* html, body {\\n\\twidth: 100%;\\n\\theight: 100%;\\n\\tmargin: 0;\\n\\tpadding: 0;\\n} */","js":"// 请在这里输入代码"}