建一个个人网站,iis添加网站,商务网站建设的第一步,弹出全屏视频网站怎么做一#xff0c;编辑器的选择#xff0c;推荐webstorm#xff0c;绝对的神器。不要用dw了#xff0c;它最骄傲的所见即所得其实没什么用#xff0c;因为根本就不准#xff0c;代码提示也不人性话#xff0c;不方便。Webstorm的方便之处#xff08;目前用到的#xff09;…一编辑器的选择推荐webstorm绝对的神器。不要用dw了它最骄傲的所见即所得其实没什么用因为根本就不准代码提示也不人性话不方便。Webstorm的方便之处目前用到的 1.可以分屏左右同时编辑两个文件比如左边编辑html右边编辑它的css/js。 2.代码提示很人性话分级结构也很清洗。 3.方便查找如ctrl点击类名就可自动定位到该css样式。 4.支持自定义模版这样快速开始完成一些经常用到的代码。 5.支持个性化主题字体等。 6.强大的插件库自己去选吧。 7 .ctrl/,注释所选区域。 目前暂时就发现这些自己去发现吧这有个软件学习地址Webstorm入门指南 二布局。提到布局最头疼就是浏览器兼容性现在才发现其实很多兼容性其实是很容易避免的只要做到你对自己的每一句代码都知道它的意义和作用还有避免用一些有兼容性的样式属性就行了很多情况都可以不用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;解决。 有动画的层最好设置overflowhidden以免层里面的内容在外层宽高改变时撑出层外。 8. 写js效果时一定要注意先分析好效果的行为尽量用最简单通用性的代码。分析步骤可以是1.先把要实现的功能一步一步的写在纸上即自然语言2.再根据自然语言翻译成机器语言用jquery写的代码一定要注意代码的可移植性、通用性。 9. a标签的四种状态的排序问题可以用love hate 原则即llinkovvisitede hhoveraactivete顺序写错可能出现点击后hover样式失效。 10. 一般情况下建议尽量使用class少用id。 11. css编码风格多行式和一行式。 多行式可读性强但使行数过多编辑需要来回拖动滚动条影响开发速度增大css文件大小。 一行式可读性稍差有效减小css文件行数有利于提高开发速度同时减小css文件大小。 一行式逐渐成为主流。 12. css sprite即把多个甚至所有的图标都放在一张图里然后用背景定位来控制图标的显示。 使用难点图片如何排列能够紧凑同时保证不会影响扩展性。 优点减少http请求数减小服务器压力。 缺点影响开发速度大大降低了可维护性。 是否使用取决于网站流量对于流量不大的网站来说css sprite带来的好处并不明显而付出的代价是巨大的不划算。 13. 定义有hover伪类的样式时多定义一个它的hover类这样有助于js调用生成current的效果如定义btn{xxx}btnhoverbtn_hover{xxx}。 14. 低权重原则避免滥用子选择器(即类似#test span这样的选择符)。 css的选择符是有权重的当不同选择符的样式设置有冲突时会采用权重高的选择符设置的样式。 规则html标签的权重是1class的权重是10id的权重是100.如“div em”的权重是112“strong.demo”的权重是10111“#test.red”的权重是10010110. 如果css选择符权重相同那么样式会遵循就近原则哪个选择符最后定义就采用哪个选择符的样式与挂class名的先后顺序无关。 为了保证样式容易被覆盖提供可维护性css选择符需保证权重尽可能低。 15. 如果不确定模块的上下margin特别稳定最好不要将它写到模块的类里而是使用类的组合单独为上下margin挂用于边距的原子类例如mt10、mt20。模块最好不要混用margintop和marginbottom统一使用margintop或marginbottom。 16. 拆分模块技巧1.模块与模块之间尽量不要包含相同的部分如果有相同部分应将它们提取出来拆分成一个独立的模块。2.模块应在保证数量尽可能少的原则下做到尽可能简单以提高重用性。 17. 触发hasLayout一般情况用zoom1就行了但当用dhtml的时候可能失效这时用positionrelative就行了。 18. 布局最基本的元素块级元素常见div,p,form,ul,ol,li和行内元素span,strong,em等。 块级元素独占一行默认情况下其宽度自动填满父元素宽度即使设置了宽带也会独占一行。 行内元素不会独占一行相邻的行内元素会排列在同一行里直到一行排不下才会换行其宽度随元素的内容而变化没有上下边距只有左右边距。 可以用displayinline/block切换。 19. ie6、7不支持displayinline-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传参数时汉字一定要用encodeURIComponentstring编码一下要不然可能变成乱码中文在ie6里。 5. ie6下select元素会以窗口形式显示的这是ie6的一个bug所以当你设置一层为相对或绝对定位时select仍然会浮在那个层之上。 解决方法用一个和那个层同样大小的iframe放在test下面select上面用iframe遮住select。转载于:https://www.cnblogs.com/qiaoxinming/p/8414770.html
