码迷,mamicode.com
首页 > Web开发 > 详细

CSS布局原则

时间:2017-05-08 23:15:40      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:额外   变化   页面   ie6   政府   元素   修改   css   理想   

网站建设离不开页面设计与编程的结合,这里主要讲编程,下面就来看看关于DIV+CSS云南网站制作页面布局的九大原则:

原则一:一般要写兼容IE6,IE7和FIREFOX的网页,最省事的方法就先写适合IE7的样式,因为IE7和FIREFOX很接近,这样判断浏览器兼容的工作量就能减小到最少。

原则二:逐步叠加的方式,如果需要用这个样式的模块很多,并且会存在些许的不同,千万不要把样式一步写到位,最好把框架性的先写好,细节性的留到第二个步骤,甚至第三个步骤,当然最好步骤不要超过三步,这样很不利于维护。由若干个二级定义对一级定义进行补充,这样的既可以减少代码,又可以减少繁多的CLASS命名。

原则三:从总到分。顺序应该是这样:总体需要用到的>>结构>>模块>>二级模块>>细节;并且这个文档最不容易修改的处于最上端,频繁用于修改的在末端。最忌讳即兴发挥,这样写出的东西经不起推敲,稍有变化就要忙得乱成一团。结构性的东西应该慎重精细。

原则四:尽量把能够放在一组的小图标或者图片放在一个图片文件里,这样的好处有很多。

1、 图片文件的总量会变小;

2、 利于下载,太多的小图片下载效果是不理想的,常常会发现这个图片出来,那个没出来,这样在写样式的时候只需要写一个总体的,对于具体的要显示的只需要标一个位置,非常省时间,样式也很精炼;

3、 显而易见,这样做非常便于管理,替换或新增的时候工作量很小。

原则五:切图的原则,应该切大的图绝不切小,应该切小的绝不切大,能够用颜色代替的绝不切图。把一个大图切成很多份并不一定能够加快页面的显示速度,相反会浪费很多不必要的带宽。不光要控制图片文件的多少,还要考虑到这样切会不会造成页面增加许多额外的代码。

原则六:图片的命名规则,定一个规则,准备用一辈子。这样以后你看CSS文档的时候,你只要看到某个图片名称的时候,你不需要看太多你就知道这个图片的用途、位置;这样可以最大限度的保证样式的重用性。

原则七:在该不该用表格的问题上,我的态度是,涉及多行多列的特别是列宽有不固定的,坚决用表格,这个没啥好讨论的,千万不要为了DIV而DIV,用一大陀CSS去模仿一个表格是很极端的行为。当然也有例外的,需要灵活处理,但千万别模仿什么表格。

原则八:尽可能不把样式直接写到元素的标签里(除非这个样式出现的机率特别小,有相当程度的偶然性),把样式直接写到元素标签里是一种工作范畴意义上的无政府行为,非常不负责。

原则九:尽量不要用ID来定义或索引样式,ID的唯一性比较高,且用ID索引样式效率非常低而且兼容性的问题也比较明显。 

CSS布局原则

标签:额外   变化   页面   ie6   政府   元素   修改   css   理想   

原文地址:http://www.cnblogs.com/zhangxiaofei/p/6828102.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!