一：从网页重构说起
1. web标准： 机构标准，样式标准，行为标准
2.样式和行为应该从标签中分离
精简，重用，有序
好的代码，注释要占1/3
前期构思，先慢后快
先确定Html，确定语义的标签，再来选用合适的CSS
去掉样式后，网页还是组织良好有序，并具有很好的可读性
必要的h1,h2标签对搜索引擎有用
当页面内标签无法满足设计时，才适当添加div和span无语义标签
3. 原生js，js类库和Ajax（是利用js和XMLHttpRequest对象在客户端和服务器端传输数据的技术）
4.了解后台语言：了解页面如何输出，以编写出他们套脚本的模板
在写ajax时可以自己模拟服务器端输出
5.语义化注意点：
少用div ，span，能用p则用p,
不要用纯样式标签，b改用strong
四：高质量的CSS
1要用DTD检验 (漏写DTD声明,firefox会标准模式解析，ie则怪诞模式)
2 组织CSS:
CSS的API(如何用css控制页面样式)
css的框架（如何对css进行组织）
base.css为最低层，被所有也引用
common.css为中间层，模块中的重复视为一个组件（实现封装，对经常变化的部分提供灵活的接口）
page.css 位于最高层，提供页面级样式
CSS reset (取消默认样式)
base.css
1.避免用*通用选择符，而是改为所有标签，{margin:0; padding:0}
2.通用原子类（文字，定位，长度，边距）
.fl{float:left;} .fr{float:right}还应设display：inline防止ie6双边距bug
.bc{margin-left:auto;margin-right:auto }使块级元素居中，还应该设置宽度
.clearfix{clear:both}
三种方法让浮动的父元素能根据浮动元素的高度自动适用高度
1.父元素也浮动
2.添加清除空标签
3.直接从父容器清除浮动元素的浮动（好方法）
.zoom{zoom:1}触发ie的hasLayout
3.模块化css（让代码高度重用）
封装，多用组合少有继承原则
模块和模块之间尽量不要包含相同内容，相同部分应该提取出来，单独建立模块
拆分模块时应该在“数量少”和“结构简单”提高重用性
4.css命名
使用英文
避免滥用子选择器
运用骆驼命名法和划线命名法
5.继承的缺点：任何一个小的变化也需重新设定一个类，很容易引起类的暴涨，产生大量细微不同的类
多用组合，少用继承
margin问题：
1. 在不确定模块上下margin不是很稳定的时候，最好不要将margin写在类里，而是单独挂用边距的原子类（mt10,mt20）
2. 不要混合上下margin-top和margin-bottom ，要单独使用，防止重叠
低权重原则——避免滥用子选择器
6. 权重相同，采用最后定义的选择器
7.为了样式容易覆盖，采用权重低的选择器
少用子选择器，多添加类
8. css sprite：就是一张图片然后position定位，减少http请求数
缺点：降低开发效率，增大维护难度（只适应于流量大的网站）
9.使用一行式的编辑风格
10.尽量使用class，少用id
11.css hack
1) ie 条件注释法
<!- -[if IE]> 或者（特定）<!- -[if IE 6]>或者(大于) <!- - [if gt IE6]>
<link rel=”stylesheet” href=”name.css” type=”text/css” />
<![endif]- ->
lte(小于等于) lt(小于) gte（大于等于）gt（大于）！（不等于）
缺点：虽然向后兼容性是最好的，但是都是集中在各自的文件中，加大维护成本
2）选择器前缀法
.test{} /*IE6 ,IE7,IE8*/
*html .test{} /*only for ie6*/
*+html .test{} /*only for ie7*/
缺点：不能保证ie9 ie10 不识别这些，像后兼容存在问题
3）样式属性前缀法
12. 链接样式的:link :visited :hover :active顺序不要弄错
13.hasLayout[用于块级元素] 设置border时有时候会断开,滚动条滚动又会出现
需要出发hasLayout （以前用height:1%, 现在用zoom:1）
zoom无法触发时则需要使用position:relative;
15块级元素和行内元素
1）行内元素设置margin和padding，左右有作用，上下不起作用（padding的背景有反应，但是上下间距没有作用）
2）display的属性：block， inline，none，
inline-block（用于行内元素触发hasLayout，才有效）（还有list-item和 table-cell IE6和IE7不支持）
16. inline-block（ie6和ie7不支持） 和hasLayout
触发行内的hasLayout可以使行内元素具有块级属性并在同一行，或者也可用zoom：1
文字对齐的时候ie8和firefox是顶对齐，使用*vertical-align
缺点：只能触发行内的hasLayout，还有css hack应尽量少用
17. relative ，absolute 和float
文档流 position:relative表示z-index:0; left top right bottom相对各自在z-index:0的位置
脱离文档流 position:absolute
float会仍然在z-index:0的文档流中，会改变文档排列
注意：absolute和float会隐式的改变display: inline-block
(可设长宽，还有双边距bug使用display：inline解决)
18.水平居中
1）文本和图片的行内居中用text-align：center
2）确定宽度的块级元素居中用 margin-left:auto; margin-right:auto
3)不确定宽度的块级元素（如分页）居中
方法一：用table包围ul(table的宽随内容变化，直接margin两边auto就可居中， ul 间接可居中)
缺点：无意义标签
方法二：将display：inline，再用text-align：center
缺点：不能设宽高
方法三：给父元素设float，然后父元素设置position：relative和left：50%
子元素position：relative；left：-50%
缺点：给子元素设了position：relative不好
19.竖直居中
1）父元素高度不确定的文本，图片，块级元素
可给父元素设置相同上下边距实现
2）父元素高度确定的单行文本
可用line-height: 父高 实现
3）父元素高度确定的多行文本，图片，块级元素
方法一：在td和th时，vertical-align可实现（div，p这些不支持）
但是在ie8和firefox中可以用display：table-cell来模拟表格（ie6和ie7不支持，只能直接用表格）
方法二：对ie6和ie8使用css hack 设置父和子元素的position为absolute和relative，在分别设置top：50%；top：-50%
20. 网格布局
两栏式布局
1.main比sidebar更重要，所以代码中main一定要提前sidebar
2.多用组合原则（有些类经常变化就单独放，如把float抽离，添加组合类.fr 和.fl）
缺点：仍然不能灵活修改
3.利用子选择器 .content-xx-xxxx .main衍生类提供布局样式，.main则其他小样式
xx为lr或rl， xxxx中分别是main 和sidebar的宽度
缺点：不易于扩展，不轻便（但是main和sidebar的宽度有限制，所以可以）
注意：宽度用100%，可以嵌套使用，提高重用性
21. position：relative和absolute和float都将触发z-index事件
z-index （越大越靠前，值相同，后定义的将在上边）
z-index：-1 在最低层（但在body下面，无法触发点击事件）
注意：负边距也能发生位置重叠（后出现的在上面）
22. flash和select问题
flash默认为窗口模式，会在前面（属性wmode设置的window, opaque和transparent）
注意：flash在ie和firefox里是以不同方式嵌入的（object和embed）
select在IE6下是以窗口模式显示的，永远在第一层 IE6 bug
解决方法用<iframe></iframe>设置在要提前元素的后面层来遮住select
23 IE6不支持透明图png
方法：用ie6专用滤镜配合js解决
缺点：加载完前仍然有色，执行效率不高，当png为背景时，滤镜不支持background-position和background-repeat
五：高质量的javascript
1.避免JS冲突（设计者有同名的全局变量定义在window下）
方法：用匿名函数包围（function（）{}）（）；
2. 两个匿名函数之间有通讯（功能C需要功能A中的b变量值）
严格控制js的全局变量
方法1：在全局变量中设var str；在A功能中将 var b=str(需要更多通信就设立更多变量，这样不好)
方法2：用全局对象类型的变量GLOBAL{}
方法3：为了防止通信之间还受影响(a和b都命名了str，c调用a的，d调用b的，会被覆盖)，需要使用命名空间来解决
var 变量名=GLOBAL.A.str(指定空间名A的str)
也可生成二级命名空间
进一步将命名空间定义为一个函数
给GLOBAL对象添加方法namespace，然后在需要空间的匿名函数中调用（先调用，再设值）
3.添加各自的注释（功能，负责人，联系方式，时间）
4.js从功能上分为 框架部分（组织作用，全局变量，定义命名空间）和应用部分（功能逻辑）
将应用部分的代码组织起来function init（）{}
方法1：再在文档加载完后调用 window.οnlοad=init; （但是window的onload要全部包括图片在内的全部下载完）
方法2：可以用JQuery中的监听DOMReady的$(dicument).ready(init) （但是复杂且浏览器不同将不同）
方法3：在页面的最后调用init 模拟DOMReady
5. 一般网页的头尾中会单独放置三个文件
头部：框架部分
尾部：调用init（当中部没有init时则会报错）
可以用if(init){ init()}
中部：为应用部分
6. CSS放头部，JS放尾部
7.JS文件压缩（删空格，删注释，变量名简单化，所以要保留原文件）
8. JS 分层（与css一样 base， common， page）
base层：作用1（封装不同浏览器下的JS差异，提供统一接口）
作用2（扩展JS底层提供的接口）
即给common和page层提供接口
common层：给page层提供组件
page层：具体功能
9.base层：封装（即ie与firefox的差异）
1）firefox的节点包括空格，换行，等文本信息P180-P184
2）event对象作为window的属性作用于全局作用域的，在firefox中event作为事件参数存在
扫一扫
794
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
