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核心支持比较好)。
1155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
