列表

详情


FED76. 圣诞树

描述

圣诞节来啦!请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的:
1. "topbranch"是圣诞树的上枝叶,该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是:宽度为100px、是直线、颜色为green(未显示的边框颜色都为透明)
2. "middleBranch"是圣诞树的中枝叶,该上枝叶仅通过边框属性即可实现。边框的属性依次是:宽度为200px、是直线、颜色为green(未显示的边框颜色都为透明)
3. "base"是圣诞树的树干,该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px,颜色为gray。
注意:
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框,其属性都是透明(属性)
3. 仅通过border属性完成边框的所有属性设置
效果如下:

原站题解

HTML/CSS/JavaScript 解法, 执行用时: 1680ms, 内存消耗: 77852KB, 提交时间: 2022-02-09

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            .topbranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 上枝叶效果\n                */\n                float:left;\n                margin:0 auto;\n                border:100px solid green;\n                border-left-color:transparent;\n                border-right-color:transparent;\n                border-top-color:transparent;\n                margin-left:100px; \n                \n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 中枝叶效果\n                */\n                border:200px solid green;\n                border-left-color:transparent;\n                border-right-color:transparent;\n                border-top-color:transparent;\n                \n            }\n            .base {\n                /*\n                * TODO: 树干效果\n                */\n                 width: 70px;\n                height: 200px;\n                background-color:gray;\n                margin-left:165px;\n                \n            }\n        </style>\n    </head>\n    <body>\n    \t<section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1683ms, 内存消耗: 77856KB, 提交时间: 2022-02-09

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            *{\n                margin:0;\n                padding:0;\n            }\n            .topbranch {\n                width: 0px;\n                height: 0px;\n                border:100px solid transparent;\n                border-bottom:100px solid green;\n                margin-left:100px;\n               float:left;\n                /*\n                * TODO: 上枝叶效果\n                */\n                \n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                border:200px solid transparent;\n                border-bottom:200px solid green;\n                /*\n                * TODO: 中枝叶效果\n                */\n                \n            }\n            .base {\n                 width: 70px;\n                height: 200px;\n                background:gray;\n                margin-left:165px\n                /*\n                * TODO: 树干效果\n                */\n                \n            }\n        </style>\n    </head>\n    <body>\n    \t<section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1760ms, 内存消耗: 77800KB, 提交时间: 2021-12-30

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            .topbranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 上枝叶效果\n                */\n                float: left;\n                border-bottom: 100px solid green;\n                border-top: 100px solid transparent;\n                border-left:100px solid transparent;\n                border-right:100px solid transparent;\n                margin-left: 100px;\n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 中枝叶效果\n                */\n                border-top: 200px solid transparent;\n                border-bottom: 200px solid green;\n                border-left:200px solid transparent;\n                border-right:200px solid transparent;\n            }\n            .base {\n                /*\n                * TODO: 树干效果\n                */\n                float: left;\n                height: 200px;\n                width: 70px;\n                background-color: gray;\n                margin-left: 165px;\n            }\n        </style>\n    </head>\n    <body>\n        <section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1761ms, 内存消耗: 77856KB, 提交时间: 2022-01-21

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            .topbranch {\n                float: left;\n                margin-left: 100px;\n                width: 0px;\n                height: 0px;\n                border: 100px solid transparent;\n                border-bottom: 100px solid green;\n                /*\n                * TODO: 上枝叶效果\n                */\n           \n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                border: 200px solid  transparent;\n                border-bottom: 200px solid green;\n     \n                /*\n                * TODO: 中枝叶效果\n                */\n                \n            }\n            .base {\n                float:left;\n                margin-left:165px;\n                width: 70px;\n                height: 200px;\n                background:gray;\n                /*\n                * TODO: 树干效果\n                */\n                \n            }\n        </style>\n    </head>\n    <body>\n    \t<section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

HTML/CSS/JavaScript 解法, 执行用时: 1765ms, 内存消耗: 77900KB, 提交时间: 2022-01-22

{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=utf-8>\n        <style type=\"text/css\">\n            .topbranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 上枝叶效果\n                */\n                float:left;\n                margin-left:100px;\n                border-bottom:100px solid green;\n                border-top: 100px solid transparent;\n                border-left:100px solid transparent;\n                border-right:100px solid transparent;\n                \n            }\n            .middleBranch {\n                width: 0px;\n                height: 0px;\n                /*\n                * TODO: 中枝叶效果\n                */\n                border-bottom:200px solid green;\n                border-top: 200px solid transparent;\n                border-left:200px solid transparent;\n                border-right:200px solid transparent;\n                \n            }\n            .base {\n                /*\n                * TODO: 树干效果\n                */\n                height:200px;\n                width:70px;\n                margin-left:165px;\n                background-color:gray;\n                \n            }\n        </style>\n    </head>\n    <body>\n    \t<section class=\"topbranch\"></section>\n        <section class=\"middleBranch\"></section>\n        <section class=\"base\"></section>\n    </body>\n</html>","libs":[]}

上一题