div+css布局11：第一个CSS 布局实例.doc

div+css布局11：第一个CSS 布局实例 华迪教育 华迪信息 接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用 photoshop 把它画出来。 你可能看到有关 web 标准的站点大都很朴素，因为 web 标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想 怎么设计就怎么设计，用传统表格方法实现的布局，用 DIV 也可以实现。技术有一个成熟的过程，把 DIV 看成和 TABLE 一样 的工具，如何运用就看你的想象力了。 注：在实际应用过程中，DIV 在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于你的价 值判断。好，不罗嗦了，我们开始： 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-HEIG，图片位于页面右下角，不重复；定义了字体尺寸为 12px；字体颜色为#666;行高 150%。 3.定义主要的div 初次使用 CSS 布局，我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho，别说我偷懒，先实现简单的，增加 点信心嘛！)。分别定义左中右的宽度为 200:300:280，在 CSS中如下定义: /*定义页面左列样式*/ #left{ WID Transitional//EN html xmlns= lang=gb2312 head title欢迎进入新《网页设计师》:web 标准教程及推广/title meta 阿捷 / meta name=Copyright content=自由版权,任意转载 / 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= type=image/x-icon / link rel=stylesheet rev=stylesheet href=c type=text/css media=all / /head body div id=left页面左列/div div id=middle页面中列/div div id=right页面右列/div /body 自适应高度? 为了保持三列有同样的高度，我尝试在#left、#middle 和#right 中设置heig 或 四川华迪信息