当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
CSS网页制作技巧:提高CSS可阅读性 | |||
2009-8-1 9:11:08 文/佚名 出处:网页教学网 | |||
也就是总结一下,良好的书写习惯对于后期的维护有着很让人惊诧的作用;同时,书写习惯决定了阅读的难易程度。而这里的写法,基本上也就是对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伪类选择器nth-child() css3教程:background属性调整增强 css教程:CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度 如何使用css约束一个层不可见? CSS的list-style解释 小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解 实例使用DIV+CSS制作圆角边框加阴影… |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |