全国咨询/投诉热线:400-618-9090

首页技术文章正文

Web前端开发培训之网页前端学习总结(二)

更新时间:2017-05-17 来源:黑马程序员web前端开发培训学院 浏览量:

三、技巧
1. 写js效果时一定要注意先分析好效果的行为,尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上(即自然语言)2.再根据自然语言翻译成机器语言,用jquery写的代码一定要注意代码的可移植性、通用性。

2. 组织css,推荐使用base、common、page三层,base可以分为两大部分:css reset(覆盖掉浏览器提供的默认样式,可以参考:developer.yahoo.com/yui/)和通用原子类。(疑问:如果使用css reset后,那么之前的要求的标签语义化是否就没有意义了呢?因为所有语义化的标签默认样式都被reset了),不用*{ margin:0; padding:0;}的原因是因为“*”表示所有标签,其中包含大量生僻标签和为向前兼容而留下来的淘汰标签。

3. 把多个按钮放在一张图定位时,最好两个按钮之间隔一个像素,要不然有些版本的chrome可能解析不准确。

4. .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } 注意如果用了浮动,一定要清除浮动,深刻理解浮动的作用很重要。 在层里调整文字的垂直位置可以用1.lineheight2.padding。 注意模块化布局,增加代码的重用性,尽量只给最里层的内容层设高度,一般如果高度不确定的都设置成自适应,这样有助于内容拉伸,也便于修改模块的高度。 大框架,尽量简单的分,比如左右结构最好就设置成左右,没必要搞成左中右。 尽量不要在html代码里插入img,把他设置在结构里,然后用css插入图片。

5. jquery编程习惯可以参考:1.把所有用$()选中的元素保存在前缀为$的js变量里2.每个函数结束都要用return false 结束掉函数。
6. 布局前,先构思好整个页面的结构,一个好的结构要便于维护,加载更快,布局时也更容易。布局时,稳扎稳打,一步步弄好后(既没有用hack,也没有兼容性问题了),再布局下一个板块。 布局一个带js效果的页面,要先把效果图上的页面效果,完整布局好后,再考虑加动作的事情。并且一定要分析好页面的结构,以最少的标签,以及标签要与所放内容对应来布局。

