如何使用CSS来进行网页排版(二)

来源:网络时间:06-11-19 点击: 点击这里收藏本文

　　这时候整个页面的代码是：

　　以下是引用片段：

　　欢迎进入新《<a href=http://www.jzxue.com/Html/buju/ target=_blank>网页设计</a>师》:<a href=http://www.jzxue.com/Html/special/Special_divcss.htm target=_blank>web标准</a><a href=http://www.jzxue.com target=_blank>教程</a>及推广

　　页面左列

　　页面中列

　　页面右列

　　这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？

4.100%自适应高度?

　　为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。

第9天:第一个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%。

9 7 3 1 2 3 4 5 6 7 8 4 8 :

把此文章收藏到：　　　　　

相关教程

·如何使用CSS来进行网页排版(一

·在DIV+CSS排版中新闻列表的制作

广而告之

文章搜索

Google JZxue.Com

最新文章

网站推广—网站建设的关键课

吸引访客,做内容有价值的网

关于Photoshop直方图的详细

网站策划,B2B网站策划者应

Web标准网站开发人员配备

便宜/廉价的网站推广方式

写给做BBS的新站长

行为经济学在网站运营中的

漫谈网站改版的必要性

网站策划需要具备的知识

外贸网站建设全攻略

CSS让网页更容易设计与维护

和马云学习如何做网站推广

推荐导读

优秀个人网站打造全过程

热门排行

如何制作网页（网页制作实

如何选择网页制作工具

下载安装Dreamweaver8

制作主页前的准备

垃圾站全教程--之一(新手上

怎样个人网页制作,制作个人

制作模板

在Dreamweaver设置站点

制作首页

网站设计65条原则

规划站点

中国所有银行的BIC code(即

个人主页制作完全手册

关于我们 | 联系我们 | 友情链接 | 网站地图