推荐信息

第9天:第一个C 布局实例

1、除免费广告网注明之服务条款外，其他一切因使用免费广告网发布系统而导致任何意外、疏忽、合约毁坏、诽谤、版权或知识产权侵犯及其所造成的损失（包括因下载而感染电脑病毒），免费广告网概不负责，亦不承担任何法律责任。
2、任何通过免费广告网链接及得到之资讯、产品及服务均系网站用户自行发布，免费广告网对其合法性概不负责，亦不承担任何法律责任。
3、免费广告网所有内容并不代表任何免费广告网之意见。
4、任何单位或个人认为免费广告网的内容可能涉嫌侵犯其合法权益，应及时联系免费广告网，我们会尽快处理。

1.确定布局

w3cn的最初设计草图如下：

用表格的设计方法的话，一般都是上中下三行布局按此在新窗口浏览图片。用DIV的话，我考虑使用三列来布局,成为这样。

2.定义body样式

先定义整个页面的body的样式,代码如下：

body { MARGIN: 0px ADDING: 0px; BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;FONT-FAMILY: 'Lucida Grande','Lucida Sa Unicode','宋体','新宋体',arial,verdana,sa -serif;COLOR: #666;FONT-SIZE:12px;LINE-HEIGHT:150%; }

以上代码的作用在上一天的教程有详细说明，大家应该一看就明白。定义了边框边距为0；背景颜色为#FEFEFE，背景图片为bg_logo.gif，图片位于页面右下角，不重复；定义了字体尺寸为12px；字体颜色为#666;行高150%。

3.定义主要的div

初次使用C 布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加点信心嘛！)。分别定义左中右的宽度为200:300:280，在C 中如下定义:

/*定义页面左列样式*/#left{ WIDTH:200px;MARGIN: 0px ADDING: 0px ACKGROUND: #CDCDCD;}/*定义页面中列样式*/#middle{ POSITION: a olute;LEFT:200px;TOP:0px;WIDTH:300px;MARGIN: 0px ADDING: 0px ACKGROUND: #DADADA;}/*定义页面右列样式*/#right{ POSITION: a olute;LEFT:500px;TOP:0px;WIDTH:280px;MARGIN: 0px ADDING: 0px ACKGROUND: #FFF; }

注意：定义中列和右列div我都采用了POSITION: a olute;，然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键，我采用了层的绝对定位。定义中间列距离页面左边框200px，距离顶部0px；定义右列距离页面左边框500px，距离顶部0px；。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra itional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra itional.dtd"> lt;html xml ="http://www.w3.org/1999/xhtml" lang="gb2312"> lt;head> lt;title>欢迎进入新《网页设计师》:web标准教程及推广</title> lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> lt;meta http-equiv="Content-Language" content="gb2312" /> lt;meta content="all" name="robots" /> lt;meta name="author" content="ajie(at)netease.com,阿捷" /> lt;meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" /> lt;meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." /> lt;meta content="web标准,教程,web, standards, xhtml, c , usability, acce ibility" name="keywords" /> lt;link rel="icon" href="http://www.68design.net/favicon.ico" type="image/x-icon" /> lt;link rel="shortcut icon" href="http://www.w3cn.orghttp://www.68design.net/favicon.ico" type="image/x-icon" /> lt;link rel="stylesheet" rev="stylesheet" href="c /style01.c " type="text/c " media="all" /> lt;/head> lt ody> lt;div id="left">页面左列</div> lt;div id="middle">页面中列</div> lt;div id="right">页面右列</div> lt;/body> lt;/html>

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

4.100%自适应高度?

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

企业免费发布信息、发布免费信息、免费发广告、免费发布广告的良好网络平台！

热门：免费发布信息 | 企业免费宣传 | 免费发布广告 | VI设计 | 网站建设 | 更多

当前位置：免费广告网 >> 网络首页 >> 网站建设 >> 第9天:第一个C 布局实例

第9天:第一个C 布局实例

1.确定布局

2.定义body样式

3.定义主要的div

4.100%自适应高度?

免费广告网是企业免费发布信息、免费信息发布、免费发布广告的免费网络发布信息平台（免费发布信息网），力求为企业免费宣传、免费推广、免费发布信息而努力！！！

企业免费发布信息、发布免费信息、免费发广告、免费发布广告的良好网络平台！

热门：免费发布信息 | 企业免费宣传 | 免费发布广告 | VI设计 | 网站建设 | 更多

当前位置：免费广告网 >> 网络首页 >> 网站建设 >> 第9天:第一个C&nbsp;布局实例

第9天:第一个C&nbsp;布局实例

1.确定布局

2.定义body样式

3.定义主要的div

4.100%自适应高度?

免费广告网是企业免费发布信息、免费信息发布、免费发布广告的免费网络发布信息平台（免费发布信息网），力求为企业免费宣传、免费推广、免费发布信息而努力！！！

当前位置：免费广告网 >> 网络首页 >> 网站建设 >> 第9天:第一个C 布局实例

第9天:第一个C 布局实例