核心提示：前端高级布局代码实例!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title高级布局/titlestyle#l,#c,#r{width: 33.33%;...
前端高级布局代码实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级布局</title>
<style>
#l,#c,#r{
width: 33.33%;
height: 600px;
float: left;
}
#l_1{
width: 100%;
height: 150px;
background: #ffaaaa;
}
#l_2{
width: 100%;
height: 200px;
background: #aaffaa;
}
#l_3{
width: 100%;
height: 250px;
background: #aaaaff;
}
#c_t{
width: 100%;
height: 180px;
background: yellow;
}
#c_t p{
width: 33.33%;
height: 180px;
float: left;
}
#c_f{
width: 100%;
height: 420px;
background: orange;
}
#c_f>p{
width: 50%;
height: 420px;
float: left;
}
#c_f_l p{
width: 100%;
height: 140px;
}
#c_f_l_2{
background: red;
}
#c_f_r p{
width: 100%;
height: 68px;
margin-top: 2px;
background: green;
}
#r_t p{
width: 50%;
height: 200px;
float: left;
}
#r_t_1{
background: pink;
}
#r_t_2{
background: #666;
}
#r_1,#r_2,#r_3,#r_4,#r_5{
clear: both;
width: 100%;
height: 75px;
}
#r_6{
width: 100%;
height: 25px;
}
</style>
</head>
<body>
<p id="l">
<p id="l_1"></p>
<p id="l_2"></p>
<p id="l_3"></p>
</p>
<p id="c">
<p id="c_t">
<p id="c_t_1">c_t_1</p>
<p id="c_t_2">c_t_2</p>
<p id="c_t_3">c_t_3</p>
</p>
<p id="c_f">
<p id="c_f_l">
<p id="c_f_l_1"></p>
<p id="c_f_l_2"></p>
<p id="c_f_l_3"></p>
</p>
<p id="c_f_r">
<p id="c_f_r_1"></p>
<p id="c_f_r_2"></p>
<p id="c_f_r_3"></p>
<p id="c_f_r_4"></p>
<p id="c_f_r_5"></p>
<p id="c_f_r_6"></p>
</p>
</p>
</p>
<p id="r">
<p id="r_t">
<p id="r_t_1"></p>
<p id="r_t_2"></p>
</p>
<p id="r_1">r_1</p>
<p id="r_2">r_2</p>
<p id="r_3">r_3</p>
<p id="r_4">r_4</p>
<p id="r_5">r_5</p>
<p id="r_6">r_6</p>
</p>
</body>
</html>
