精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>网页布局>正文

如何使用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

Copyright © 2005 - 2006 建站学 All rights reserved.