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

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

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

赞 (0)

相关推荐

  • 简要了解jQuery移动web开发的响应式布局设计

    简要了解jQuery移动web开发的响应式布局设计

    响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们

  • web前端开发中常见的多列布局解决方案整理(一定要看)

    web前端开发中常见的多列布局解决方案整理(一定要看)

    多列布局 多列布局在web前端开发中也是较为常见的,比如常见的三列.四列及以上,列的布局使得单一的页面可以展示更多分门别类的内容.这里会提到的多列布局有两列定宽加一列自适应.多列不定宽加一列自适应.多列等分三种. 两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变.简易实现代码如下: 两列定宽加一列自适应 本案例中每一列高度为自适应,即高度和内容高度一致,左列和中列宽度为100px,右列宽度为自适应,通过float浮动布局结合块级元素的特性来实现.需要注

  • Web移动端Fixed布局的解决方案

    Web移动端Fixed布局的解决方案

    移动端业务开发,iOS 下经常会有 fixed 元素和输入框(input 元素)同时存在的情况. 但是 fixed 元素在有软键盘唤起的情况下,会出现许多莫名其妙的问题. 这篇文章里就提供一个简单的有输入框情况下的 fixed 布局方案. iOS下的 Fixed + Input BUG现象 让我们先举个栗子,最直观的说明一下这个 BUG 的现象. 常规的 fixed 布局,可能使用如下布局(以下仅示意代码) <body> <!-- fixed定位的头部 --> <header

  • web标准布局实例教程，用定位轻松解决CSS复杂布局

    web标准布局实例教程，用定位轻松解决CSS复杂布局

    我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------

  • WEB标准网页布局中尽量不要使用的HTML标签

    Do not use these html elements in html pages. Presentational elements should not be used. Support for some elements has been (or will be) deprecated; they should not be used. Don't Use These Tags Presentational b big hr i small sub sup tt Deprecated

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

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

  • DIV+CSS网页制作布局技巧学习

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

  • JS实现网页Div层Clone拖拽效果

    JS实现网页Div层Clone拖拽效果

    本文实例讲述了JS实现网页Div层Clone拖拽效果.分享给大家供大家参考.具体如下: 这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • 脚本控制三行三列自适应高度DIV布局的代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML lang=en xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><

  • 脚本控制三行三列自适应高度DIV布局

    这个例子是用JS脚本控制并列DIV的高度,通常在DIV布局中,自适应高度一直是比较头疼的问题,一般大都采用背景图.外套DIV.右栏覆盖左栏......来解决.现在加了脚本后,简单多了,假如有三个水平并列的DIV,fbox.mbox. sbox,只要在<body>标签中写入:onload="P7_equalCols('fbox','mbox','sbox')",测试条件:ie5.x.ie6.0.FF1.03.NS7.2.opera8.01.最终效果. JS代码:版权归原作者 

  • js防止DIV布局滚动时闪动的解决方法

    本文实例讲述了js防止DIV布局滚动时闪动的方法,分享给大家供大家参考.具体方法如下: 最近接触页面性能的东西,有很多细微又原始的内容,比如浏览器渲染.资料非常多,所以选一些做节译,备忘. JavaScript多次写.读DOM就会发生「布局颠簸」,引起文档重排(reflow – the process of constructing a render tree 复制代码 代码如下: from a DOM tree1). // 读 var h1 = element1.clientHeight; /

  • XHTML下css+div布局总结 超强推荐

    xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的.科适应的格式,不仅仅应用在web上,也可以应用在任何地方.标准称为可能.XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写.在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML.它实现HTML向XML的过渡.CSS是Cascading Style Sheets层叠样式表的缩写.纯CSS布局与结构式XHTML相结合能帮

  • element中el-container容器与div布局区分详解

    用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-aside:侧边栏容器. el-main:主要区域容器. el-footer:底栏容器. 以上组件采用了 flex 布局,elemen-ui官方文档链接: http://element-cn.eleme.io/#/zh-CN/component/container 此外,el-container 的子元

  • div布局的自由伸展三栏式版面的代码

    自由伸展的三栏式版面 自由伸展的三栏式版面(Three Column Stretch)(页首) #leftbox { position: absolute; left: 10px; width: 180px(150px?); } 这个栏段的背景是利用 body 卷标设定的图片,以垂直方向重复贴上所产生的.图片的宽度和中间栏段的左边界(margin)相等,高度为20px,这样可以减少图片重复的次数,加快演算上色的速度. 这一栏的内容(#leftbox)以绝对位置(absolutely positi

  • 推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页

    作者:唐国辉 实例网页网址:http://www.hsptc.com/css2.html前言       如果你想尝试一下不用表格来排版网页,而是用CSS来排版你的网页,也就是常听的用DIV来编排你的网页结构,又或者说你想学习网页标准设计,再或者说你的上司要你改变传统的表格排版方式,提高企业竞争力,那么你一定要接触到的一个知识点就是CSS的盒子模式,这就是DIV排版的核心所在,传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容,改用CSS排版后,就是通过由CSS定义的大小不一的盒子和

随机推荐