|
CSS网页布局经验：CSS框架思维雏形与CSS文件精简
可在短期有效果。但会有很大的问题。主要是：
为了表现层的东西，在内容层增加了不必要的代码。
如果需要重构，你能保证还需要这么多的CLASS么。
没有必要为一个元素设置这么多类（class）。
可以在CSS中应用群组选择器，对样式一致的元素进行批量定义。
颖儿只是举个例子，可以在不考虑重构的情况下，让文件体积最小。
那样写是想给各位一个思路，没必要重写好多!
假如在你切完所有图之后,假如你切的网站是娱乐性的网站.(重复性比较多)当你所有工作已经做完时,你的上头告诉你,要把所有网站里的内容的样式缩写!而且要统一~样式里面所有的重复的没用的,都删,就象给所有样式脱了一层外套,让它越简单越好!
这时你不用烦脑,很简单!来看看我是如何做的:
先观查你网站里经常用到的样式,重复性比较多的,把它写在共用的样式里!这个样式表里放的都是共有的,在任何html页面里只要能用到这个共用样式表里的样式,都可以把它链过去!
例如:
这是一些常用的属性在共用里写好,在子样式里就不用再去定义了
Example Source Code [www.xxcss.com]
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
这个样式很重要，是我在网上看到的。加上这个样式，就不用给div定义高了。其作用主要是为了清除浮动。
未清除浮动，FF没能获取容器的高度，所以边框和背景会出错。外边距也跟着出错。可能布局也会受到强烈的干扰。主要是由于对浮动的理由不同所造成的。只要合理的嵌套与清除浮动，即可避免此问题。
Example Source Code [www.xxcss.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里这个样式很常用
Example Source Code [www.xxcss.com]
.fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
下面这个是字体样式
Example Source Code [www.xxcss.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;}
这个是文字链接样式
Example Source Code [www.xxcss.com]
a{color:#3a76ce;text-decoration:none;}
(这个是网站里,默认的凡是代链接的都是这个颜色)
a:hover{text-decoration:underline;}
(这个是网站里凡是代链接的样式表现形式,鼠标移上去出下划线)
下面这几个是自己随意定义的,网站里用的比较多的.如果有特殊的你可以在子样式里定义.
Example Source Code [www.xxcss.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那就是红色的不代下划线样式,只有鼠标移上去之后才会出下划线!
分开写,这样可以套用多个文字样式,这样重复性少很多!
下面这个是图片链接样式
Example Source Code [www.xxcss.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;}
比如你的图片大小比较多,你可以象我这样写,把图片大小的样式写义出来,然后在用到的时候直接用就可以
我定义这个是:图片代边框,而且边框里面与图片之间有一象索的距离.当鼠标移上去边框变颜色
Example Source Code [www.xxcss.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里找了!
这样方便!而且还能直接看到效果~
|
