DIV CSS网页设计布局六大原则

开发 前端
CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性的烦琐工作,增加页面的可维护性。

本文向大家描述一下DIV CSS网页设计布局六大原则,比如定位方式的布局一般指的是绝对定位,这种布局方式对页面布局的设计精确性要求十分高,遗憾的是绝对定位的布局方式的盒模型是固定高和宽的,无非自适应。

DIV CSS网页设计布局六大原则

1.样式的重用性

CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性的烦琐工作,增加页面的可维护性。例如,将某处表达样式、板块整体样式、文字颜色;甚至可以扩展到页面的模块化处理。

2.浮动与清除浮动

浮动式网页布局中永远的话题,很多浏览器的兼容性问题都是因为浮动而导致的,例如IE6.0的双倍间距的问题。浮动也是把双刃刀,兼容性的问题为其二产生为其而灭亡,善于利用浮动对于DIV CSS网页布局将会带来很到的帮助,例如使用负边距地方法对页面进行布局设计。

清除浮动浮动而出现,用来清理浮动导致的诸多问题。清除浮动的方式有很多。

3.定位方式的DIV CSS页面布局

定位方式的布局一般指的是绝对定位,这种布局方式对页面布局的设计精确性要求十分高,遗憾的是绝对定位的布局方式的盒模型是固定高和宽的,无非自适应。

4.不要过多使用ID选择符

ID在一个页面中出现的次数是一次,过多使用将失去样式的可重用性的特征,对于页面的可维护性也将大打折扣。

5.类选择符(class)及ID选择符使用字母+数字方式命名

类选择符Class及ID选择符的命名方式很多,最好的方式是阵对某个模块的功能阐述性的命名,例如,阵对主要内容区域,可以使用#mainBox或者.mainBox而不是使用#box1或者.box1。

不使用字母+数字的方式命名,在后期维护中可以阵对某个模块主要针对对象一目了然。

6.合理使用CSS布局,切勿盲目使用

CSS样式的主要功能是对页面结构样式的处理,避免只是为了试验一种技术或新技巧而采用CSS中的技巧去剥夺其他语言脚本的使用。

详文参考:http://www.csschina.net/a/jc/css_1019.html

【编辑推荐】

  1. DIV CSS网站布局八个小技巧
  2. JavaScript动态创建div属性和样式
  3. DIV CSS建站对浏览器兼容性和注意事项
  4. CSS2.0中page-break-after属性用法
  5. 解读DIV CSS网页布局中CSS无效十个原因
责任编辑:佚名 来源: csschina.net
相关推荐

2012-02-07 13:29:25

云计算HP

2022-08-07 23:37:53

测试软件开发自动化

2022-02-25 15:56:44

云计算架构基础设施

2022-05-31 21:08:41

云原生容器

2015-08-24 10:30:25

数据中心选址

2013-11-13 10:20:13

运维管理数据中心

2013-01-16 15:41:59

SDNJuniper

2012-02-06 10:28:21

云计算

2012-03-15 11:15:13

Java设计模式

2010-09-07 14:14:46

DIV+CSS

2014-07-26 09:56:43

WOT2014敏捷开发PO

2012-03-07 10:40:19

Java设计模式

2012-03-05 13:58:34

设计模式里氏置换

2012-03-07 11:03:13

Java设计模式

2018-11-02 15:05:19

IT运维故障操作

2010-08-16 13:46:20

DIV+CSS

2009-06-18 11:12:00

2010-09-14 13:49:38

CSS代码

2011-09-07 09:21:01

设计模式

2012-03-08 10:57:00

Java设计模式
点赞
收藏

51CTO技术栈公众号