模块化布局方法：
1、先写出整体的框架（即页面的基本骨架）。在设计图上小块小块的看，写出大体的页面有哪些块。然后感觉样式相同的块，就给它们一个相同的class。如：
<header></header>
<nav></nav>
<div class="search"></div>
<div class="content"> // 内容区分为两个部分，左边一个主内容区，右边一个侧边栏
<div class="main"> // 主内容区分为两个部分，上面是一个部分，下面是一个背景
<div class=""> // 上面部分又可以分为两个部分
<div class="section"></div>
<div class="options"></div>
</div>
<div class="main-ad"></div>
</div>
<div class="aside"></div>
</div>
<footer></footer>
2、对于样式，先写reset样式，再写public样式，在写layout样式(重)，（即先把公有的东西提取出来）最后写其余具体样式。
- (2.1) reset样式就是不针对具体的类元素，只针对元素标签的那些需要清空的样式；比如
/* reset */
body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select { margin:0; padding:0; }
em { font-style:normal; }
li { list-style:none; }
a { text-decoration:none; }
img { border:none; vertical-align:top; }
table { border-collapse:collapse; }
input,textarea { outline:none; }
textarea { resize:none; overflow:auto; }
body { font-size:12px; font-family:"微软雅黑"; }
/* end reset */
- (2.2) public样式也不针对具体的类元素，而是写一些大都要用的public样式，比如
/* public */
.clear { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
.fl { float:left; }
.fr { float:right; }
.gradient {
background:-moz-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-webkit-linear-gradient(top, #FFFFFF, #f8f8f8);
background:-ms-linear-gradient(top, #FFFFFF, #f8f8f8);
background:linear-gradient(top, #FFFFFF, #f8f8f8);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#FFFFFF, endColorstr=#f8f8f8)";
+background:#f9f9f9;
}
.triangle_up, .triangle_down_red, .triangle_down_gray { position:absolute; width:0; height:0; overflow:hidden; border-left:4px solid transparent; border-right:4px solid transparent; }
.triangle_up { border-bottom:4px solid #ca0309; }
.triangle_down_red { border-top:4px solid #ca0309; }
.triangle_down_gray { border-top:4px solid #c4bdbd; }
/* end public */
- (2.3) layout样式为设置包含块元素的样式（即，上面那个整体框架的布局）。一般就是设置包含块的宽高，padding，border，margin。反正就是一切包含块需要设置的东西。比如：
注：先挨个把块的样式都写了，然后再观察有哪些相同的样式，提取出来用链式写法，来写在上面。即，先写（1）部分，然后再提取（1）中的共同点来写（2）部分。
/* layout */
/* 下面是（2）部分 */
#header, #nav, .content { width:960px; margin:0 auto; }
#search, .section, .login, .side_section, .ad_border, #footer, .activity, .recommend { border-radius:6px; border:1px solid #dbdbdb; }
.main_ad, .side_section, .side_ad, .ad_border { margin-bottom:10px; }
/* 下面是（1）部分 */
body { margin-bottom:30px; }
#header { height:30px; border-radius:0 0 6px 6px; }
#nav { height:100px; position:relative; }
#search { width:958px; height:114px; margin:0 auto 10px; position:relative; }
.main { width:710px; }
.main_wrap { padding-bottom:10px; }
.section { width:318px; padding:0 15px; }
.options { width:350px; position:relative; }
.main_ad { border-radius:6px; overflow:hidden; }
.side { width:240px; }
.side_section { padding:0 12px; }
.side_ad { border-radius:6px; overflow:hidden; }
.ad_border { width:238px; height:88px; overflow:hidden; }
#footer { width:958px; height:64px; padding-top:14px; line-height:25px; margin:0 auto; background:#f9f9f9; color:#767676; text-align:center; }
#footer a { color:#454545; margin:0 6px; }
#footer a:hover { text-decoration:underline; }
#footer span { margin-left:10px; }
/* end layout */
3、具体操作页面的时候
(1)注意图上的宽度和边框的测量。它有的是边框和宽度包括在一起才那么宽的，所以需要用总长度减去 两边的边框宽度，才是width。
(2)切图片的时候，如果图片是圆角，那么切下来圆角图片之后，要把它弄成直角，最后再通过样式来搞成圆角。
(3)reset时候设置img的verticle-align:top;原因是：避免图片产生间隙。
(4)测量一个li的宽度的时候：不要直接测那个li的宽度，而要从这个li的左边拉一个框，直到下一个li的左边，这就是那些li的宽度。因为这样的话就可以不设置li之间的距离，直接挨着放就好了。也可以尝试一下用
display:flex;,在设置justify-content:space-between;(5)若在一个元素里面，背景需要加载文字的上方。
// 方法一：
// 可以直接把元素高度设置为文字的line-height，然后，设置向上的padding。
// 因为背景是可以到padding的而文字是一直在内容区，所以这样背景就可以直接设置在padding那一块内容里面。
// 方法二：
// 还是把元素高度设置为文字的line-height，然后，设置一个前面的伪元素:before,把before的大小设置为图片的大小
// 这种方法用在移动端的话，必须设置图片的大小，即background-size
- (6)设置文本，有时候需要为溢出元素在最后设置省略号。可以用
text-overflow:ellipsis;和white-space:nowrap;overflow : hidden;但是，这样的话只能让它在一行，即只能存在一行文字。要实现多行文本溢出显示省略号的话，就用下列代码。
overflow : hidden;
text-overflow: ellipsis;
/* 下面三行代码是WebKit内核的浏览器实现的 */
/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/
/*display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
/*-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
(7)整体布局的时候，除了一些元素的高度，如footer，nav这些，一般先不管高度等竖直方向上的东西。
(8)制作三角的时候，可以把几个边框的width都设置为一样，而且边框的宽度为图上短的那个的长度.
(重)(9)input text和后面的
display:inline-block;元素垂直方向不对齐。由于行内元素垂直方向默认都是基线对其，即vertical-align:baseline;。但是input的基线是指它文字的基线，而不是整个input的基线；并且，由于inline-block元素没有基线，则它会用它的元素底端和父元素的基线(即行框的基线，父元素有多行时，就会有多个行框)对其。所以，结果就是input中文字的基线，和inline-block元素的底端对其。解决办法为：在两个元素都设置vertical-align: top;(10)设置inline-block布局的时候。在用这种布局的时候，由于inline-block元素默认都是基线对齐，则很容易出现左右两个元素，左边元素低于右边元素的情况。原因是：这两个元素需要进行基线对齐，而不是顶部的对齐。所以：解决方法还是和第(9)点一样，在inline-block元素上面设置
vertical-align：top;.(11)设置line-height的时候。比如，有两行文字，从第一行文字的头部测到第二行文字的头部，就是行高，行高乘以总共文字的行数，就是文字占用的总高度（文字的距离加上文字块上下由于行高产生的距离）。然后，再用行高减去字体大小，再除以2，就是整段文字上面和下面的距离。
// 例1：处理一段文字
// 比如，有两行文字，第一行文字头部到第二行文字头部为44px，文字大小为28px
// 则line-height：44px; 文字总高度为88px;文字块上下的距离就为8px;
// 这时候，如果文字块到父元素上面的距离大于8px，则需要加上margin
// 例2：处理多段文字
// 比如，有3段文字，第一段有两行文字，第二段有1行文字但是离第一段距离很远，第三段有1行文字。
// 先设置第一段的行高，
// 然后再设置最后一段的行高(先测量最后一段距离父元素底部的距离，然后把这个距离在加载这段文字的上面，之间的距离就是行高。)
// 最后设置中间一段的行高(从这段文字的底部测到第三段文字的行高顶部的距离，然后和第三段处理方法一样)
4、图片文件分类管理
图片文件放在image文件夹里面，而且，里面还可以再创建一些文件夹来把图片再次分类。
对于雪碧图：不要把页面上所有的小图片都切到一张图上面去，这样不利于维护。应该用模块化的方法，只把每个块的小图片切成一个图片就好。 做雪碧图的时候，新建一个文件，然后把小图片拉上去，剪切好了之后，把背景图关了就成了普通的那个了。
注：创建带有id属性的DOM元素也会创建同名的全局变量。
5、写js文件的时候
- (1)js整体样式。写js的时候把每块的代码用一个私有作用域包起来，避免他们之间相互影响。如：
(function() {
// 这下面是一个块
(function() {
var a = 1;
})();
// 这下面又是另外一个块
(function() {
var aLi = $('#menu li');
aLi.each(function ( index ){
$(this).click(function (){
});
});
})();
});
- (2)用js改变页面内容的时候。可以把所有需要修改的内容全都放到一个数组中去，然后用js来调用数组中的值。如：
(function() {
var aLi = $('#menu li');
aLi.each(function ( index ){
$(this).click(function (){
var arrText = [
'例如：荷棠鱼坊烧鱼 或 樱花日本料理',
'例如：昌平区育新站龙旗广场2号楼609室',
'例如：万达影院双人情侣券',
'例如：东莞出事了，大老虎是谁？',
'例如：北京初春降雪，天气变幻莫测'
];
iNow = index;
oText.val(arrText[iNow]);
});
});
})();
6、写其他东西，比如游戏的时候
(1)先写出一个中文的游戏流程，然后再操作。