网页BETWAY登录学习总结

导语 BETWAY登录作业了一段时刻经历总结,献给做BETWAY登录的同学,期望对咱们有所协助。一,修正器的挑选,引荐webstorm,肯定的神器。不要用dw了,它最自豪的所见即所得其实没什么用,由于底子就禁绝,代码提示也不人道话,不方
BETWAY登录作业了一段时刻经历总结,献给做BETWAY登录的同学,期望对咱们有所协助。
 
一,修正器的挑选,引荐webstorm,肯定的神器。不要用dw了,它最自豪的所见即所得其实没什么用,由于底子就禁绝,代码提示也不人道话,不便利。Webstorm的便利之处(现在用到的),
 
1.能够分屏,左右一起修正两个文件,比方左面修正html,右边修正它的css/js。
 
2.代码提示很人道话,分级结构也很清洗。
 
3.便利查找,如ctrl+点击类名,就可主动定位到该css款式。
 
4.支撑自界说模版,这样快速开端完结一些常常用到的代码。
 
5.支撑个性化主题,字体等。
 
6.强壮的插件库,自己去选吧。
 
7 .ctrl+/,注释所选区域。
 
sublime修正器,简略灵敏轻量级,支撑代码主动完结、代码高亮、快速生成,以及更多好用的插件,也能够装备scss。sublime修正器装备
 
二,布局。说到布局最头疼便是阅览器兼容性,现在才发现其实许多兼容性其实是很简略防止的,只需做到你对自己的每一句代码都知道它的含义和作用,还有防止用一些有兼容性的款式特点就行了,许多状况都能够不必hack,相同能完结多阅览器兼容。
 
1.  不要用hack,必定有更好的处理方法。许多状况都是由于代码结构不够好才会呈现兼容性问题。
 
2. 考虑怎样用最少的标签及特点完结页面。
 
3.了解结构,体现,行为别离的含义。
 
4. 布局前必定要先剖析页面结构,磨刀不误砍柴工,剖析怎样用更好的方法完结,理清思路后,再切图写代码。
 
5. 深刻了解类的概念,重视归类元素,多总结,坚持代码风格(包括前后代码的空格方位、多少,以及命名风格)严厉共同而且尽量简练。
 
6. 多用组合,少用承继。
 
7. 命名空间:驼峰命名法用于差异不同单词,划线用于标明从属关系。
 
8.       低权重准则------防止乱用子挑选器(即相似#test span这样的挑选符)。
 
三、技巧。
 
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。

IE6与CSS款式兼容问题汇总
 
    终究引荐两本书吧,上面许多技巧都是来自于里边《css威望攻略》、《怎样编写高质量的代码》,有些是实践作业中自己的一些心得,长辈的点拨。还有一句话:“你对所学东西了解深度,决议了你所站的高度。”

《css威望攻略》pdf下载
 
http://www.nucmc.com/ true 网页BETWAY登录学习总结 http://www.nucmc.com/show-28-650-1.html report 4680 BETWAY登录作业了一段时刻经历总结,献给做BETWAY登录的同学,期望对咱们有所协助。一,修正器的挑选,引荐webstorm,肯定的神器。不要用dw了,它最自豪的所见即所得其实没什么用,由于底子就禁绝,代码提示也不人道话,不方
TAG:BETWAY登录 网页
本站欢迎任何方式的转载,但请有必要注明出处,尊重别人劳动成果
转载请注明: 文章转载自:BETWAY官网网 http://www.nucmc.com/show-28-650-1.html
BETWAY官网网 Copyright 2012-2014 www.nucmc.com All rights reserved.(晋ICP备13001436号-1)