css中使用CLASS来设计网页布局
作者:Dodo 发布时间:2007-10-30 13:01:00
标签:class,布局,css
我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧
我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服
举个例子:
比如布局中的左栏
首先它的属性有:是左栏,宽度,背景颜色,字体颜色等
1.首先会定义一个class,比如:.layout,主要用来控制页面整个的大小
.layout{width:98%;margin:0 auto;text-align:left;}
2.然后会定义3个基本布局Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
我把2栏布局也归类于3栏布局,因为3栏布局中,左右栏的宽度分别为0的时候,3栏就变成了2栏.
我们写基本布局代码的时候,最好还是写成3栏格式.
3.对应布局Class,定义需要的风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素
.class_l{background:#ff0;margin-right: -150px;width:150px;}
.class_m{background:#f00;margin:0 140px 0 150px;}
.class_r{background:#00f;margin-left: -140px;width:140px;}
布局class只有一套,风格class可以定义很多.比如,要中栏里面在做一个小的2栏布局就可以再定义一个风格class
.mid_l{background:#ff0;margin-right: -100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}
4.将布局class和风格class结合起来,在代码这样引用
<div class="l class_l"></div>
<div class="l mid_l"></div>
将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,如果需要再特殊定义,你可以给这个div取一个id来定义.
其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为
.hide{display:none}
然后需要的时候,class="xxx hide"来引用,很方便.
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- Win7或Windows server 2008中IIS7支持ASP+Access解决方法:1. 让IIS7支持ASPWin7或Window
- 从我们论坛中收集了这段HTML制作页面需要最大化、最小化时可以借鉴参考。最大化效果:<OBJECT id="max
- 做前端也有几年时间了,不敢说能把他看地多透,但是多多少少还是有些自己的东西。下面以 Tudou.com 的首页为例,总结总结。就制作而言,我
- 今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处,
- 很久以前做的东西,发出来大家玩玩!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
- 今天我要为大家介绍的是XPath,XPath是导航和查询XML文档的语言。我们从一个函数开始。UpdateXML()函数我们已经花了很多时间
- 这一段要毕业,得折磨自己两个月....这段时间还是会摆弄了javascript的.大致在下面两个方面: 1.javascript的
- 没有使用动态语句直接报错 错误的 代码如下:alter proc testpapers as begin declare @tems nva
- 1:下载FCKEditor编辑器下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor;这里可以随便自己喜好,但
- 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。<div id="
- [原文地址] VS 2008 Performance Improvements[原文发表时间] Thursday, September 27
- 最近关于浏览器的最重要的事情就是IE的极光0day漏洞了,这个漏洞导致包括Google在内的多家美国公司受到黑客的攻击,当然也有很多网站被黑
- 各大云计算提供商(亚马逊、谷歌和微软)目前都使用了键/值存储方式。然而,在San Francisco召开的MSDN开发者大会上,微软宣布他们
- MSSQL随机数 MSSQL有一个函数CHAR()是将int(0-255) ASCII代码转换为字符。那我们可以使用下面MS SQL语句,可
- 在SQL查询中,关键词Like可提供模糊查询功能,它通常与通配符一起使用。1 Like条件适用数据库字段类型 &nbs
- 今天在论坛上面看到有些兄弟不知道HTC是什么东西。小生在这里稍微说一下。从5.5版本开始,Internet Explorer(IE)开始支持
- ps:不曾想还有那么好用的方法。汗一个先。Div即父容器不根据内容自适应高度,我们看下面的代码:<div id="main&
- 首先是最常规的方法:<p id="para" title="cssrain demo!" on
- WinHttp; // Microsoft WinHTTP Services, version 5.1Alias HTTPREQUEST_P
- 互联网上不计其数的信息本质上都是一个一个的HTML文档组成的,通过链接将它们串联起整个互联网。这就犹如骨肉之于人体一样,只有通过经脉才能将它