Xhtml第9天:第一个css布局实例（Xhtml,css布局实例,html,css）- WEB设计综合

当前位置: 首页 > 网络学院 > 网页制作基础教程 > WEB设计综合 > Xhtml第9天:第一个css布局实例

学院文章搜索

关键字

WEB设计综合中的 Xhtml第9天:第一个css布局实例

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-03-01 浏览: 1302 ::

收藏到网摘: n/a

Xhtml第8天：CSS布局入门技术 Xhtml第10天: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；。

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

<!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>
<div id="right">页面右列</div>
</body>

</html>

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

4.100%自适应高度?

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

Xhtml第8天：CSS布局入门技术 Xhtml第10天:div自适应高度

WEB设计综合 中的 Xhtml第9天:第一个css布局实例

2.定义body样式

3.定义主要的div

4.100%自适应高度?

评论 (0) All

WEB设计综合中的 Xhtml第9天:第一个css布局实例