静态布局（Static Layout）是最传统的网页布局方式，也是前端的一个基本功，通常应用于PC端布局，当我们拿到UI提供的PC端PS设计稿，基本上就要用到静态布局了。
静态布局对前端来说是比较简单的，但如果想做到又快又好，建议前端要去学习一下PS的知识，大多数情况下，当你收到了设计稿，就会有人问你什么时候能实现（布局），我觉得对于比较复杂的首页，至少两天以内要完成，简单的页面当天应该完成。
静态布局的特点：
1、页面不会因为浏览器窗口的大小不同而不同，考虑目前主流电脑分辨率的宽度，UI的设计稿主体部分通常在1200像素以内，如果网页主体高于客户端分辨率，在浏览器中会出现横向滚动条，而不是缩小页面各元素。
2、页面元素的尺寸通常使用的px作为单位
3、在浏览器窗口中观察,通常居中对齐显示，两侧留白
静态布局的优缺点
优点：这种布局方式对设计师和CSS编写者来说都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现。
静态布局的适用范围
当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。
静态布局的方法
如果我们的目标是又快又好，那么可以从几个方面来探讨：
怎么快？
当我们拿到设计稿，是不是就要开始撸起袖子加油干呢？答案是否定的。
- 首先，我们最要搞清楚的是浏览器的兼容要求，尤其是IE浏览器的兼容，比如要求IE8不跑位，IE8中可以不实现CSS3动画、圆角矩形等，这是目前比较常见的要求，如果很不幸，你的老大要求你兼容到IE6,建议你早点另谋高就吧。
- 其次，与我们对接的UI不一定是一个有经验的UI，其次他未必是个负责任的UI，拿到设计稿，假设我们用PS打开它，建议各位同仁首先开始观察：
1.页面的主体是不是都在宽度范围内？
2.页面如果有背景图片是不是有规律？
3.什么地方疑是有交互效果或者动画？
4.打开图层面板看看UI有没有给图层编组？
5.关于字体、文字颜色、大小UI有没有设计标准？
6.那些特殊标注的图层是什么意思？
如果这些答案你不能确定，建议在和谐的基础上找UI确认，对于交互效果或者来说，你很可能会返工，对于不编组的设计图来说（不编组仅仅对前端来说非常糟糕），你很可能需要去操作不擅长的PS,这简直太糟糕了。
设计稿的问题解决了，我们再看一遍全部的设计稿，提炼出适用于整站的样式，放到一个css文件，所有页面都引用这个样式文件，参考CSS reset和常用样式。
剩下的，就加油干吧，很多时候你需要在工作中不断的积累，才能越做越快，不过基本上可以在几方面多做努力：
- 熟练操作PS，对编组、智能对象、图层、相应快捷键要熟悉。
- 对于html代码要尽量语义化，块级元素之间正确的嵌套，块级元素和行内元素要正确的嵌套
- CSS要熟练，CSS的书写可以按照一定的顺序，要能分清哪些是CSS2,哪些代码是CSS3；书写CSS的时候要能预见到跑位的可能性。
怎么做到好
- 上面提到了浏览器的兼容问题，市面上大致有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera，尽量做到在这些浏览器中呈现的页面时一样的。
- 明确知道自己的HTML文档应用的是哪个版本，遵循这个版本的规范；HTML代码与CSS代码分离，即结构与变现分离；html代码实现语义化，结构合理，对SEO优化友好。
- 减小CSS文件，HTML文件、图片文件的体积也是一种好，减少HTTP请求的次数加快网页渲染的速度。
后面的文章中有一些提高前端效率的方法，对任何的布局方式都是适用的，比如使用高效率的代码编辑器，利用Emmet插件。
参考
前端SEO优化
前端优化-网页图片优化
提高前端开发效率—前端代码编辑器
[提高前端开发效率—使用Emmet提高前端开发效率]