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

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

时间: 2024-09-30 13:08:35

用标准件的方式来组装网页DIV布局的相关文章

用标准件的方式来组装网页DIV布局-WEB标准网站设计心得_CSS/HTML

有这样一个想法,不知道可行么 例子: 布局中的左栏,它的属性有:{居左,宽度,背景色,字体等等} 如果把每个属性都做成一个标准件,然后这样组装起来使用 class="float width height background font padding....",通过多个class的标准件的引用来完成页面布局样式 先按需要定义好标准件如: float标准件 .l{float:left} .r{float:right} .cl{clear:left} ... width标准件 .w200{

网页div不同行显示,是因为什么

问题描述 网页div不同行显示,是因为什么 就是这个网站首页下面一个红色框合并到上面的大红色框 <!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">

div布局-设置有背景图片的&amp;amp;lt;div&amp;amp;gt;块中怎么开发出一个白色的块?

问题描述 设置有背景图片的<div>块中怎么开发出一个白色的块? 我用一个图片添加为一个 的背景,然后想在这个块中再添加一个白的的块,但是这个快没法变为白色. 谢谢回答. 解决方案 贴代码,或者贴效果图. 解决方案二: 不知道你想要什么样的效果,在上面再加一个div就好了啊 解决方案三: 代码贴一下,这样不知道你要干什么 解决方案四: 浮上去一个白色的块就可以了啊 解决方案五: 我也是初学者 看看吧 不一定对 <!doctype html> <div style='backg

DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

实例详细讲解DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

基于XHTML的DIV+CSS网页制作布局技术

css|xhtml|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边  它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div>

常用DIV+CSS网页制作布局技术技巧

css|技巧|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml代码: 以下是引用片段:<div id="wrap"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二列&l

做网页,用DIV布局好还是table布局好?

网页布局 做网页,用DIV布局好?还是table布局好??请问他们的优缺点各是什么呢?div相对table布局来说,调试起来要麻烦多了.因为要考虑各种浏览器下的css支持标准兼容性. 实际上,布局时根据需要来决定,倾向于table表示数据,div用来布局. div,table都是HTML标签,怎么用,只要表达给网站浏览者信息就足够了,如何组织信息是设计者的问题. 表格代码冗长,维护麻烦,如今推行WEB标准,用丰富的标签设置更灵活,维护也更方便,当然包括TABLE和DIV. 如今DIV的滥用程度似

div 模块 网页编写-编写网页DIV模块总是下移

问题描述 编写网页DIV模块总是下移 我定义了一个大的DIV里面包含两个整体的DIV模块内容.我想实现的是把大的DIV隐藏起来,用户点击的时候大的DIV宽度慢慢增长,然后内容显现出来,现在的问题是第二个DIV总是跑到第一个DIV的下边去,用了很多方法都实现不了,求助. 解决方案 你也不上代码,谁知你到哪一步了 慢慢增长的都实现了吧,用jquery animate可以达到很好效果 关于DIV跑下面去了,那是布局问题 你可以设置两个div都float:left;这样就一排了 但如果外框div从太窄变