CND8首页 - 软件下载 - 驱动下载 - 新闻资讯 - 软件学院 - 广告联系 - 设为首页 - 加入收藏
软件 | 软件分类 | 网络工具 | 系统工具 | 多媒体类 | 图形图像 | 应用软件 | 行业软件 | 教育教学 | 安全相关 | 编程开发 | 源码下载 | 电子书库 | 游戏娱乐 | 发布软件
驱动 | 硬件驱动 | PC机驱动 | 本本驱动 | 数码驱动 | 手机软件 | 办公驱动 | 硬件工具 | 新闻中心 | 软件资讯 | 硬件资讯 | 业界新闻 | 软件应用 | 安全相关 | 游戏娱乐
学院 | 操作系统 | 办公软件 | 聊天软件 | 图形图像 | 多 媒 体 | 程序开发 | 网页设计 | 网络编程 | 数 据 库 | QQ 专区 | Photoshop专区 | WindowsXP专区 | ASP PHP JSP
学院首页 | 操作系统 | 办公软件 | 聊天软件 | 图形图像 | 多 媒 体 | 程序开发 | 网页设计 | 网络编程 | 数 据 库
搜索:  热门搜索:QQ MSN Skype PhotoShop Flash 3DMax WindowsXP WindowsVista ASP PHP JSP VB
您的位置:首页 -> CSS教程 -> CSS的网页制作技巧:提高CSS可阅读性

CSS的网页制作技巧:提高CSS可阅读性

CND8学院 CSS教程 发布日期:2011年11月26日


  也就是总结一下,良好的书写习惯对于后期的维护有着很让人惊诧的作用;同时,书写习惯决定了阅读的难易程度。而这里的写法,基本上也就是对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 }

点这里查看更多CSS教程


 分类导航
操作系统 | Windows2000 | WindowsXP | Vista | Windows7
办公软件 | Office | Word | Excel | PowerPoint | Access
聊天软件 | QQ | MSN | Skype
图形图像 | PhotoShop | FireWorks | CorelDraw | AutoCad
     | Illustrator
多 媒 体 | Flash | 3DMax | Maya | Authorware
程序开发 | VB | VC | Java | C/C++ | Delphi
网页设计 | Dreamweaver | FireWorks | HTML | Javascript
     | CSS
网络编程 | ASP | PHP | JSP | .NET | Ajax | XML
数 据 库 | Access | MySQL | SQL Server | Oracle
CND8首页 | 软件分类 | 驱动下载 | 资讯中心 | 软件学院 | 网站地图 | 下载帮助 | 本站声明 | 发布软件 | 广告联系 | 设为首页 | 加入收藏
Copyright © 2003-2010 CND8.com 版权所有 中国下载吧 ,联系QQ:289740304
苏ICP备05005485号