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

教程Tag：暂无Tag,欢迎添加,赚取U币!

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

　　颖儿的经验值得我们大家学习，也可以借鉴。不过这思路需要各位注重。
　　可在短期有效果。但会有很大的问题。主要是：
　　为了表现层的东西，在内容层增加了不必要的代码。
　　假如需要重构，你能保证还需要这么多的CLASS么。

　　没有必要为一个元素设置这么多类（class）。
　　可以在CSS中应用群组选择器，对样式一致的元素进行批量定义。
　　颖儿只是举个例子，可以在不考虑重构的情况下，让文件体积最小。
　　那样写是想给各位一个思路，没必要重写好多!

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

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

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

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

示例代码 [www.mb5u.com]

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

　　这个样式很重要，是我在网上看到的。加上这个样式，就不用给div定义高了。其作用主要是为了清除浮动。
　　未清除浮动，FF没能获取容器的高度，所以边框和背景会出错。外边距也跟着出错。可能布局也会受到强烈的干扰。主要是由于对浮动的理由不同所造成的。只要合理的嵌套与清除浮动，即可避免此问题。

示例代码 [www.mb5u.com]

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里这个样式很常用

示例代码 [www.mb5u.com]

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

　　下面这个是字体样式

示例代码 [www.mb5u.com]

.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;}

　　这个是文字链接样式

示例代码 [www.mb5u.com]

a{color:#3a76ce;text-decoration:none;}
(这个是网站里,默认的凡是代链接的都是这个颜色)
a:hover{text-decoration:underline;}
(这个是网站里凡是代链接的样式表现形式,鼠标移上去出下划线)

下面这几个是自己随意定义的,网站里用的比较多的.假如有非凡的你可以在子样式里定义.

示例代码 [www.mb5u.com]

a.red{color:#FF3131;}
a.gray{color:#656565;}
a.blue{color:#2C7FFF;}
a.xhx{ text-decoration:underline}
(这个是代下划线的,假如你的这个链接样式,在鼠标没有移上去时就有下划线时,就加上这个.
因为class="(这个里可以用多个样式)"

　　例如:<a class="red xhx" herf="#">您好</a>
　　这个样式就是红色的代下划线的.假如不加xhx那就是红色的不代下划线样式,只有鼠标移上去之后才会出下划线!
　　分开写,这样可以套用多个文字样式,这样重复性少很多!

　　下面这个是图片链接样式

示例代码 [www.mb5u.com]

img{vertical-align:middle; border:none;}
(写上这个图片会默认的在文字中间,要不然图片和文字会对不齐)
a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}
a.img45 img,img.img45 { border:1px solid #ccc; padding:1px;width:45px; height:45px;}
a.img60 img,img.img60 { border:1px solid #ccc; padding:1px;width:60px; height:60px;}
a.img90 img,img.img90 { border:1px solid #ccc; padding:1px;width:90px; height:90px;}
a.img150 img,img.img150 { border:1px solid #ccc; padding:1px;width:150px; height:150px;}
a.img260 img,img.img260 { border:1px solid #ccc; padding:1px;width:260px; height:260px;}
a.img300 img,img.img300 { border:1px solid #ccc; padding:1px;width:300px; height:300px;}
a:hover img.img20,a:hover img.img45,a:hover img.img60,a:hover img.img90,a:hover img.img150,a:hover img.img260,a:hover img.img300{border:1px solid #357CCA;padding:1px;}
a:hover{color:357CCA;padding:0px;}

　　比如你的图片大小比较多,你可以象我这样写,把图片大小的样式写义出来,然后在用到的时候直接用就可以
　　我定义这个是:图片代边框,而且边框里面与图片之间有一象索的距离.当鼠标移上去边框变颜色

示例代码 [www.mb5u.com]

a.img20 img,img.img20 { border:1px solid #ccc; padding:1px;width:20px; height:20px;}

　　例如:这个,为什么后面有个(img.img20) ,这个是不代链接的,在图片后加上这个样式,图片上就会有边框而且不代链接a.img20 img,这个是给图片代链接用的<a class="img20">图片</a>这样图片就会代链接
　　还有就是你网站里经常用到的框架比较多的把它写出来,写好后下边要做的工作就是把你写的这些样式,
另做一个html页面,把你这些样式都在html页面里做出来,分好栏目!

　　例如:文字样式文字链接样式图片样式框架样式常用样式
　　都做好后,当你浏览时,页面显示的效果就是你写的样式的效果.这些工作做完后你就可以给你的网站进行修理了!
　　当你需要用到共有里的样式时,你就打开那个html页面,找相对应的那个样式!直接拿过去套用就可以了,不用再去css里找了!
　　这样方便!而且还能直接看到效果~