现在位置首页 / 项目实战 /正文

自适应可扩展的页面布局:左右,左中右等结构布局

作者: IT小兵 | 2014年5月5日| 热度:℃ | 评论: |参与:

原文链接:http://blog.segmentfault.com/joanna123/1190000000478602

为啥推荐这个文章,主要是考虑现在很多管理系统 cms 都是自主开发的,很多不是什么响应式开发 啊

很郁闷,总得自己想点招。这个文章可以给点提示:很多时候,我们可以自己多点适合自己的东西!

不要怕什么css,js,ps,sssssss。。。。。。。。。。。。


左右结构,左边100%;右边宽度固定

请输入图片描述

css

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#main_wrapper{float:left; width:100%; margin-top:10px; margin-left:-210px;}#main{height:200px; margin-left:210px; background:#999;}#sidebar{float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}#footer{height:50px; margin-top:10px; background:#CCC;}

HTML

<body>
    <div id="header"></div>
    <div id="center">
       <div id="main_wrapper">
         <div id="main"></div>
       </div>
       <div id="sidebar"></div>
   </div>
   <div id="footer"></div></body>

左右结构,左边固定,右边100%

请输入图片描述

css

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#sidebar{float:left; width:200px; margin-top:10px; height:200px;    background:#AAA;}#main_wrapper{float:right; width:100%; margin-top:10px; margin-left:-210px;}#main{height:200px; margin-left:210px; background:#999;}#footer{height:50px; margin-top:10px; background:#CCC;}

html

<body>
   <div id="header"></div>
   <div id="center">
       <div id="sidebar"></div>
       <div id="main_wrapper">
          <div id="main"></div>
       </div>
  </div>
  <div id="footer"></div></body>

左中右结构,左边固定,右边固定,中间100%;

请输入图片描述

css

#header{height:80px; background:#CCC;}#center{overflow:hidden; zoom:1;}#sidebar-l {float:left; width:200px; margin-top:10px; height:200px; background:#AAA;}#main-wrapper {margin-top:10px; float:left; width:100%; margin-left:-420px; height:200px;}#main {margin-left:438px; background:#999; height:200px;}#sidebar-r {float:right; width:200px; margin-top:10px; height:200px; background:#AAA;}#footer{height:50px; margin-top:10px; background:#CCC;}

html

<body><div id="header"></div><div id="center">
    <div id="sidebar-l">这里是左边</div>
    <div id="main-wrapper">
        <div id="main">这里是中间</div>
    </div>
    <div id="sidebar-r">这里是右边</div></div><div id="footer"></div></body>


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询