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

组合CLASS来完成网页布局风格


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

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

我是这样来做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}<br/>.m{width:auto}<br/>.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><br /><div class="l mid_l"></div>

    将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,如果需要再特殊定义,你可以给这个div取一个id来定义.

    其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为

    .hide{display:none}

    然后需要的时候,class=”xxx hide”来引用,很方便.

    看我写的一个demo

    代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>组合CLASS</title> <style> body, html { background:#fff; color: #000;     font-size:12px; margin:0; line-height:150%;padding:0px; text-align:center; }  /*布局的大框架,用来控制整体页面大小,尺寸由自己控制*/ #layout{width:98%;margin:0 auto;text-align:left;} /*页面左,中,右布局*/ .l{float:left} .r{float:right} .m{width:auto} /*页面左,中,右布局的class*/ .lclass{background:#ff0;margin-right: -150px;width:150px;} .mclass{background:#f00;margin:0 140px 0 150px;} .rclass{background:#00f;margin-left: -140px;width:140px;}  .l1{background:#dd0;margin-right: -200px;width:200px;} .m1{background:#ee0;margin:0 0 0 200px;} .l2{background:#dd0;margin-right: -50px;width:50px;} .m2{background:#ee0;margin:0 0 0 50px;} </style> </head> <body> <div id="layout">   <div class="l lclass">   Left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   </div>   <div class="r rclass">     <div class="l l2">Here</div>     <div class="m m2">There</div>   Right   <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   </div>   <div class="m mclass">   Middle     <div class="l l1">Here1</div>     <div class="m m1">There1</div>     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />   </div>  </div> </body> </html>

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

    Aether 发表于2006-06-22 3:18 PM  IP: 61.152.141.142, 10.6.32.*
    最终,含有语义的class标签还是进入了XHTML结构,是不妥的。
    或许可以应付一时之需,但是如果后期遭遇大规模的改版,
    那么所谓的布局CSS会被迫全部重写。

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

    robinham 发表于2006-06-22 4:14 PM  IP: 61.149.156.109, 127.0.0.*
    继续跟踪你,呵呵,我也刚写了一篇。
    http://www.searchlab.cn/article.asp?id=105

    spirit.moon 发表于2006-06-22 4:54 PM  IP: 219.232.42.114, 127.0.0.*
    如果不用class大规模改版就不需要重写吗???

    spirit.moon 发表于2006-06-22 4:56 PM  IP: 219.232.42.114, 127.0.0.*
    呵呵, 一个网站能很好满足PC的需求已是不容易了. 偶觉得现在能做到这点的网站并不多.
    现在移动用户还少,不用担心,等网站觉得需要关注这批用户时,自会有办法的. 无论如何, class的方式在现在条件下已经是最大程度利用,复用了.

    Liuh 发表于2006-06-22 5:51 PM  IP: 222.209.58.46, 127.0.0.*
    第一个链接的地址有点小错。

    水鱼 发表于2006-06-22 9:25 PM  IP: 60.177.60.244, 127.0.0.*
    不错 有待深入 目前还比较粗浅 ~有这个想法已经算不错了

    Catwell 发表于2006-06-22 9:47 PM  IP: 220.234.5.49, 127.0.0.*
    对于结构建议用ID,对于样式才用CLASS,你这样结合型的写法看上去很不错,其实违背了WEB标准原则。

    jedicxl 发表于2006-06-23 9:38 AM  IP: 58.100.86.42, 127.0.0.*
    博主很少用ID啊
    如楼上Catwell说说,对结构建议用ID。同时把语义赋予ID而不是class。

    枫岩 发表于2006-06-25 11:16 AM  IP: 219.142.247.230, 127.0.0.*
    我还是主张:
    对于用于布局的主体结构--共性使用class控制,个性交给id负责

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

    fengwuhenzhiguoke 发表于2006-06-27 6:14 PM  IP: 218.7.43.205, 127.0.0.*
    请问DODO,CSS能用Dreamweaver做吗?你的水平实在比较高,佩服

    dodo 发表于2006-06-29 12:31 PM  IP: 219.236.180.11, 127.0.0.*
    你试试dw8,我没用过,据说可以

    DANIEL 发表于2006-07-06 10:54 AM  IP: 220.113.45.*
    这种办法的好处~ 可以多处共享,避免太多的重复定义,简单的设计结构,不过和风格混合,不喜欢!

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

    具体看网站的开发需求了~ 对吧:)
    创新不容易呀!大家一起努力!

    爆牙齿 发表于2006-07-16 11:19 PM  IP: 60.191.62.*
    布局和表现的分离在css中实现,写进xhtml中,我以为不妥。
    class=”a b”,b是及其珍贵的,因为不会有c,所以b的位置应该珍惜。
    上面说的个性赋予id,共性赋予class,我认为很正确。
    例如:

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

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

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4855 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13458690 位访客

      广告区 Guǎng Gào