移动端H5网页“上中下布局”的另类实现思路

spidermanzy

浏览: 101713 次
性别:
来自: 北京

最近访客更多访客>>

a_little_kiss

adoijay

ruyuecat

zlulan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

转自：http://www.css3china.com/?p=256

文章中还有几个链接介绍负margin

记得曾经做过这样的一个面试题，面试题要求如下：

相册空间\硬盘空间的进度条,考虑百分比的控制；
左中右三栏等高，整个页面的宽度不固定，左右宽度固定，中栏自宽度适应，论坛的文章标题也自适应宽；
加“…”的地方，考虑过长溢出省略处理；
假如这是一个访问PV达2000W/日，因成本限制，网络带宽可能满足不了此访问量，会出现滞连情况，样式文件可能加载不了，且中栏内容是最重要且要呈现在用户眼前的。(也就是说,在无样式不完全加载情况下,中栏内容要优先左右两栏前)；
关注标签语义化；
关注提交的页面原型便于团队合作，开发实现；
关注HTTP请求和带宽消耗所带来的体验和成本。

这几点要求中，除了考察一个网页的标签语义化、页面性能、开发技巧以外，页面三栏等高布局、中间列优先加载应该算是开发过程当中的整个核心思路和决定整个页面成败的关键点。

关于三栏等高布局，网上已经有了举不胜举的实现方法和思路，且不说这些思路的好与坏，大家可以百度百度、谷歌谷歌，自作评价。

个人觉得各大互联网公司做的比较好的三栏或者是两栏布局有以下几个站点：

当然两栏或三栏布局，目前在各互联网网站应用的实例非常之多，就不在此一一列举。

在所有的这些案例当中，应用最多的一个css属性非margin莫属了，margin的值为“负值”。

有关margin负值，这里有篇经典文章：

负值之美：负margin在页面布局中的应用

想必看完这篇文章，大家已经对负边距有了更深一层次的认识。

于是得到了以下计算公式：

Margin负边距 + 三栏等高布局 + 中间列优先加载 = 圣杯布局（业内盛传的布局概念）的一部分。

在三列等高中间列优先加载的实现过程当中，尝试再尝试，最终沉淀出了以下“非公认的优秀代码”：

html：

<div class="wrapper">

  <!–头部 start–>
  <header>header</header>
  <!–头部 end–>

  <!–主体内容 start–>
   <div class="main_1">
       <div class="main_2">
          <div class="main_3 cf">
              <!–中间列 start–>
              <section class="content">
                  <ul>
                      <li class="">
                          <a href="#">测试内容www.css3china.com</a>
                      </li>
                      <li class="">
                          <a href="#">测试内容www.css3china.com</a>
                      </li>
                      <li class="">
                          <a href="#">测试内容www.css3china.com</a>
                      </li>
                  </ul>
              </section>
              <!–中间列 end–>
              <!–左侧边栏 start–>
              <aside class="aside_l">
                  aside_l
              </aside>
              <!–左侧边栏 end–>
              <!–右侧边栏 start–>
              <aside class="aside_r">
                  aside_r
              </aside>
             <!–右侧边栏 end–>
          </div>
      </div>
  </div>
  <!–主体内容 end–>

  <!–底部导航版权 start–>

  <footer>footer</footer>
  <!–底部导航版权 end–>

 </div>

css：

html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
/*****清除浮动*****/
.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0;}
.cf{display: inline-table;}
* html .cf{height:1%;}
.cf{display: block;}
/*****头脚****/
header, footer{height:44px;background:#555555;line-height:44px;text-align:center;color:#FFFFFF;}
/*****三栏布局*****/
.main_1{background:#666666;padding-right:170px;}
.main_1 .main_2{background:#666666;padding-left:180px;}
.main_1 .main_3{background:#999;position:relative;}
.content, .aside_l, .aside_r{height:100%;float:left;position:relative;text-align:center;}
.aside_l, .aside_r{line-height:50px;}
/*****中间列*****/
.content{width:100%;}
.content ul{padding:10px;font-size:14px;line-height:22px;}
/*****左栏*****/
.aside_l{width:180px;left:-100%;margin-left:-180px;}
/*****右栏*****/
.aside_r{width:170px;margin-right:-170px;}

猛戳DEMO

同理在开发移动端webapp时，我们同样需要面对各种布局以适应不同的产品需求，例如：上中下布局，曾经就是让重构头疼的一个问题。

关于webapp上中下布局，白树给我们整理一篇非常有料的文章：

移动web页面支持弹性滚动的3个方案

怎么样，是不是像打了鸡血一样兴奋，再也不用发愁移动端布局的事了！

接下来我为大家介绍一种新的实现移动端“上中下布局”的简单思路，同理于圣杯布局（margin负边距的巧妙应用）。

html：

 <div class="container">
     <header class="header">header</header>
     <section class="main">
         <div class="wrapper" id="wrapper"><!–  iscroll  容器 –>
             <div class="con"><!–  iscroll  滚动层 –>
                 <ul class="list">
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                     <li><a class="" href="#">测试内容www.css3china.com</a></li>
                 </ul>
             </div>
         </div>
     </section>
     <footer class="footer">footer</footer>
 </div>

css：

html, body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
html, body{height:100%;line-height:22px;color:#333;-webkit-text-size-adjust:none;}
body{height:100%;background:#fff;min-width:600px;font:16px '微软雅黑',Arial,Helvetica,sans-serif;overflow:hidden;}
img, a img, input{vertical-align:middle;}
img, a img, button {border:0;cursor:pointer;}
input, textarea{outline:none;-moz-outline:none;}
table, td ,th, tr{border-collapse:collapse;border:0;}
ul, ol, li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
a{color:#333333;text-decoration:underline;}
.container{height:100%;}
.header{background:#555555;height:44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}
.main{background:#999999;height:100%;margin:-44px 0;padding:44px 0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.wrapper{height:100%;overflow-y:auto\9;position:relative;}
.wrapper .con{padding:10px;}
.footer{background:#555555;height:44px;margin-top:-44px;position:relative;z-index:100;line-height:44px;text-align:center;color:#FFFFFF;}