前端静态网页布局经验谈

静态布局（Static Layout）是最传统的网页布局方式，也是前端的一个基本功之一，通常应用于PC端布局，当我们拿到UI提供的PC端PS设计稿，基本上就要用到静态布局了。

静态布局对前端来说是比较简单的，但如果想做到又快又好，建议前端要去学习一下PS的知识，大多数情况下，当你收到了设计稿，就会有人问你什么时候能实现（布局），我觉得对于比较复杂的首页，至少两天以内要完成，简单的页面当天应该完成。

静态布局的特点：

1、页面不会因为浏览器窗口的大小不同而不同，考虑目前主流电脑分辨率的宽度，UI的设计稿主体部分通常在1200像素以内，如果网页主体高于客户端分辨率，在浏览器中会出现横向滚动条，而不是缩小页面各元素。
2、页面元素的尺寸通常使用的px作为单位。
3、在浏览器窗口中观察,通常居中对齐显示，两侧留白或平铺背景。

静态布局的优缺点

优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。

静态布局的适用范围

当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。

静态布局的方法

如果我们的目标是又快又好，那么可以从几个方面来探讨：

怎么快？

当我们拿到设计稿，是不是就要开始撸起袖子加油干呢？答案是否定的。

• 第一，我们最要搞清楚的是浏览器的兼容要求，尤其是IE浏览器的兼容，比如要求IE8不跑位，IE8中可以不实现CSS3动画、圆角矩形等，这是目前比较常见的要求，如果很不幸，你的老大要求你兼容到IE6,建议你早点另谋高就吧。
• 第二，与我们对接的UI不一定是一个有经验的UI，也未必是个负责任的UI，另外有些地方你未必了解UI的设计意图，拿到设计稿，假设我们用PS打开它，建议各位同仁首先开始观察：
  1.页面的主体是不是都在宽度范围内？
  2.页面如果有背景图片是不是有规律？
  3.什么地方疑是有交互效果或者动画？
  4.打开图层面板看看UI有没有给图层编组？（好的编组对前端的工作效率尤其重要）
  5.关于字体、文字颜色、大小UI有没有设计标准？
  6.那些特殊标注的图层是什么意思？
• 第三，有时候我们并不是在做一个单独的网页，更可能是一个应用，一些复杂的交互是通过设计图无法了解的，这时候需要我们同事参考产品的设计文档等材料，如果没有也一定跟相关人员了解清楚，避免返工。

总之拿到设计稿之后，建议在和谐的基础上找UI和产品确认，对于交互效果或者来说，你很可能会返工，对于不编组的设计图来说（不编组仅仅对前端来说非常糟糕），你很可能需要去操作不擅长的PS,这简直太糟糕了。

设计稿的问题解决了，我们再看一遍全部的设计稿，提炼出适用于整站的样式，放到一个css文件，所有页面都引用这个样式文件，参考CSS reset和常用样式。

剩下的，就加油干吧，很多时候你需要在工作中不断的积累，才能越做越快，不过基本上可以在几方面多做努力：

1. 熟练操作PS，对编组、智能对象、图层、相应快捷键要熟悉。
2. 对于html代码要尽量语义化，块级元素之间正确的嵌套，块级元素和行内元素要正确的嵌套。
3. CSS要熟练，CSS的书写可以按照一定的顺序，要能分清哪些是CSS2,哪些代码是CSS3；书写CSS的时候要能预见到跑位的可能性。

怎么做到好

1. 上面提到了浏览器的兼容问题，市面上大致有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera，尽量做到在这些浏览器中呈现的页面时一样的。
2. 明确知道自己的HTML文档应用的是哪个版本，并遵循这个版本的规范；HTML代码与CSS代码分离，即结构与变现分离；html代码实现语义化，结构合理，对SEO优化友好。
3. 减小CSS文件，HTML文件、图片文件的体积；减少HTTP请求的次数加快网页渲染的速度。

后面的文章中有一些提高前端效率的方法，对任何的布局方式都是适用的，比如使用高效率的代码编辑器，利用Emmet插件。

参考
前端SEO优化
前端优化-网页图片优化
提高前端开发效率—前端代码编辑器
[提高前端开发效率—使用Emmet提高前端开发效率]