CSS20. 单列布局
描述
单列布局是将头部、内容区、底部在页面上垂直排列，是非常实用的一种布局方式。主要对三个区域的宽度进行统一，然后通过设置自动外边距进行居中。HTML/CSS/JavaScript 解法, 执行用时: 1741ms, 内存消耗: 77764KB, 提交时间: 2022-01-25
{"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 box-sizing: border-box;\n }\n body {\n width: 500px;\n }\n header,section,footer {\n margin: 10px auto;\n width: 360px;\n border: 1px solid black;\n \n }\n header,footer {\n height: 32px;\n }\n </style>\n </head>\n <body>\n \t<header></header>\n <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>\n <footer></footer>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1742ms, 内存消耗: 77788KB, 提交时间: 2022-01-26
{"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 box-sizing: border-box;\n }\n body {\n width: 500px;\n }\n header,section,footer {\n margin:10px auto;\n width:360px;\n border:1px solid black;\n }\n header,footer {\n height:32px\n }\n </style>\n </head>\n <body>\n \t<header></header>\n <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>\n <footer></footer>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1744ms, 内存消耗: 77776KB, 提交时间: 2022-01-21
{"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 box-sizing: border-box;\n }\n header,section,footer{\n \n margin:10px auto;\n width:360px ;\n border:1px solid black;\n \n }\n header ,footer{\n height:32px;\n }\n body {\n width: 500px;\n }\n </style>\n </head>\n <body>\n \t<header></header>\n <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>\n <footer></footer>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1745ms, 内存消耗: 77768KB, 提交时间: 2022-01-22
{"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 box-sizing: border-box;\n }\n body {\n width: 500px;\n }\n header,section,footer{\n margin:10px auto;\n width:360px;\n border:1px solid black;\n }\n header,footer{height:32px;}\n </style>\n </head>\n <body>\n \t<header></header>\n <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>\n <footer></footer>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77764KB, 提交时间: 2021-12-30
{"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 box-sizing: border-box;\n }\n body {\n width: 500px;\n }\n header,section,footer{\n margin:10px auto;\n width:360px;\n border:1px solid black;\n }\n header,footer{\n height:32px\n }\n </style>\n </head>\n <body>\n \t<header></header>\n <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>\n <footer></footer>\n </body>\n</html>","libs":[]}