+ -
当前位置:首页 → 问答吧 → 请讨论,这样的定义作为底层是否合理?

请讨论,这样的定义作为底层是否合理?

时间:2011-06-17

来源:互联网

在网站重构、页面编写方面从事4年有多,一直在精益求精思考如何的定义能让我们页面构成更合理、效率更高、冲突更少、兼容性优。整合过许多CMS系统、dz系统、Phpwind系统。研究过他们CSS分布及定义,从而
感觉从pw系统的样式吸取思想和启发,一下是我提取和根据实际所整理的一个底层base.css样式包,请大家多给予意见。
引用:
/* Css Reset */
html{color:#333;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,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,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
body{font-size:12px; font-family:"宋体";}
a{ text-decoration:none; color:#333;}
a:hover{text-decoration:underline; color:c00;}

/* Css base */
.cc{*zoom:1;}
.cc:after{content:'\20';display:block;height:0;clear:both;visibility: hidden;}
.c{clear:both;}
/* Font - size */
.f9{font-size:9px;}
.f10,small,.small{font-size:10px;}
.f12{font-size:12px}
.f14{font-size:14px}
.f16{font-size:16px}
.f18{font-size:18px}
.f20{font-size:20px}
/* Font-color */
.white,.white a, a.white{color:#fff}
.red, .red a, a.red{color:red;}
.blue,.blue a, a.blue{color:#004499}
.gray3{ color:#333;} .gray6{ color:#666;} .gray9,a.gray9{color:#999}
.green{color:#0E774A}
.fb{ font-weight:bold}.fn{ font-weight:normal} /*加粗、去粗*/
.tal{text-align:left}.tac{text-align:center}.tar{text-align:right}/*文字居左、居中、居右*/
/* Font-family */
.fver{ font-family:Verdana;}
.fari{ font-family:Arial;}
.fvista{ font-family:Microsoft YaHei}
.fsong{ font-family:SimSun;}
.fhei{font-family:SimHei}
/* layout */
.wrap{width:960px; margin-left:auto; margin-right:auto;}
.fr{float:right}
.fl{float:left}
.cp{cursorointer;}/*鼠标小手型*/
.w{white-space:nowrap}/*强制不换行*/
.hidden{display:none;}
.blk{ display:block;}
.pad{ padding:10px;} .pl10{ padding-left:10px;} .pt10{ padding-top:10px;} .pr10{ padding-right:10px;}  .pb10{ padding-bottom:10px;}/* 填充类 */
.mrg{ margin:10px;}  .ml10{ margin-left:10px;}  .mt10{ margin-top:10px;}  .mr10{ margin-right:10px;}  .mb10{ margin-bottom:10px;}/* 间距类 */
.lh20{line-height: 20px}.lh22{line-height: 22px}.lh24{line-height: 24px}.lh26{line-height: 26px}.lh28{line-height: 28px}.lh30{line-height:30px}/* 行高类 */

作者: vincentdesign   发布时间: 2011-06-17

我认为在网站页面(地方门户网站)编写中,把这些“原子类”分离为颗粒度最小,小得不能再分的定义,在页面制作过程中通过重新组合,能够完成形态各异的内容表现。认同这样的定义吗?

作者: vincentdesign   发布时间: 2011-06-17