首页 » 建站技术 » 浏览内容

用标准件的方式来组装网页DIV布局


2006-07-19 08:03:15 6,553 0 发表评论 字体: 作者:C.K.
标签: css语法

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

From:http://blog.donews.com/dodo/archive/2006/06/22/924069.aspx

有这样一个想法,不知道可行么

例子:
布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等}
如果把每个属性都做成一个标准件,然后这样组装起来使用
class=”float width height background font padding….”,通过多个class的标准件的引用来完成页面布局样式
先按需要定义好标准件如:

float标准件
.l{float:left}
.r{float:right}
.cl{clear:left}


width标准件
.w200{width:200px}
.w300{width:300px}

background标准件
.red{background:red}
.black{background:#000}
.white{background:#fff}

根据需要引用
class=”l w200 red”[居左,宽度为200,背景红色]
class=”r w200 white” [居右,宽度为200,背景白色]

我现在自己写代码,最多就2个class来定义一个布局样式,感觉很方便

=========================================================

hsolive 发表于2006-06-22 2:31 PM  IP: 218.80.72.198, 10.6.32.*
嗯,其实这个方法已经被太多数人采用了,CSS要考虑整体布局,相同的类用继承,这样的好处是方便,节省代码,提高速度,而且对于版式的更换也更为容易!

robinham 发表于2006-06-22 3:10 PM  IP: 61.149.156.109, 10.6.32.*
在这里学到很多,我需要这样的人才

Aether 发表于2006-06-22 3:12 PM  IP: 61.152.141.142, 10.6.32.*
这等于是把样式写进了结构,
无法达成样式和结构分离的话,
在后期维护时会遇到巨大的阻力。

Catwell 发表于2006-06-22 9:37 PM  IP: 220.234.5.49, 127.0.0.*
所谓DIV布局是为了通过CSS将样式与结构分离,DIV样式定义有CLASS和ID两种,W3C认为一个页面只能有一个ID,可以有多个CLASS,我认为在布局时,对于架构的设计应该使用ID进行分开定义,具体的样式则如楼主所著使用CLASS,这样才能实现修改CSS而对整个页面进行结构性的变化。如果仅仅是把wdith=100定义成w100,那么这样的样式引用不就成了为了引用而引用,把真正DIV布局的关键给放弃了。

jedicxl 发表于2006-06-23 9:42 AM  IP: 58.100.86.42, 127.0.0.*
这和用table布局有什么区别呢?
重新改版的时候,xhtml文件还是需要重新写过。
博主不过是把table的名称换成了div而已。

dodo 发表于2006-06-23 2:08 PM  IP: 219.236.180.11, 127.0.0.*
楼上说的有道理,如果把定位属性写在id的样式里面呢,其他不变呢

枫岩 发表于2006-06-25 11:04 AM  IP: 219.142.247.230, 127.0.0.*
width标准件
.w200{width:200px}
.w300{width:300px}

background标准件
.red{background:red}
.black{background:#000}
.white{background:#fff}

我极力主张不要使用这种命名方式:将具体的属性值写在命名之中。
这对日后的修改维护将造成极大的限制,假如:
.w200{width:200px}
修改成:
.w200{width:250px}
则此时的 w200 的命名将失去它的本身的意义

我个人认为:“共性使用class控制,个性交给id负责”。
也就是说:
对于页面中用于结构布局的主要的HTML区块(DIV),每个区块(DIV)都各有其ID。
只有这些区块(DIV)之间存在多个共性(float width background font … )时,我才会建一个class,将这些共性封装在该class中。

只有当某个特定区块的CSS属性的值,与封装在class中对应的CSS属性的值不相同时,再通过id来为其单独定义个性化的CSS属性。
例如:
有N个DIV,各自ID依次为:SubBox_1,SubBox_2,SubBox_3, … , SubBox_N。这N个DIV都引用了同一个class=”SubBox”,除了SubBox_1的背景为红色时,其余N-1个DIV的背景都为蓝色。CSS则可写成:
.SubBox {background:#00f; … }
#SubBox_1 {background:#f00; … }
注:
对于同一个HTML元素,同时使用了id和class,且在CSS中id和class都同时定义同一个属性时,将以id占优先权--正是因为这一优先,才大大方便了用id来控制个性。

我常用的一种用于结构布局的CSS和HTML写法:

主体模块

侧栏模块

另外要说一下的是:
为用于布局主体HTML区块,定义了各自的id,不仅有利于用CSS来控制个性化的风格,也可方便于用JS来进行相应的DOM操作。

网站统计 Statistics

  • 创建时间: 2005年1月3日 距今5041 天
  • 日志总数: 2461
  • 评论总数: 630
  • 标签总数: 654
  • 链接总数: 273
  • 最后更新: 2018-8-31 17:57:04
  • 您是本站第 14063840 位访客

广告区 Guǎng Gào