看这篇文案前,你首要要对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 不消内联样式,所有样式经过外边文件引用,并且放在
里面。
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 ,而后设定高度
|