CSS网页布局经验：CSS框架思维雏形与CSS文件精简

　　颖儿的经验值得我们大家学习，也可以借鉴。不过这思路需要各位注意。

　　可在短期有效果。但会有很大的问题。主要是：

　　为了表现层的东西，在内容层增加了不必要的代码。

　　如果需要重构，你能保证还需要这么多的CLASS么。

　　没有必要为一个元素设置这么多类（class）。

　　可以在CSS中应用群组选择器，对样式一致的元素进行批量定义。

　　颖儿只是举个例子，可以在不考虑重构的情况下，让文件体积最小。

　　那样写是想给各位一个思路，没必要重写好多!

　　假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性比较多)当你所有工作已经做完时,你的上头告诉你,要把所有网站里的内容的样式缩写!而且要统一~样式里面所有的重复的没用的,都删,就象给所有样式脱了一层外套,让它越简单越好!

　　这时你不用烦脑,很简单!来看看我是如何做的:

　　先观查你网站里经常用到的样式,重复性比较多的,把它写在共用的样式里!这个样式表里放的都是共有的,在任何html页面里只要能用到这个共用样式表里的样式,都可以把它链过去!

　　例如:

　　这是一些常用的属性在共用里写好,在子样式里就不用再去定义了。

　　Example Source Code
　　.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

　　这个样式很重要，是我在网上看到的。加上这个样式，就不用给div定义高了。其作用主要是为了清除浮动。

　　未清除浮动，FF没能获取容器的高度，所以边框和背景会出错。外边距也跟着出错。可能布局也会受到强烈的干扰。主要是由于对浮动的理由不同所造成的。只要合理的嵌套与清除浮动，即可避免此问题。

　　Example Source Code
　　p{ margin:0px;padding:0px;margin-top:5px;}
　　form,h1,h2,h3,h4,h5,h6,h7 { margin:0px; padding:0px;}
　　ul,li{list-style:none;margin:0px;padding:0px;}

　　下面这个是浮动样式,在div+css里这个样式很常用：

　　Example Source Code
　　.fleft {float:left;}
　　.fright {float:right;}
　　.cleft{clear:left}
　　.cright{clear:right}
　　.cboth{clear:both}

　　下面这个是字体样式：

　　Example Source Code
　　.font_bold{ font-weight:bold;}
　　.font_14{font-size:14px;}
　　.font_red{ color:#FF3131;}
　　.font_blue{ color:#0000CC}
　　.font_gray{ color:#999;}
　　.font_10{ font-size:10px;}

[1] [2]