纪念一下难得听课的前端
<!doctype html> <html> <head> <meta charset="utf-8"> <title>多行三列模式页面布局</title> <style type="text/css"> @import url("out.css"); </style> </head> <body> <div id="container" class=" "> <div id="head" class=" "> <div id="logo" class=" ">logo</div> <div id="nav" class=" ">nav</div> </div> <div id="main" class=" "> <div id="left" class=" "> <div id="left1" class=" ">left1</div> <div id="left2" class=" ">left2</div> <div id="left3" class=" ">left3</div> <div id="left4" class=" ">left4</div> </div> <div id="center" class=" "> <div id="center1" class=" ">center1</div> <div id="center2" class=" ">center2</div> </div> <div id="right" class=" "> <div id="right1" class=" ">right1</div> <div id="right2" class=" ">right2</div> </div> </div> <div id="footer" class=" ">footer</div> </div> </body> </html>
@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; }
诡异的颜色布局
