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

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


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

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;。

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

  以下是引用片段:

  

  

  

  欢迎进入新《<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思维禁锢太深了,这个办法在下一节的学习中详细介绍。

  第11天:不用表格的菜单

  布局初步搭建起来,我开始填充里面的内容。首先是定义logo图片:

  样式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}

  页面代码:

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.