global.css|reset.css(格式化样式)common.css(通用组件样式)layout.css(当前页面样式)清除本站所有页面的浏览器默认样式，保证初始样式在所有浏览器中保持一致。common.css（通用组件样式）一般一个网站所有页面的header和bottom样式都是一致的，长期不会有大的变化。改动大概是产品和运营经常需要增加或删除某些条目的需求，需要保证整个站点所有页面的header都被替换一次并生效。只要把头文件和相应的样式贴出来，就会立即生效，很快就会有回应。比如翻页、表单（输入框、按钮）等样式也都是全站统一的。将这些样式放在common.css中。如果哪天所有的按钮样式都要换，换一个就成功了。除了layout.css（当前页面样式）的公共组件之外的所有样式都写在这个样式文件中，保证每个页面都有一个独立的样式。页面html和css编写方式要模块化，以保证对项目频繁迭代的快速响应。为什么要保证每个页面都有独立的样式，还需要模块化？一定有和我有过相同经历的朋友。修改一行样式代码会影响整个页面甚至N页。搞了半天，还是不知道哪里出了问题，回到修改前的版本，没有问题。终于找到原因了，但是之前的样式改不了，更不能删除，只能添加。久而久之，css样式文件越来越大，最后不堪重负，不得不重写整个页面代码。其实global.css和common.css也可以合并成一个文件。毕竟格式化样式只有几十行代码，而且每个页面都会用到格式化样式、页眉样式和底部样式。这样每个页面只有2个样式：common.csslayout.css如果common.css中的组件太多，很多组件不常用，也可以这样做：heads.css(format,style,head,Bottom)common.css(常用组件样式)layout.css(当前页面样式)一般只有2种样式。当你需要使用组件时，只去链接组件样式，不会有太多问题。最后，不要把所有东西都塞进组件样式里。如果你有东西要写，你宁愿在每个页面上重复复制它，也不愿将它塞入组件样式中。有一天，你会发现组件样式多得吓人，而且很多都是无用的。/常用基础类1*//格式样式/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0}/textlayout,color/.f12{font-size:12px}.f13{字体大小：13px}.f14{字体大小：14px}.f16{字体大小：16px}.f20{字体大小：20px}.fb{字体粗细：粗体}.fn{字体-weight:normal}.t2{text-indent:2em}.red,a.red{color:#cc0031}.darkblue,a.darkblue{color:#039}.gray,a.gray{color:#878787}。lh150{line-height:150%}.lh180{line-height:180%}.lh200{line-height:200%}.unl{text-decoration:underline;}.no_unl{text-decoration:none;}/positioning/.tl{text-align:left}.tc{text-align:center}.tr{text-align:right}.fl{float:left;disp放置：内联}.fr{浮动：右;display:inline}.cb{clear:both}.cl{clear:left}.cr{clear:right}.vm{vertical-align:middle}.pr{position:relative}.pa{position:absolute}.abs-right{position:absolute;right:0}.zoom{zoom:1}.hidden{visibility:hidden}.none{display:none}/长度高度/.w10{width:10px}.w20{width:20px}.w50{width:50px}.w90{width:90px}.w100{width:100px}.w200{width:200px}.w250{width:250px}.w500{width:500px}.w800{width:800px}.w{width:100%}.h50{height:50px}.h80{height:80px}.h100{height:100px}.h200{height:200px}.h{height:100%}/边距/.m10{边距：10px}.m15{边距：15px}.m30{边距：30px}.mt5{边距顶部：5px}.mt10{边距顶部：10px}.mt15{边距顶部：15px}.mt50{边距-top:50px}.mt100{margin-top:100px}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb100{margin-bottom:100px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml30{margin-left:30px}.ml50{margin-left:50px}.ml100{margin-left:100px}.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr50{margin-right:50px}.mr100{margin-right:100px}.p10{padding:10px;}.p15{padding:15px;}.p30{padding:30px;}.pt5{padding-top:5px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pt30{padding-top:30px}.pt50{padding-top:50px}.pb5{padding-bottom:5px}.pb100{padding-bottom:100px}.pl5{padding-left:5px}.pl10{padding-left:10px}.pl50{padding-left:50px}.pl100{padding-left:100px}.pr5{padding-right:5px}.pr10{padding-right:10px}.pr15{padding-right:15px}.pr100{padding-right:100px}/通用基础类2*//版权所有2008TSXMLOVE。版权所有。/{padding:0px;margin:0px;text-align:left;font-family:Arial,Verdana,Tahoma,"宋体",Helvetica,sans-serif;line-height:150%;}body{字体大小:14px;text-align:center;color:#000000;background-color:#DEEBF3;background-image:url(../Images/body_bg.jpg);background-repeat:repeat-x;}table{border-collapse:collapse;}td{padding:3px;}img{border:none;}input{padding:1px;vertical-align:middle;line-height:normal;}.main-box{margin-right:auto;margin-left:auto;width:960px;clear:both;zoom:1;overflow:hidden;background-color:#CCCCCC;}.text-overflow-hidden{white-space:nowrap;word-spacing:normal;letter-spacing:normal;overflow:hidden;}.box-align-center{margin-right:auto;margin-left:auto;}/css也定义了超链接的四种状态sequence/a:link,a:visited{text-decoration:none;color:#1F376D;}a:hover,a:active{text-decoration:underline;color:#BD0A01;border:none;}/*以上语句分别定义了“链接、访问过的链接、鼠标悬停时、鼠标点击时”的样式。注意一定要按照上面的顺序写，否则显示的可能和你想象的不一样。请记住他们的命令是“LVHA”。*/ul{clear:both;overflow:hidden;width:100%;}ul,li{list-style:none;}.valign{display:table-cell;*display:inline;zoom:1;vertical-align:middle;}.text{word-wrap:break-word;overflow:hidden;word-break:break-all;}/======================CSS垂居中=======================/.holder{width:740px;height:300px;border:1pxsolid#777;text-align:center;display:table-cell;vertical-align:middle;}/以下样式针对IE/.edge{width:0;height:100%;display:inline-block;vertical-align:middle;}.container{vertical-对齐：中间；显示：内联块；}/===============================================//CSSHack/.class{background-color:#FFFF00;/所有浏览器/background-color:#00FF00;/IE*/_background-color:#00FFFF;/IE6/======万能浮动关闭======/.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clear{display:inline-block;}/forIE/Mac///.clear{zoom:1;/*触发hasLayout*/display:block;/*重置IE/Win的显示*/}/*只有IE可以在条件注释中看到并阅读此CSS规则。永远不要在CC中使用普通的HTML注释，否则它会过早关闭。*//======通用浮动闭包2======/.overflow-hidden{overflow:hidden;}/controlbackgroundoverflow/.equal-height{margin-bottom:-32800px;padding-bottom:32800px;}/控件高度够小//======universalFloatclosed3======/.clear{height:0px;清除：两者；字体大小：0px；行高：0px；缩放：1；}
