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

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

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

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

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

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

如何学习DIV+CSS(Web标准)制作网页

本文和大家重点讨论一下如何学习DIV+CSS制作网页,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. 如何学习DIV+CSS制作网页 我接触的很多人都问,如何学习Web标准制作网页呢?我想每一个刚刚接触web标准的人都会问这样的问题,我就根据自己的经验总结. 1.不要一味使用DW等工具设计网页,去熟悉(X)HTML语言和CSS语言 因为web标准对代码的要求提高了,没有对xhtml代码没有一定的了解是无法通过校检的.DW工具也可以使用,但

学习网页制作应该注意的网站设计的四点矛盾

因为工作需要,昨晚将另一位网页设计师的设计作品生成了页面,折腾了一通宵,我脑细胞成几何倍数减少,完成了工作,不免有些牢骚要发. 我认为网站是为人民服务的,网站的优劣,内容是关键,而设计能排在第二就不错了.一个网站的设计不仅需要的是美观,更需要的是配合内容的编排以及其它更多方面,例如浏览速度及浏览方便性.如果您同意以上观点,请继续看下文. 因为网站的设计不仅需要美观,所以产生了不少矛盾,挑几个主要的矛盾来分析: 一. background背景图像的矛盾 由于千篇一律的单色背景早已产生了视觉疲劳,因

网页制作教程:活动页面的网站设计案例

文章描述:巧妙制作活动网站设计 对于许多组织来说,留下各种不同的活动或展览,包括节日或会议,来的时候,简单的传单,论坛和传统的横幅广告停止有效工作.无论事件变得广为流行,它提供更多的信息,不仅仅是一个简单的简要说明,还是组织者要使其更加现代化,利用当代各种手段,例如允许使用网上登记或销售数字门票. 最终会出现扩大的必要性.在这种情况下,创始人往往诉诸创建活动的网站,因为它很长一段时间一直是伟大的和成熟的仪器.精心组织和精心设计的网站快速,轻松地告知一个大的目标受众即将举行的活动,让在旅途中的门票

DIV+CSS网页制作布局技术漫谈

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

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