WEB标准教程第9天：第一个CSS布局实例
|
1.确定布局
w3cn的最初设计草图如下：  源代码网整理以下 用表格的设计方法的话，一般都是上中下三行布局
源代码网整理以下 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; 源代码网整理以下 LINE-HEIGHT:150%; } 源代码网整理以下 以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。 源代码网整理以下 初次使用CSS布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在CSS中如下定义: 源代码网整理以下 /*定义页面左列样式*/ 源代码网整理以下 #left{ WIDTH:200px; 源代码网整理以下 MARGIN: 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；。 源代码网整理以下 这时候整个页面的代码是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
源代码网整理以下 <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 源代码网整理以下 <head> 源代码网整理以下 <title>欢迎进入新《网页设计师》:web标准教程及推广</title> 源代码网整理以下 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 源代码网整理以下 <meta http-equiv="Content-Language" content="gb2312" /> 源代码网整理以下 <meta content="all" name="robots" /> 源代码网整理以下 <meta name="author" content="ajie(at)netease.com,阿捷" /> 源代码网整理以下 <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" /> 源代码网整理以下 <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." /> 源代码网整理以下 <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" /> 源代码网整理以下 <link rel="icon" href="/favicon.ico" type="image/x-icon" /> 源代码网整理以下 <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" /> 源代码网整理以下 <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" /> 源代码网整理以下 </head> 源代码网整理以下 <body> 源代码网整理以下 <div id="left">页面左列</div> 源代码网整理以下 <div id="middle">页面中列</div> 源代码网整理以下 </body> 源代码网整理以下 </html> 源代码网整理以下 这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？ 源代码网整理以下 4.100%自适应高度? 源代码网整理以下 为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"height:100%;"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。 源代码网供稿. |
。用DIV的话，我考虑使用三列来布局,成为这样
。