Home > Developer > Web Develop
Reference from: http://zhidao.baidu.com/link?url= Xtke0rtlkda1tzgais49zduaaja1yggzvv9zd9qjenv7hrrnd6lls90sw7eqxa3e0tzy3mhlegitsqdkhymrhk
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK "/>
<title> Testing </title>
<link rel= "stylesheet" type= "Text/css" href= "Css.css" >
<body>
<div class= "h" > Top layer </div>
<div class= "NAV" > Navigation bar </div>
<div class= "L" > Advertising layer </div>
<div class= "M" > Page body </div>
<div class= "R" > Advertising layer </div>
<div class= "B" > Bottom layer </div>
</body>CSS.CSS content is as follows:
HTML, body {height:100%; padding:0px; margin:0px;}
. h,. Nav,. L,. m,. R,. b {text-align:center; font-size:14px; border:1px solid #000000; margin:-1px;}
. h {height:10%;}
. nav {height:5%; Background-color: #5C69C2;}
. l {float:left; width:20%; height:70%;}
. r {float:right; width:20%; height:70%;}
. m {float:left; width:60%; height:70%;}
. b {clear:both; height:10%;}
Use Inline-block layout after changes<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Testing </title>
<style type= "Text/css" >
HTML, body {height:100%; padding:0px; margin:0px; font-size:0;}
. h,. Nav,. L,. m,. R,. b {text-align:center; font-size:14px;}
. h {height:10%;}
. nav {height:5%; Background-color: #5C69C2;}
. l {width:20%; height:70%; display:inline-block;}
. r {width:20%; height:70%; display:inline-block;}
. m {width:60%; height:70%;d Isplay:inline-block;}
. b {clear:both; height:10%;}
. h Div,.nav div,.l div,.m div,.r div,.b div{
border-top:1px solid #000;
height:100%;
}
. h div:first-child{
Border:none;
}
</style>
<body>
<div class= "h" ><div> top layer </div></div>
<div class= "nav" ><div> navigation bar </div></div>
<div class= "L" ><div> advertising layer </div></div>
<div class= "M" ><div> page body </div></div>
<div class= "R" ><div> advertising layer </div></div>
<div class= "B" ><div> bottom layer </div></div>
</body>DIV+CSS layout using Inline-block
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
