目录
一、从网站重构说起
二、团队合作
三、高质量的HTML
语义化
四、高质量的CSS
base common page
base.css
/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;}
legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
input,button,textarea,select{*font-size:100%;}
/*文字排版*/
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}
.fb{font-weight:bold}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh150{line-height:150%;}
.lh180{line-height:180%;}
.lh200{line-height:200%;}
.unl{text-decoration:underlline;}
.no_unl{text-decoration:none;}
/*定位*/
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.bc{margin-left:auto;margin-right:auto;}/*块级元素水平居中（前提是块级元素有设置宽度）*/
.fl{float:left;display:inline;}/*消除ie6浮动产生的双边距*/
.fr{float:right;display:inline;}/*消除ie6浮动产生的双边距*/
.cb{clear:both;}/*清除浮动*/
.cl{clear:left;}/*清除左浮动*/
.cr{clear:rigth;}/*清除右浮动*/
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.dc{margin: 0px auto;}
.vm{verticle-align:middle;}
.ohidden{overflow:hidden;}
.pr{position:relative;}
.pa{position:absolute;}
.abs-right{position:absolute;right:0}
.zoom{zoom:1;}/*触发IE浏览器的haslayout。解决ie下的浮动，margin重叠等一些问题*/
.hidden{visiility:hidden;}
.none{display:none;}
/*长度高度*/
.w10{width:10px;}
.w20{width:20px;}
.w30{width:30px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w200{width:200px;}
.w300{width:300px;}
.w400{width:400px;}
.w500{width:500px;}
.w550{width:550px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w1100{width: 1100px;}
.w{width:100%}
.h50{height:50px;}
.h80{height:80px;}
.h100{height:100px;}
.h200{height:200px;}
.h{height:100%}
/*边距*/
.m10{margin:10px;}
.m15{margin:15px;}
.m30{margin:30px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mt100{margin-top:100px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb50{margin-bottom:50px;}
.mb100{margin-bottom:100px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml50{margin-left:50px;}
.ml100{margin-left:100px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mr50{margin-right:50px;}
.mr100{margin-right:100px;}
.p10{padding:10px;}
.p15{padding:15px;}
.p30{padding:30px;}
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt50{padding-top:50px;}
.pt100{padding-top:100px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb50{padding-bottom:50px;}
.pb100{padding-bottom:100px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl50{padding-left:50px;}
.pl100{padding-left:100px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr50{padding-right:50px;}
.pr100{padding-right:100px;}1、模块化CSS——在CSS中引入面向对象编程思想
如何划分模块——单一的职责
提取相同的部分作为组件
CSS的命名——命名空间的概念
驼峰命名法用于区别不同的单词，划线用于表明从属关系
.timeList-lastItem
不加前缀的base层与common层：公共属性
加前缀的page层：私有属性
挂多个class，还是新建class——多用组合，少用继承
一个有多种样式的元素用多个class来表示
如何处理上下margin
相邻的margin-top和margin-bottom会重合
2、低权重原则——避免滥用子选择器
HTML 权重：1
class 权重：10
id权重：100
3、css sprite
css精灵 图片翻转技术
background-position
缺点：降低开发效率，增大维护难度
优点：减少HTTP请求数，减轻服务器压力
对于流量不大的网站，css sprite的好处不明显
4、css的常见问题
编码风格：
一行式：减小文件大小（推荐使用）
多行式：可读性
问题1：css hack
1、IE条件注释法
ie
ie6
Ite 小于等于
It 小于
gte 大于等于
gt 大于
！ 不等于
2、选择符前缀法
*html：ie6
*+html：ie7
3、样式属性前缀法
*width：ie6，ie7
_width:ie7
问题2：a 标签被点击后，hover样式不出现
解决：先写visited,再写hover
love hate原则：
l(link)ov(visited)e h(hover)a(active)te
问题3：hasLayout
hasLayout：ie浏览器专有属性
手动触发hasLayout就可以解决一些奇怪的bug
解决：
zoom:1; 没有副作用，多数情况使用
position:relative; 有副作用，少数情况使用
问题4：块级元素和行内元素
display:none;block,inline：ie6，ie7支持
块级元素：可以设置宽度，margin,padding,设了宽度后仍然是占一行
行内元素：margin，padding的水平间距正常，竖直方向异常
display:inline-block：长宽，margin，padding，不是单独一行，IE6和IE7不支持
如何在IE6和IE7上实现display:inline-block？
实现：
只能用行内元素
span{display:inline-block;*verticle-aligin:-10px}
原理：
display:inline-block令span触发了hack，用zoom：1也有同样的效果
img标签和button标签都具有display:inline-block的属性
问题5：relative，absolute和float
答案：
文档流：元素根据自己的display类型，长宽，内外边距等属性排列在z-index：0这一层里，这就是文档流。
设置了position:relative或者position:absolute，可以让元素激活left，top，right，bottom和z-index属性，改变文档流。
position:relative：
保留自己在 z-index层的占位，left，top，right，bottom值是相对于自己在z-index层的位置，对于其他在z-index层的元素没有影响。
position:absolute：
完全脱离文档流，不再在z-index中保留占位符，其left，top，right，bottom值是相对于自己最近的一个设置了position:relative或者position:absolute的祖先元素
float：left，right，在同层左右浮动，改变正常的文档流排列，影响其他元素。
设置了position:absolute和float的元素，其display值为inline-block
问题6：居中
1、水平居中
（1）文本图片等 行内元素水平居中：text-align:center
（2）确定宽度的块级元素水平居中：width:200px;margin-left:auto;margin-right:auto
（3）不确定宽度的块级元素水平居中
方法一：
借助table标签，table标签会根据内容自带宽度
table{margin-left:auto;margin-right:auto}
缺点：增加了无语义标签，加深了标签的嵌套层数
方法二：
将其变成行内元素
li{display:inline}
缺点：行内元素不能设置宽高等
方法三：
父元素{position:relative;left:50%}
子元素{position:relative;left:-50%}
缺点：引入position:relative有副作用
2、竖直居中
（1）父元素高度不确定的文本、图片、块级元素
通过给父元素设置相同的上下边距实现的
（2）父元素高度确定的单行文本的竖直居中
height:100px;
line-height:100px;
（3）vertical-align
a、当父元素为th或者td，这个属性才会生效，td标签隐式设置了vertical-align:middle
b、火狐和ie8可以设置 display:table-cell，vertical-align:middle来实现竖直居中
方法一 用表格标签
方法二 对于火狐和ie8用display:table-cell，vertical-align:middle来实现竖直居中
对于ie6,7用hack，通过给父子两层元素分别设置top 50%和top -50%来实现居中
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
.mb{margin-bottom:10px;}
.wrapper{background:black;width:500px;color:white;height:100px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;}
.demo{width:200px;background:red;height:50px;}
.vam{*position:absolute;*top:50%;}
.va{*position:relative;*top:-50%;}
</style>
</head>
<body>
<div class="mb10">
<div class="wrapper">
<div class="vam">
<div class="va">
hellow world<br/>
hellow world<br/>
hellow world
</div>
</div>
</div>
</div>
<div class="mb10">
<div class="wrapper">
<div class="vam">
<img src="cat.jpg" alt=""/>
</div>
</div>
</div>
<div class="mb10">
<div class="wrapper">
<div class="vam">
<div class="va demo"></div>
</div>
</div>
</div>
</body>
</html> 问题7：网格布局
问题8：z-index的相关问题以及flash和IE6下的select元素
a 、z-index 在设置position属性后被激活
b、负边距也可以引起竖直重叠 margin-top:-50px
c、flash的womde（用来指定窗口模式），有window（窗口，默认），opaque（非窗口不透明），transparent（非窗口不透明）三种。
window的值，其优先级高于非窗口类型的元素
select在ie6中也是以窗口的形式展示的，ie6的bug，可以用iframe解决
问题9：插入png图片
背景透明的png格式的图片在ie6中会显示淡蓝色
可以用滤镜解决
问题10：多版本IE并存方案——CSS的调试利器
五、高质量的JavaScript
1、养成良好的编程习惯
（1）团队合作 如何避免js冲突
a、用匿名函数将脚本包起来，可以有效控制全局变量，避免冲突隐患
<script type="text/JavaScript">
(function() {
var a=123,b="456";
GLOBAL.namespace("A.CAT");
GLOBAL.namespace("A.DOG");
console.log("GLOBAL",GLOBAL);
})()
</script>b、使用命名空间解决冲突
（2）给程序一个统一的入口——window.onload和DOMReady
<script type="text/JavaScript">
function init(){ alert("999") }; window.onload=init;
</script>a、window.onload：（js原生）网页内所有元素加载完毕后再执行，包括图片、flash等富媒体
b、DOMReady：（js框架）DOM节点加载完毕就可以了，DOM节点的内容不必加载完毕，速度更快
jq：
$(document).ready(init)YUI:
YAHOO.util.event.onDOMReady(init)原生模拟
在</body>之前调用它
（3）CSS放在页头，JavaScript放在页尾
（4）引入编译的概念，文件压缩
压缩工具：Packer（压缩JS），YUI compressor（压缩JS和CSS）
head.js ->head-min.js
2、JavaScript的分层概念和JavaScript库
（1）JavaScript如何分层
base层，common层，page层
base 层：
Ａ：封装不同浏览器下JavaScript差异，提供统一的接口
a、透明度、
b、event对象、
c、冒泡、
ie:
e.cancelBubble=true;火狐：
e.stopPropagation();d、on，attachEvent，addEventListener
onclick：覆盖
var demo=document.getElementById("demo");
demo.onclick=function(){
alert(1)
}
demo.onclick=function(){
alert(2)
}attachEvent，addEventListener：叠加
attachEvent:ie特有，后绑定先执行
addEventListener：w3c标准，先绑定先执行
obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){
{alert('1');});
obj.attachEvent('onclick',function(){
{alert('2');});
obj.attachEvent('onclick',function(){
{alert('3');});
//执行顺序是alert(3),alert(2),alert(1);obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){
{alert('1');},false);
obj.addEventListener('click',function(){
{alert('2');},false);
obj.addEventListener('click',function(){
{alert('3');},false);
//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');B、扩展JavaScript语言底层的接口
常用的方法：
a、trim()
去除字符串首尾的空白字符
function trim(ostr){
return ostr.replace(/^\s+|\s+$/g,"");
}
var str=" 99 ";
alert(trim(str))b、
function isNumber(s){
return !isNaN(s);
}
function isString(s){
return typeof s === "string";
}
function isBoolean(s){
return typeof s === "boolean";
}
function isFunction(s){
return typeof s === "function";
}
function isNull(s){
return s===null;
}
function isUndefined(s){
return typeof s === "undefined";
}
function isEmpty(s){
return /^\s*$/.test(s)
}
function isArray(s){
return s instanceof Array;
}