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

例子:
布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等}
如果把每个属性都做成一个标准件,然后这样组装起来使用
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来定义一个布局样式,感觉很方便


10条评论

  1. 嗯,其实这个方法已经被太多数人采用了,CSS要考虑整体布局,相同的类用继承,这样的好处是方便,节省代码,提高速度,而且对于版式的更换也更为容易!

  2. 在这里学到很多,我需要这样的人才

  3. 这等于是把样式写进了结构,

    无法达成样式和结构分离的话,

    在后期维护时会遇到巨大的阻力。

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

  5. 这和用table布局有什么区别呢?

    重新改版的时候,xhtml文件还是需要重新写过。

    博主不过是把table的名称换成了div而已。

  6. 楼上说的有道理,如果把定位属性写在id的样式里面呢,其他不变呢

  7. 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写法:

    <style type="text/css">

    .BigBlock {width:778px;float:left;clear:both;}

    #Hd {background:#f00; … }

    #Bd {background:#f00; … }

    #Ft {background:#f00; … }

    </style>

    <div id="Wp">

    <div id="Hd" class="BigBlock"></div>

    <div id="Bd" class="BigBlock">

    <div id="BM">主体模块</div>

    <div id="BS">侧栏模块</div>

    </div>

    <div id="Ft" class="BigBlock"></div>

    </div>

    另外要说一下的是:

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

  8. 这样的结果有很多欠缺,不能完全做到表现与数据分离,譬如做一些调整的时候 仍然需要去调整代码

  9. 并不是每一个浏览器都兼容读取多个class,有些旧版本的浏览器仅仅支持两个class的调用

  10. 全球最牛网页布局方法:

    //table有显示效率的问题, div无法控制换行的问题, float有跳到下一行的问题, absolute又不容易重叠,

    //有办法兼容愚蠢的W3C(实际名称3WC)和微软而实现人类传统的从左到右从上到下的布局方法吗?这就是:

    //传统SPAN大法终极解决方案(兼容firefox):

    //不要用display:table-cell;取代display:-moz-inline-box;有水平对不齐的问题

    //不要去掉vertical-align:middle;因默认的baseline被ie理解为底线却被firefox理解为顶线

    //span div下的overflow保持hidden而不是auto时,可以去掉DOCTYPE声明

    //span下的overflow不能去掉(虽然span:inline-box下的overflow是无效的), 否则在firefox下访问含有该段代码的php页面时会出现无规律的盒子丢失现象

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <style>span{display:-moz-inline-box;display:inline-block;vertical-align:middle;overflow:hidden;}span div{overflow:hidden;}</style>

    <span><div style="width:700px;border:blue 1px solid;">

    <span><div style="width:200px;height:18px;border:red 1px solid;">aSame appearance in ie and firefox</div></span>

    <span><div style="width:200px;height:28px;border:red 1px solid;">ie and firefox</div></span><br>

    <span><div style="width:150px;height:18px;border:red 1px solid;">ie and firefox</div></span>

    </div></span>

    为了省事, 在firefox下插入div来crack的工作可以交由js来做:

    <script>

    if(document.addEventListener)

    {document.addEventListener(‘DOMContentLoaded’, ib_fix, false);

    }

    function ib_fix()

    {var spans=document.getElementsByTagName(’span’);

    for (i=0;i<spans.length;++i)

    {var spanContent = spans[i].innerHTML;

    var eleDiv = document.createElement(‘div’);

    eleDiv.style.pixelWidth = spans[i].style.pixelWidth;

    eleDiv.innerHTML = spanContent;

    spans[i].innerHTML = null;

    spans[i].appendChild(eleDiv);

    }

    }

    </script>

发表评论

评论也有版权!