前端——多行三列模式页面布局
纪念一下难得听课的前端
<!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;
}
诡异的颜色布局
