您现在的位置:主页 > 网站制作 > CSS+DIV >

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

来源:建站吧 责任编辑:Jzq8 发表时间:2011-12-22 点击:
  
  CSS网页布局经验:CSS框架思维雏形与CSS文件精简


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

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

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

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

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

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

div css xhtml xml Example Source Code Example Source Code [www.mb5u.com] .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
  这个样式很重要,是我在网上看到的。加上这个样式,就不用给div定义高了。其作用主要是为了清除浮动。
  未清除浮动,FF没能获取容器的高度,所以边框和背景会出错。外边距也跟着出错。可能布局也会受到强烈的干扰。主要是由于对浮动的理由不同所造成的。只要合理的嵌套与清除浮动,即可避免此问题。

div css xhtml xml Example Source Code Example Source Code [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里这个样式很常用

div css xhtml xml Example Source Code Example Source Code [www.mb5u.com] .fleft {float:left;}
.fright {float:right;}
.cleft{clear:left}
.cright{clear:right}
.cboth{clear:both}
  下面这个是字体样式

div css xhtml xml Example Source Code Example Source Code [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;}
  这个是文字链接样式

div css xhtml xml Example Source Code Example Source Code [www.mb5u.com] a{color:#3a76ce;text-decoration:none;}
(这个是网站里,默认的凡是代链接的都是这个颜色)
a:hover{text-decoration:underline;}
(这个是网站里凡是代链接的样式表现形式,鼠标移上去出下划线)
下面这几个是自己随意定义的,网站里用的比较多的.假如有非凡的你可以在子样式里定义.

div css xhtml xml Example Source Code Example Source Code [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那就是红色的不代下划线样式,只有鼠标移上去之后才会出下划线!
  分开写,这样可以套用多个文字样式,这样重复性少很多!

  下面这个是图片链接样式

div css xhtml xml Example Source Code Example Source Code [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;}
  比如你的图片大小比较多,你可以象我这样写,把图片大小的样式写义出来,然后在用到的时候直接用就可以
  我定义这个是:图片代边框,而且边框里面与图片之间有一象索的距离.当鼠标移上去边框变颜色

div css xhtml xml Example Source Code Example Source Code [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里找了!
  这样方便!而且还能直接看到效果~

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      评价:
      表情:
      验证码:点击我更换图片

      推荐图文

      • Div+CSS布局入门教程-页面顶部制作之一
      • Div+CSS布局入门教程-页面布局与规划
      • 建站吧:精简高效的CSS命名准则和方法
      • CSS初学者技巧:谈CSS的标准和最佳示例-Div+CSS教程
      • Google谷歌的CSS前景图片合并技术-Div+CSS教程
      • WEB标准网页布局中HTML结构化漫谈-Div+CSS教程
      • CSS网页布局经验:CSS框架思维雏形与CSS文件精简-Div+CSS教程
      • CSSSprites工作原理及其对CSS布局的意义、优点和缺点介绍-Div+CS
      • CSS布局之再谈CSSDiv的居中实现方法-Div+CSS教程

      新闻关注排行榜

      热门推荐 最新推荐
      Alexa - 客户服务 - 联系方法 - 招聘信息 - 友情链接 - 网站地图 - TAG标签 - RSS订阅
      Copyright © 2010-2012 JZQ8.COM. 建站吧|建站去吧 版权所有
      冀ICP备09002514号
      冀ICP备09002514号 网络报警 企业法人营业执照 中国互联网协会 支付宝付款 网银在线付款