有这样一个想法，不知道可行么
例子：
布局中的左栏，它的属性有：｛居左，宽度，背景色，字体等等｝
如果把每个属性都做成一个标准件，然后这样组装起来使用
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,背景白色］
我现在自己写代码，最多就２个class来定义一个布局样式，感觉很方便
嗯，其实这个方法已经被太多数人采用了，CSS要考虑整体布局，相同的类用继承，这样的好处是方便，节省代码，提高速度，而且对于版式的更换也更为容易！
hsolive —— 2006年06月22日 @2:31 pm
在这里学到很多，我需要这样的人才
robinham —— 2006年06月22日 @3:10 pm
这等于是把样式写进了结构，
无法达成样式和结构分离的话，
在后期维护时会遇到巨大的阻力。
Aether —— 2006年06月22日 @3:12 pm
所谓DIV布局是为了通过CSS将样式与结构分离，DIV样式定义有CLASS和ID两种，W3C认为一个页面只能有一个ID，可以有多个CLASS，我认为在布局时，对于架构的设计应该使用ID进行分开定义，具体的样式则如楼主所著使用CLASS，这样才能实现修改CSS而对整个页面进行结构性的变化。如果仅仅是把wdith=100定义成w100，那么这样的样式引用不就成了为了引用而引用，把真正DIV布局的关键给放弃了。
Catwell —— 2006年06月22日 @9:37 pm
这和用table布局有什么区别呢？
重新改版的时候，xhtml文件还是需要重新写过。
博主不过是把table的名称换成了div而已。
jedicxl —— 2006年06月23日 @9:42 am
楼上说的有道理，如果把定位属性写在id的样式里面呢，其他不变呢
dodo —— 2006年06月23日 @2:08 pm
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操作。
枫岩 —— 2006年06月25日 @11:04 am
这样的结果有很多欠缺，不能完全做到表现与数据分离，譬如做一些调整的时候 仍然需要去调整代码
Mouce —— 2006年08月22日 @5:41 pm
并不是每一个浏览器都兼容读取多个class，有些旧版本的浏览器仅仅支持两个class的调用
Mouce —— 2006年08月22日 @5:42 pm
全球最牛网页布局方法:
//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>
diyism —— 2006年09月19日 @10:59 am