Web前端技巧_HTML+CSS+JavaScript (个人经验)
看这篇文章前,你首先要对Web前端的主要技术有一定的了解,例如 HTML、CSS、JavaScript。
Web前端的组成:
现代在网页技术,分为三个层面:内容(HTML)+表现(CSS)+行为(JavaScript),在这里我也把这三个技术分开来说。
1.内容(HTML):
1.1 使用 XHTML 1.0 或 HTML5 规范的代码,网页最终是由浏览器来解析的,而浏览器又是根据Web规范来解析网页的,所以,遵守规范可以确保在各种浏览器中都能正确解析,但如果碰到了浏览器的Bug那就另外算了,那不是我们的错,是浏览器的错。
1.2 布局采用先上下后左右的结构原则,尽量不要出现一个容器里面有上下左右多种布局的元素,这样可以减少各种浏览器的布局排版的差异,为什么呢?一个左右要浮动上下又要清除浮动,麻烦,二个,内容要修改的时候,发现一个高了或者矮了,不对齐了,又要调整几个块的。那左中右怎么办?先分左右再从其中一个再分左右。
1.3 全页布局,一般分为 Topbar(顶栏) ,Header(头部) ,Nav(导航栏) ,Content(内容) ,Footer(脚部),也就是对于页面整体从上往下看。如果还有横幅广告(Banner)和帮助栏(像淘宝那种),就另外再加。
1.4 整理自己的模板库,自己写过的代码Copy一份,以后就不用再重新写了,例如头部,注册表单,网银列表等。
2.表现(CSS):
2.1 设定默认样式,每种浏览器都会为元素设定一套初始样式(默认样式),设定默认样式可以减少各种浏览器渲染样式的差异。常用的设置有:
body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,form,input,textarea,p,th,td{margin:0;padding:0;} /* 默认内边距和外边距设置为0 */
caption,th{text-align:left;} /* 默认对齐方式设置为左对齐 */
img{border:0;} /* 去掉带链接图片的边框线 */
ul{display:block;} /* 设置列表为块显示 */
li{list-style:none;} /* 去掉默认添加的项目符号 */
table{border-collapse:collapse;border-spacing:0;} /* 去掉表格的内边框线和单元格间隔 */
body{font-family:Verdana, Geneva, sans-serif;font-size:12px;color:#000;line-height:12px;} /* 设置文本字体 */
a:link, a:visited{font-size:12px;text-decoration:none;font-family:Verdana, Geneva, sans-serif;color:#000;line-height:12px;} /* 设置链接字体 */
a:hover{text-decoration:underline;}
2.2 为元素赋予样式特征,尽量少用ID而用类来设定。
2.3 不用内联样式,全部样式通过外部文件引用,并且放在<head>里面。
2.4 合理分类,如公共样式、首页样式、分类页样式、搜索页样式,需要时才引用。
2.5 模块化设定样式,一般规则是 ".mod_name .class_column tag" (模块名+布局名+元素名/类) ,如:
.header 头部
.header .left h1 头部左边的标题
.search .keyword 搜索栏的关键词输入框
.nav a 导航栏的链接
.mod_good .good_name 产品模块的产品名
.user_info a 用户信息的链接
2.6 有自己一套自定义元素类,例如表单控件有很多种,很多都是 input 元素,只对文本输入框设定样式怎么办?设一个自定义类 .input_text ,然后设定高度、宽度、圆角都行,加文本框的时候习惯加上自己的类。
2.7 浮动问题,如果一个上下排列的容器,包含的内容全部是浮动,那么该容器就要清除浮动了(clear:both),否则下面的容器有可能跑到右边去了。另外,如果某元素设置了浮动,那么,最好给他一个宽度,否则,IE6下会变成竖排文字,但是,如果我要自适应宽度怎么办?很简单,里面的文字加一个<span>并设为块显示(display:block)。
2.8 定位问题,相对定位(relative)能使元素变成一个定位容器,如果使用 left top 则可以相对于它本来的位置进行偏移,绝对定位(absolute)能使元素从文档流抽出作为一个独立的层(也是一个定位容器),那么他就不再占用其容器的空间,再加上margin-left 和 margin-top 则可以相对于原来的位置定位,如使用 left top right bottom 则可以相对于定位容器进行绝对定位,定位容器就是最近的祖先定位节点(relative or absolute),如果没有则是document。定位容器有自己的显示范围,如果内容超出范围则隐藏(这个特征有点像Flash的遮罩效果)。常见的应用:头部里面的混排模块,弹出菜单,浮动按钮,浮动工具栏,焦点广告图。
2.9 边距问题,由外至内,由前至后。由外至内的方法是:父元素用内边距限制子元素,子元素用外边距限制兄弟元素,先设定内边距(padding)再设定外边距(margin);由前至后的方法是:前一个元素用右边距(margin-right)和下边距(margin-bottom)限制后一个元素。好处:模块调转顺序时不用再考虑谁排在最上面(左面),而且能解决IE6的双边距Bug。
2.10 溢出问题,凡是给元素设置块元素时,顺便设置上溢出隐藏(over-flow: hidden),防止IE6的溢出撑开问题。
2.11 整理自己的样式库,写过的样式Copy一份(包括图片),下次再需要改改就行了。
3. 行为(JavaScript)
3.1 使用JavaScript框架,我本人就喜欢用jQuery,当然了,如果是简单的特效,还是可以写纯js的。
3.2 整理自己的js库,这里不是叫你自己js框架,而是常用的特效,例如设为首页,加入收藏夹,表单检查,弹出菜单,广告图等。
HTML5
使用 HTML5 加上
<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
让 IE 正常识别 HTML5 标签,或者下载到自己网站引用也可以,当然了,Google 的服务器远比我们的快,做开发时才需要下载到本地。
CSS3
目前的原则是:低端用户正常显示,高端用户更好享受。
因为IE8以下版本均不支持CSS3属性,所以CSS3在现时只能做优化处理,等到IE8以下都被淘汰了的时候就可以毫无顾虑的使用了。当然了,你还可以用js检测IE8以下,提示用户升级,如果用户不在意外观享受的话那也不用管了。现在能做的是,在CSS2的基础上再添加更好的效果,如圆角、阴影、动画效果(目前Webkit核心支持比较好)。