网站首页  注册会员  本站免费电影 留言板  繁體中文

 

您现在的位置: 陈鹏个人网站 >> 电脑应用 >> 网络应用 >> 网页制作 >> 正文
 

   
专 题 栏 目
相 关 文 章

Adobe Flash CS4 试用版
Photoshop CS3新特性概览
PPS网络电视(PPStream)
腾讯TT4.5版发布 RSS可订
PPS网络电视2.6.85.7400
PPS网络电视(PPStream)
PPS网络电视2.6.84.6000
Win Live Messenger 安全
Adobe Illustrator CS3蓄
闪客一族看过来 FlashCS

 
CSS网页制作技巧:提高CSS可阅读性           
CSS网页制作技巧:提高CSS可阅读性
作者:陈鹏 文章来源:eNet 点击数: 更新时间:2009-9-12 2:52:33
 




 

也就是总结一下,良好的书写习惯对于后期的维护有着很让人惊诧的作用;同时,书写习惯决定了阅读的难易程度。而这里的写法,基本上也就是对css从了解到熟悉到主动思考的一个过程。

  刚开始的写法

  .menu ul li

  {

  color:#087C00;

  width:495px;

  height:25px;

  border-bottom:1px solid #087c00;

  text-align:center;

  line-height:25px;

  }

  或者

  .menu ul li{

  color:#087C00;

  width:495px;

  height:25px;

  border-bottom:1px solid #087c00;

  text-align:center;

  line-height:25px;}

  然后写着写着成这样了:

  .menu ul li{color:#087C00;width:495px;height:25px;border-bottom:1px solid #087c00;text-align:center;line-height:25px;}

  再写啊写的成这样了:

  .menu ul li{color:#087C00;border-bottom:1px solid #087c00;height:25px; line-height:25px;text-align:center;width:495px}

  不要以为这两个是一样的。其实不一样。按照属性第一个字母在26个英文字母中的顺序进行书写。具备良好的阅读性。

  现在基本上我都是采用以上的方法。很多时候,单行看不出效果。如果多了呢:

  .menu{float:left;width:510px;padding-top:18px}

  .menu ul{padding-left:20px}

  .menu ul li{color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px}

  .menu ul li.bornone{border-bottom:0px}

  .menu ul li a{color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none}

  .menu ul li a:hover{color:#000!important;text-decoration:underline}

  .menu ul li a:visited{}

  .menu ul li span{margin:0 0.7em!important}

  这样,对于不自信或对css不大熟悉的人来说,一般情况下都容易患上代码恐惧症。

  换个方式吧:

  .menu {float:left;width:510px;padding-top:18px}

  .menu ul {padding-left:20px}

  .menu ul li {color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px}

  .menu ul li.bornone {border-bottom:0px}

  .menu ul li a {color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none}

  .menu ul li a:hover {color:#000!important;text-decoration:underline}

  .menu ul li a:visited {}

  .menu ul li span {margin:0 0.7em!important}

  可能屏幕不够宽,那么看图片吧:

  



  再来:

  .menu { float:left;width:510px;padding-top:18px }

  .menu ul { padding-left:20px }

  .menu ul li { color:#087C00;border-bottom:1px solid #087c00;height:25px;line-height:25px;text-align:center;width:495px }

  .menu ul li.bornone { border-bottom:0px }

  .menu ul li a { color:#087C00!important;font-size:12px; font-weight:bold;text-decoration:none }

  .menu ul li a:hover { color:#000!important;text-decoration:underline }

  .menu ul li a:visited { }

  .menu ul li span { margin:0 0.7em!important }

  图:

  


  你还有什么好方法?

文章录入:陈鹏    责任编辑:陈鹏 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
     
     
     
     
     

    Copyright © 2007 - 2009 chenpeng123.com All Rights Reserved
    本站所有文章,软件等均来自网络收集,不代表本站观点,仅供学习和研究使用。如有侵犯您的版权,请联系我们,本站将立即删除。
    鲁ICP备07014697号
    你是本站第 位访客