我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧
我的想法是未来能这样:用标准件的方式来组装网页DIV布局

我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服
举个例子:
比如布局中的左栏
首先它的属性有:是左栏,宽度,背景颜色,字体颜色等

1.首先会定义一个class,比如:.layout,主要用来控制页面整个的大小
.layout{width:98%;margin:0 auto;text-align:left;}

2.然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把2栏布局也归类于3栏布局,因为3栏布局中,左右栏的宽度分别为0的时候,3栏就变成了2栏.
我们写基本布局代码的时候,最好还是写成3栏格式.

3.对应布局Class,定义需要的风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}

布局class只有一套,风格class可以定义很多.
比如,要中栏里面在做一个小的2栏布局
就可以再定义一个风格class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4.将布局class和风格class结合起来,在代码这样引用
<div class="l class_l"></div>
<div class="l mid_l"></div>
将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,如果需要再特殊定义,你可以给这个div取一个id来定义.

其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为
.hide{display:none}
然后需要的时候,class="xxx hide"来引用,很方便.

点击看我写的一个demo

代码:
 


25条评论

  1. 最终,含有语义的class标签还是进入了XHTML结构,是不妥的。

    或许可以应付一时之需,但是如果后期遭遇大规模的改版,

    那么所谓的布局CSS会被迫全部重写。

    还有考虑到以后面向移动终端、非浏览器终端呢?

  2. 学习…

  3. 继续跟踪你,呵呵,我也刚写了一篇。

    http://www.searchlab.cn/article.asp?id=105

  4. 如果不用class大规模改版就不需要重写吗???

  5. 呵呵, 一个网站能很好满足PC的需求已是不容易了. 偶觉得现在能做到这点的网站并不多.

    现在移动用户还少,不用担心,等网站觉得需要关注这批用户时,自会有办法的. 无论如何, class的方式在现在条件下已经是最大程度利用,复用了.

  6. 第一个链接的地址有点小错。

  7. 学习

  8. 学习

  9. 学习

  10. 学习

  11. 学习

  12. 学习

  13. 不错 有待深入 目前还比较粗浅 ~有这个想法已经算不错了

  14. 学习ing。

  15. 对于结构建议用ID,对于样式才用CLASS,你这样结合型的写法看上去很不错,其实违背了WEB标准原则。

  16. 博主很少用ID啊

    如楼上Catwell说说,对结构建议用ID。同时把语义赋予ID而不是class。

  17. 我还是主张:

    对于用于布局的主体结构--共性使用class控制,个性交给id负责

    极力反对的命名法:

    将具体的属性值写在class、id的命名中,这存在对后期的修改维护造成潜在的限制

  18. 学习学习。

  19. 请问DODO,CSS能用Dreamweaver做吗?你的水平实在比较高,佩服

  20. 你试试dw8,我没用过,据说可以

  21. 这种办法的好处~ 可以多处共享,避免太多的重复定义,简单的设计结构,不过和风格混合,不喜欢!

    如果网站复杂的话,这些定义会很复杂,CLASS到处是很多个属性,改动其中一个,也会影响其他,就这缺点!

    具体看网站的开发需求了~ 对吧:)

    创新不容易呀!大家一起努力!

  22. 布局和表现的分离在css中实现,写进xhtml中,我以为不妥。

    class="a b",b是及其珍贵的,因为不会有c,所以b的位置应该珍惜。

    上面说的个性赋予id,共性赋予class,我认为很正确。

    例如:

    <div id="HotShop" class="dataarea"></div>

    <div id="HotProduct" class="dataarea"></div>

    前面说的b有何用?预留给js进行特殊控制(解决冲突、增加特效等等),^_^。

  23. 代码冗余,写死在页面里面,换风格最好通过换.css文件来换,至于用ID还是CLASS,我认为框架用ID,因为ID优先级最高,被覆盖的机率少,小模块用CLASS,把骨架和需要变换风格的地方分离出来。骨架是一个CSS,只定义宽高是否浮动等,基本的成形样式。用什么边框,什么底色,字体大小等放在风格CLASS中。这是固定结构换样式的作法。

    如果不固定结构换模板,那共用的东西很少,基本上是重写CSS。

  24. 帮我看下 我的存档下面怎么会出现 "正在读取数据…"的字样 急急!!

  25. 枫岩 说得好。用语义命名class,就好像重新使用table的结果一样,把页面的代码定得死死的,不灵活。虽然在你制作网页时调用class时很方便,一目了然。

发表评论

评论也有版权!