目录
一、从网站重构说起
二、团队合作
三、高质量的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 层:
A:封装不同浏览器下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;
}
3、编程实用技巧
4、面向对象编程