html的布局奥妙

最近工作之余抽时间研读《深入理解bootstrap》一书，bootstrap是做响应式设计非常棒的前端框架。书中有许多思想（封装和继承）是非常值得我去学习的。

这个话题有点偏了，本文讲的是布局的奥妙。其实布局跟建筑学的知识是一样的，说到建筑学，我想到了建筑史，为什么要谈到建筑史呢？因为网页的发展就是根据建筑史的进化来发展的。


西方建筑设计史可以告诉我们很多关于网页设计的演变之事。同样作为艺术形式而存在，二者都是由这样几个因素所限定的：
1.它们都是人们要去往的地方。
2.为了承担这一实际职责，它们被反复设计着。
3.技术的发展限制了它们的设计 。
4.然而可以肯定的是，它们仍旧是艺术的一种形式。

I.新石器时代
简单、有限的结构

除了在大小和位置方面略有不同，此时的设计只是一个将东西归位的举措。

II. 古典主义时期
秩序和比例，并附有一些点缀

古典主义时期重新定义了和比例和层级，引入了因服务于不同目的而被明确划分的各个区域。这些介质（如石头、像素等）也都在程式化地模仿着先前的材料：带有三竖线花纹装饰的石头代表着（有纹理的）木头梁柱，正如我们会使用立体的按钮来代表现实世界中的按钮一样。

III．罗马式
较厚重的形式以及圆润的边缘

除了柔化建筑的边缘，古典主义时期还会增加墙壁厚度并拓深隔板宽度，从而达到更厚重、更可点击的效果——就像网页中的表单和按钮一样。

IV．哥特式
华丽且迷人

CSS和Flash就是网页设计中的花窗玻璃。在对应的位置都有了基础要素之后，我们开始尽可能地挑战材质设计的极限。哥特式建筑将石头设计出一种客服了地心引力、恍若能夺走游客呼吸的奇观异象。虽然现在，我们要记住它们很难，但早期那些Flash和CSS网站用像素带给我们的惊喜已经足够多了。
是的，我刚刚就是在把古老的Maroon 5网站与兰斯大教堂做对比。

V．文艺复兴时期
干净，逻辑和精确

这就是今天我们所处的位置。简直令人难以置信，最近风靡的“扁平化设计”运动与文艺复兴时期的建筑是何其相似！文艺复兴时期的建筑呼吁人们回归到经典的逻辑中去。简单的几何形状取代了华丽的复杂形状。设计变得简洁起来。
人们开始运用新的规则发表论述，一切似乎都有点返璞归真的样子了。
接着，我们开始进入未来……

VI． 巴洛克
扭曲所有的规则

保持如此的逻辑性与精确性只在一小段时间里取悦了群众。最终，我们开始打破规则。在建筑中，这意味着从字面上使那些经典元素分崩离析，并将它们扭曲成复杂的形式。与文艺复兴时期的理智相比，巴洛克式的设计是情感化且富有戏剧性的。
借由此，我们将如何对网页进行设计呢？这很难说。但请静静地等待——几年之后，它必将到来。

VIII. 此后（的事），还有谁了解？
好了，其实我们还挺了解的。它可能会是某种形式的新罗马式或新哥特式。一些全新的事物。艺术在以复兴的形式不断重演着。但最终会是怎样？新的技术和新的世界观将以我们在今天无法想象的形式来到我们面前。
然后，事情会变得不可思议起来。

网页的演变也是追随者时代的脚步，现如今的人们不比上世纪80年代关注穿好衣，90年代更关注吃好饭，后面就是关注冰箱，房子，汽车…现在关注教育。再比如穿衣，最早穿衣服，通常不在乎内衣，但外面一定要穿个名牌；而现在，很多人认为外衣穿的过得去就行，但内衣一定要穿好的，舒适的。
—-这种变化也体现在网页的设计和布局上。现在人们更多的是提倡内容为王，功能至上的网页设计，以提供给目标用户更好的功能体验为第一要素，而不是用花里胡哨的效果扰乱了用户的视线，弱化了功能。

