FED76. 圣诞树
描述
圣诞节来啦!请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的: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":[]}