WEB2.0网页制作标准教程(9)第一个CSS布局实例
作者:阿捷 来源:w3cn 发布时间:2008-02-19 19:05:00
阅读上一篇教程:WEB2.0网页制作标准教程(8)CSS布局入门
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。
注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:
1.确定布局
w3cn的最初设计草图如下:
用表格的设计方法的话,一般都是上中下三行布局。
用DIV的话,我考虑使用三列来布局,成为这样
2.定义body样式
先定义整个页面的body的样式,代码如下:
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代码的作用在上一天的教程有详细说明,大家应该一看就明白。定义了边框边距为0;背景颜色为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不重复;定义了字体尺寸为12px;字体颜色为#666;行高150%。
3.定义主要的div
初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别说我偷懒,先实现简单的,增加点信心嘛!)。分别定义左中右的宽度为200:300:280,在CSS中如下定义:
/*定义页面左列样式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定义页面中列样式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定义页面右列样式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意:定义中列和右列div我都采用了POSITION: absolute;,然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键,我采用了层的绝对定位。定义中间列距离页面左边框200px,距离顶部0px;定义右列距离页面左边框500px,距离顶部0px;。
这时候整个页面的代码是:
这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?
4.100%自适应高度?
为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"height:100%;",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。
猜你喜欢
- 一切从一个糟糕的浏览器开始,它完全不支持 XHTML。什么是 MIME Type? 为什么这么说呢?首先,我们要了解浏览器是如何处理内容的。
- 以前有过一篇类似的文章, 讲的比较简单只有三个插件而已, 所以这篇文章将全持续更新.jQuery UI 大名顶顶, 不用介绍, 它的各个控件
- JS操作二进制很麻烦,而且一直没有一个好的无损压缩工具来实现纯文本的压缩。所以钻研了一段时间的gzip,后来发现还是仅用 LZ77 比较容易
- 用下列代码可在控制弹出NTLM验证窗口:<% Response.Status = "401 Unauthorized&quo
- 代码如下:arr = array(12,52,14,43,24,58,15,64,24,57,17,56,45)&nbs
- 这篇论坛文章着重介绍了Access数据库出现0x80004005问题的解决方法,更多内容请参考下文:项目做了三个月了,终于也差不多完成了,昨
- 代码如下: '排序 Function Sort1(ary) Dim KeepChecking,I,FirstValue,Second
- <%@LANGUAGE="xxx" CODEPAGE="936"%>一般又分为<%
- 我们在做表单的时候经常会使用到这样的结构:<fieldset> <lege
- 我们可用正规表达式来寻找并替换URL和邮件地址为活动的超级链接。用到的主要函数就是InsertHyperlinks(inText),语法为:
- 按单字节计算字符串的长度,汉字算两个字节。<script type="text/JavaScript"
- 在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有
- 在不久前的一天,当我为了解决一个语法问题来翻阅VBscript文档时,偶然间发现在了下面的一句话: &nb
- 简单asp加载access数据库,并生成XML,然后再将XML数据加载进LIST组件范例学习。演示:http://www.taoshaw.c
- 原文:Five quick JavaScript tips真是五个很quick的小提示:1.只在<form>元素上使用submi
- HTTP_X_FORWARDED_FOR与REMOTE_ADDR的区别.在Request.ServerVariables中并没有HTTP_X
- if rs.bof then 表示:当前指针的位置是在第一行记录之前 if rs.eof then 表示:当前指针的位置是在最后一行记录之后
- 自己有一套模块化的思路,想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的,从我接收第一个po
- 相信为数不少的系统管理员每天都在做着同一样的工作——对数据进行备份。一旦哪一天疏忽了,而这一天系统又恰恰发生了故障,需要进行数据
- 当一个页面上有一百个表单项,你是怎么获取上面的值勤的?这是一段简单的代码,你试试这段代码,试过后,欢迎留言说一下你的想法?index.asp