设计网页经常会对不同的分辨率头痛,一般情况下就是800与1024这两种分辨率。我们可以使用div+
css加以解决。
布局代码
<div id="um-head">
<!--顶部logo和导航部分,使用100%比例-->
</div>
<!--页面主体部分,分为左、中、右、三部分,其中左导航部分位置和宽度固定,中间部分-->
<div id="um-body">
<div id='b-left'>
<!--左导航部分-->
</div>
<div id="b-center">
<!--中间部分-->
</div>
<div id="b-right">
<!--右部分-->
</div>
</div>
<!--页面主体部分结束-->
<div id="um-foot">
<!--页面底部-->
</div>
css代码#um-head {
height: 115px;
border-top: #A5161A 5px solid ;
border-bottom: #A5161A 5px solid ;
background: url(.jpg) #E33539 repeat-x bottom;
}
#um-body {
width:100%;
background: url(.jpg) #FEFEFE repeat right bottom;
}
#b-left {
float:left;
padding-top: 6px;
width: 160px;
background: url(.jpg) #FEFEFE repeat right bottom;
}
#b-center{
float:left;
width:593px;
padding: 6px 11px 0px 11px;
background: url(.jpg) repeat right bottom;
border-right: #A5161A 5px solid ;
}
#b-right{
float: right;
margin: 0px 0px 0px 0px;
}
#um-foot{
clear: both;
border-top: #A5161A 5px solid ;
height: 53px;
background: url(.jpg) #E33539 repeat right bottom;
text-align:center;
}