前端——多行三列模式页面布局

前端——多行三列模式页面布局

纪念一下难得听课的前端

@charset "utf-8";/* CSS Document */*{ font-size: 20px; margin: 0; padding: 0px; }#container{ width: 100%; height: 700px; margin: 10px;}#head{ width:100%; height: 200px;}#logo{ background-color: aqua; width: 100%; height: 150px;}#nav{ background-color:#33CF8B; width: 100%; height: 50px;}#main{ background-color:#31C153; width: 100%; height: 500px;}#footer{ background-color:#5910D2; width: 100%; height: 50px;}#left{ background-color:#E72B2F; width: 33%; height: 100%; float: left;}#center{ background-color:#E08119; width: 34%; height: 100%; float: left;}#right{ background-color:#199BB4; width: 33%; height: 100%; float: left;}#left1{ background-color:#2D1FCD; width: 100%; height: 123px; border-bottom: 2px solid #FFFFFF;}#left2{ background-color:#32CA43; width: 100%; height: 123px; border-bottom: 2px solid #FFFFFF;}#left3{ background-color:#D724CE; width: 100%; height: 123px; border-bottom: 2px solid #FFFFFF;}#left4{ background-color:#C3CC07; width: 100%; height: 125px;}#center1{ background-color:#B712E7; width: 100%; height: 198px; border-bottom: 2px solid #FFFFFF;}#center2{ background-color:#11B589; width: 100%; height: 300px;}#right1{ background-color:#E8070B; width: 100%; height: 148px; border-bottom: 2px solid #FFFFFF;}#right2{ background-color:#D0C729; width: 100%; height:350px;}

诡异的颜色布局

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。