深圳安全研究院:DIV＋CSS/第9天：第一个CSS布局实例

来源：百度文库 编辑：中财网 时间：2024/04/30 23:23:57

第9天：第一个CSS布局实例

目录

[隐藏]
  • 1 1.确定布局
  • 2 2.定义body样式
  • 3 3.定义主要的div
  • 4 4.100%自适应高度
  • 5 参考来源

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

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

欢迎进入新《网页设计师》:web标准教程及推广
页面左列
页面中列
　　

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

4.100%自适应高度

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

Div+CSS布局 采用DIV+CSS布局的好处 采用DIV+CSS布局的好处 怎么使用DIV+CSS布局网页 CSS+DIV? Css高手进,关于<div>页面布局!~ DIV＋CSS网页新标准制作网页 div+css怎样入门？ 关于css定义div div+css 问题？ 关于cms div+css DIV+CSS的问题? 请问dx学习css的好论坛或网站，学习新一代网页布局css+div的网站和论坛 用DIV+CSS布局网站有没有好用的工具？ 制作网页中，什么时候应该用DIV+CSS布局呢？有例子么？ CSS？？？？？？？？？ 请问本人用DIV+CSS布局的，为什么在IE和傲游中显示正常，在火狐中就乱了 哪种css定义是兼容性最高的? (div+css) div+css定义下拉菜单的问题 关于DIV与CSS的显示问题 css和DIV怎么用啊？ Div+css为什么利于搜索引擎的收录 css div网页设计的问题 css div网页设计的问题