前端——多⾏三列模式页⾯布局纪念⼀下难得听课的前端
<!doctype html>
<html>
<head>css实现三列布局
<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{
#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;
}
诡异的颜⾊布局

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。