大方向网页的发展历程做了一下总结，一家之言不一定正确，未来谁说的准呢？

现在从前端技术角度来谈谈布局，这些经验是自己在实践的过程中总结的，也许有些片面，但我会不断的学习实践下去

一个网页的搭建跟一个房子的搭建是一模一样的，建房子—我们的目标是构建一个完美的家，我脑海里面想的是这个温馨的家的整体模样—对应的是UI设计图；把你想象成一个建筑师，你将如何打造这个完美的家呢？

1.选址打地基
这算是准备工作，你要选择熟悉的工具，常用的调试浏览器，然后浏览器呈现的空白网页就是你即将开始建房子的土地。

2.按照设计搭建房子的主要结构
一个房子是否稳固，设计是否合理都在这一步。同理，设计网页也是一样，好的布局即使没有任何装饰（css），也是井然有序的。既然布局如此重要，那怎样才能做一个好的布局呢？当你没有思路的时候，模仿是最容易起步的。我们以小米官网为例，整体结构是上中下结构，

<!--头部-->
  <div class="header">
       <div class="w1200">
          <div class="cleft fl">
              <ul class="cul">
                  <li>
                      <a href="#">小米商城</a>
                      <span>|</span>
                  </li>
                  <li><a href="#">MIUI</a><span>|</span></li>
                  <li><a href="#">米聊</a><span>|</span></li>
                  <li><a href="#">游戏</a><span>|</span></li>
                  <li><a href="#">多看阅读</a><span>|</span></li>
                  <li><a href="#">云服务</a><span>|</span></li>
                  <li><a href="#">小米网移动版</a><span>|</span></li>
                  <li><a href="#">问题反馈</a><span>|</span></li>
                  <li><a href="#">Select Region</a></li>
              </ul>
          </div>
          <div class="cright fr">
              登录|注册
          </div>
       </div>
  </div>
  <div class="contaienr w1200 mt20">
       <!--先整体，后局部-->
     <!--导航栏-->
      <div class="sliderbox"></div>
      <!--banner-->
      <div class="bannerbox mt20"></div>
      <!--内容区域-->
      <div class="contentbox mt20"></div>
  </div>
  <!--底部-->
  <div class="footer mt20">
      <div class="w1200"></div>
  </div>

css的布局结构一般分为重置css（清楚标签的自带属性，方便我们去控制）和样式css,其中的通用代码就是根据项目结构封装的css，以便复用性更强。

*{padding:0;margin:0}
a{text-decoration: none;color:#333;}
ul li{list-style:none;}
body{font-size:14px;font-family:"微软雅黑";}
/*css层叠样式知识点 布局看背景+高度 间距看文字*/
/*通用代码*/
.mt20{margin-top: 20px;}
.fl{float:left;}
.fr{float:right;}
.w1200{width:1200px;height:100%;margin:0 auto;}
/*头部*/
.header{height:50px;background:#111;line-height: 50px;}
.header ul.cul li{float:left;padding:0 6px 0 0;}
.header ul.cul li span{padding-left:6px;color:#fff;}
.header ul.cul li a{color:#fff;font-size:12px;}


.sliderbox{height:140px;background:green;}
.bannerbox{height:340px;background:green;}
.contentbox{height:640px;background:green;}
.footer{height:200px;background:#111;}

3.房子要开始添砖加瓦了
房子要开始刷墙添瓦，网页也要从头开始安装布局开始装修了，还是以小米官网为例，先写头部，后写导航…

4.房子的装修
这里也是网页的润色阶段，让网页更美观，这里就不过多的阐述了。

总之，网页先布局，布局先整体后局部，布局用背景，间距看文字，还有一点，是专注一个点，先易后难，搞定静态页面再想交互。

当然还有很多细节需要自己的去把握，在以后的文章中也会涉及到。

end.