相关文章
个人网站面临生死劫 细分化是惟一出路
学习网站建设中一些容易被忽视的问题
搜索引擎不收录网站页面16种原因
北京网站制作ASP生成静态Html文件技术杂谈
网站建设HTML之清单标记
网站建设Dreamweaver8实用技巧
北京网站制作Flash视频教程：1.19 手形工具
网站建设Dreamweaver基础视频教程20 使用层
企通互联在网页中插入视频播放代码全集
网站制作怎么改善现有网站为xhtml+CSS结构——我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站设计北京网页设计使用Web标准建站第9天：CSS布局入门
网站设计北京网页设计使用Web标准建站第9天：CSS布局入门
接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。 企通互联
注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价值判断。好，不罗嗦了，我们开始：
1.确定布局w3cn的最初设计草图如下：
用表格的设计方法的话，一般都是上中下三行布局
。用DIV的话，我考虑使用三列来布局,成为这样
。
先定义整个页面的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> www.qitongnet.com网页设计
<div id="middle">页面中列</div>网站建设
<div id="right">页面右列</div>网站制作
</body>网站建设
</html>
这时候页面的效果仅仅可以看到三个并列的灰色矩形，和一个背景图。但是我希望高度是满屏的，怎么办呢？
4.100%自适应高度?为了保持三列有同样的高度，我尝试在#left、#middle和#right中设置"
height:100%;
"，但发现完全没有预想的自适应高度效果。经过一番尝试后，我只好给每个div一个绝对高度:"height:1000px;"，并且随着内容的增加，需要不断修正这个值。难道没有办法自适应高度了吗？随着阿捷自己学习的深入，发现一个变通的解决办法，实际上根本不需要设置100%，我们已经被table思维禁锢太深了，这个办法在下一节的学习中详细介绍。 北京网站设计