7. jquery代码一般要用$(document).ready(function(){}确保页面dom准备好了再进行js操作。 页面按钮点击时边框变红,点击完后边框变蓝可以用outline:none;解决。 有动画的层最好设置overflow:hidden以免层里面的内容在外层宽高改变时撑出层外。

8. 写js效果时一定要注意先分析好效果的行为,尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上(即自然语言)2.再根据自然语言翻译成机器语言,用jquery写的代码一定要注意代码的可移植性、通用性。

9. a标签的四种状态的排序问题,可以用love hate 原则,即l(link)ov(visited)e h(hover)a(active)te,顺序写错可能出现点击后hover样式失效。

10. 一般情况下,建议尽量使用class,少用id。

11. css编码风格:多行式和一行式。 多行式:可读性强,但使行数过多,编辑需要来回拖动滚动条,影响开发速度,增大css文件大小。 一行式:可读性稍差,有效减小css文件行数,有利于提高开发速度,同时减小css文件大小。 一行式逐渐成为主流。

12. css sprite:即把多个甚至所有的图标都放在一张图里,然后用背景定位来控制图标的显示。 使用难点:图片如何排列能够紧凑,同时保证不会影响扩展性。 优点:减少http请求数,减小服务器压力。 缺点:影响开发速度,大大降低了可维护性。 是否使用取决于网站流量,对于流量不大的网站来说,css sprite带来的好处并不明显,而付出的代价是巨大的,不划算。

13. 定义有:hover伪类的样式时,多定义一个它的hover类,这样有助于js调用生成current的效果,如定义btn{xxx},btn:hover,btn_hover{xxx}。

14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的,当不同选择符的样式设置有冲突时,会采用权重高的选择符设置的样式。 规则:html标签的权重是1,class的权重是10,id的权重是100.如“div em”的权重是1+1=2,“strong.demo”的权重是10+1=11,“#test.red”的权重是100+10=110. 如果css选择符权重相同,那么样式会遵循就近原则,哪个选择符最后定义,就采用哪个选择符的样式,与挂class名的先后顺序无关。 为了保证样式容易被覆盖,提供可维护性,css选择符需保证权重尽可能低。

15. 如果不确定模块的上下margin特别稳定,最好不要将它写到模块的类里,而是使用类的组合,单独为上下margin挂用于边距的原子类(例如mt10、mt20)。模块最好不要混用margintop和marginbottom,统一使用margintop或marginbottom。

16. 拆分模块技巧:1.模块与模块之间尽量不要包含相同的部分,如果有相同部分,应将它们提取出来,拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下,做到尽可能简单,以提高重用性。

17. 触发hasLayout一般情况用zoom:1就行了,但当用dhtml的时候,可能失效,这时用position:relative就行了。
18. 布局最基本的元素:块级元素(常见:div,p,form,ul,ol,li)和行内元素(span,strong,em)等。 块级元素:独占一行,默认情况下,其宽度自动填满父元素宽度(即使设置了宽带也会独占一行)。 行内元素:不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下,才会换行,其宽度随元素的内容而变化(没有上下边距,只有左右边距)。 可以用display:inline/block,切换。

19. ie6、7不支持display:inline-block,但行内元素可以用此属性触发hasLayout(是ie浏览器为解析盒模型而设计的一个专有属性,它的设计初衷是用于块级元素的,如果触发行内元素的hasLayout,就会让行内元素拥有一些块级元素的特性),从而模拟出inline-block的效果,然后再用*vertical-align控制文字的垂直对齐。但这样做用hack,所以不推荐。

20. 排列地板砖一样的布局的元素时,尽量用给每个元素用相同的类来实现,如果最左边的元素间距和右边的有区别可以给所有元素套一个父层,然后设置其右边距为负就行了。

21. 如果一个类中有些部分会经常变化,我们可以将这个经常变化的部分抽离出来单独设成一个类,然后用组合来实现最终样式。

22. 可以用(function(){})(),这样的匿名函数来避免全局变量冲突。让js不产生冲突,需要避免全局变量的泛滥,合理使用命名空间以及为代码添加必要的注释。可以定义一个全局对象,然后用其属性来定义全局变量,同时结合命名空间(即类似,GLOBAL.A.xx,和GLOBAL.B.xx之类的)。

四、常见问题
1. ie只有a支持hover,并且注意a里要有href才行。

2. IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法加上display:inline

3. 如果存在文字在层居中的问题,水平方向可以用text-align代替,垂直方向可以用line-height来控制,如果只是控制上边距,就用padding-top。这样可以避免在ie6上的某些不必要的错误。

4. ajax传参数时,汉字一定要用encodeURIComponent(string),编码一下,要不然可能变成乱码中文在ie6里。

5. ie6下select元素会以窗口形式显示的,这是ie6的一个bug,所以当你设置一层为相对或绝对定位时,select仍然会浮在那个层之上。 解决方法,用一个和那个层同样大小的iframe放在test下面,select上面,用iframe遮住select。



最后推荐两本书吧,上面很多技巧都是来自于里面《css权威指南》、《如何编写高质量的代码》,有些是实际工作中自己的一些心得,前辈的指点。还有一句话:“你对所学东西理解深度,决定了你所站的高度。”



本文版权归黑马程序员web前端开发学院所有,欢迎转载,转载请注明作者出处,谢谢!
作者:黑马程序员web前端培训学院;
首发:http://www.itcast.cn/web/

javaee

python

web

ui

cloud

test

c

netmarket

pm

Linux

movies

robot

http://www.itcast.cn/subject/uizly/index.shtml?seozxuids

14天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

15天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

8天免费试学

基础班入门课程限时免费

申请试学名额

20天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

0天免费试学

基础班入门课程限时免费

申请试学名额

12天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

5天免费试学

基础班入门课程限时免费

申请试学名额

10天免费试学

基础班入门课程限时免费

申请试学名额
在线咨询 我要报名