静态网页布局
1.兼容性
常见的浏览器兼容问题
所谓的浏览器兼容性问题，是指因为不同的浏览器对同?段代码有不同的解析，造成??显?效果不统?的情况。
问题?：不同浏览器的标签默认的外补丁和内补丁不同
CSS? *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的?个浏览器兼容性问题，?乎所有的CSS?件开头都会?通配符*来设置各个标签
的内外补丁是0。
CSS hack
我很少使?hacker的，可能是个?习惯吧，我不喜欢写的代码IE不兼容，然后?hack来解决。不过hacker还是?常好?
的。使?hacker我可以把浏览器分为3类： IE6 ； IE7和遨游；其他（IE8 chrome ff safari opera等）
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号
2.条件注释
<!--[if lte IE 6]> 这段?字仅显?在 IE6及IE6以下版本。 <![endif]-->
<!--[if gte IE 6]> 这段?字仅显?在 IE6及IE6以上版本。 <![endif]-->
<!--[if gt IE 6]> 这段?字仅显?在 IE6以上版本（不包含IE6）。 <![endif]-->
<!--[if IE 5.5]> 这段?字仅显?在 IE5.5。 <![endif]-->
<!--在 IE6及IE6以下版本中加载css-->
<!--[if lte IE 6]> <link type="text/css" rel="stylesheet" href="css/ie6.css" mce_href="css/ie6.css" /><![endif]-->
缺点是在IE浏览器下可能会增加额外的HTTP请求数。
2.less和sass
less
1.变量
声明：@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
输出：
#header { color: #6c94be; }
**2.混合**
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
然后把你需要的标题进行调试
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
通过koala进行编译，刷新后：
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
**3.带参数混合**
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合.
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
然后在其他 class 中像这样调用它：
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
方法2：
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
所以现在如果我们像这样调用它的话：
#header {
.border-radius;
}
###所有的标签都必须是先声明后使用；必须通过koala这个中间媒介才能完成less的使用，如果说想要在一个less文件里导入一个副的less文件；声明部分书写@inport：“文件名”
2.sass
和less一样，只是前缀名改为了$
3.网页布局
1.布局
12列式间距20px 3 6 3三格式布局——常用
16列式：间距20px 3 3 6 4 四个是布局
24列式和36列式不常用
2.bootstrap
bootstrap是目前应用比较广泛的一种框架
是基于jquery封装的一种框架是采用12列式自带响应式布局的框架
引入bootstrap文件：
一个css文件两个js文件
.min文件是压缩过的文件包特点就是方便使网页加载速度更快
3.兼容IE
两种方法：
在utf-8之前写上<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--[if it IE9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>(针对ie8)
<![endif]-->
4.容器 用container爆过页面上的内容可实现居中对齐 5.推和拉 .col-md-push-格数 .col-md-pull-格数 他们都是对前一个元素进行的操作 6.列偏移 .col-md-offset-格数 相对前一元素进行的偏移
原文：http://www.cnblogs.com/lmke/p/5043524.html