请讨论,这样的定义作为底层是否合理?
时间:2011-06-17
来源:互联网
在网站重构、页面编写方面从事4年有多,一直在精益求精思考如何的定义能让我们页面构成更合理、效率更高、冲突更少、兼容性优。整合过许多CMS系统、dz系统、Phpwind系统。研究过他们CSS分布及定义,从而
感觉从pw系统的样式吸取思想和启发,一下是我提取和根据实际所整理的一个底层base.css样式包,请大家多给予意见。
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{cursor
ointer;}/*鼠标小手型*/
.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}/* 行高类 */
感觉从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{cursor

.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
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28