【网页设计-最新经典技术文档】第一个CSS布局实例.docVIP

第一个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-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 /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/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),阿捷 / 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=/fa