知识点 词汇表 联系我们
按类别浏览
内容搜索    
当前位置:WEB开发技术知识库(www.cn-web.com) .: WEB技术相关 .: XHTML/CSS .: 使用div+css解决800与1024的自适应布局问题

使用div+css解决800与1024的自适应布局问题


设计网页经常会对不同的分辨率头痛,一般情况下就是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;
}


对此文章打分评级

用户评论

增加评论
此文章还没有任何评论!
网站地图 - 知识词汇 - 全文检索 - 广告服务 - 帮助中心 - 联系我们
.:www.cn-web.com
网站技术开发联盟之WEB开发技术知识库
联系人:老韩(QQ:5679551)
晋ICP备07003487号