注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

中老年人学电脑摄影博客

摄影采风、摄影作品欣赏、摄影指导、摄影教程、后期制作教程

 
 
 

日志

 
 
关于我

我从事中老年人摄影、计算机教育行业,在哈尔滨老年人大学任教,在从事摄影、计算机教育13年当中11年从事中老年人摄影、计算机教育,是国内最早从事中老年人计算机教育者之一,给我的感觉是中老人学得快,忘的快,人非常好,乐观向上。是我学习的榜样,我非常感谢中老年朋友,让我在学习和工作中得到了宝贵财富。

网易考拉推荐

使用Web标准建站第9天:CSS布局入门  

2009-11-14 14:54:42|  分类: HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

   接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。

  注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:

1.确定布局

  w3cn的最初设计草图如下:

使用Web标准建站第9天:CSS布局入门 - 广阔天地 - 中老年人学电脑博客

  用表格的设计方法的话,一般都是上中下三行布局。

使用Web标准建站第9天:CSS布局入门 - 广阔天地 - 中老年人学电脑博客

用DIV的话,我考虑使用三列来布局,成为这样。

使用Web标准建站第9天:CSS布局入门 - 广阔天地 - 中老年人学电脑博客

2.定义body样式

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

查看源码复制到剪贴板打印

  1. body {   
  2.      MARGIN: 0px;   
  3.      PADDING: 0px;   
  4.      BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat rightright bottombottom;   
  5.      FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;   
  6.      COLOR: #666;   
  7.      FONT-SIZE:12px;   
  8.      LINE-HEIGHT:150%;   
  9. }  

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中如下定义:

查看源码复制到剪贴板打印

  1. /*定义页面左列样式*/   
  2. #left{   
  3.      WIDTH: 200px;   
  4.      MARGIN: 0px;   
  5.      PADDING: 0px;   
  6.      BACKGROUND: #CDCDCD;   
  7. }   
  8. /*定义页面中列样式*/   
  9. #middle{   
  10.      POSITION: absolute;   
  11.      LEFT: 200px;   
  12.      TOP:0px;   
  13.      WIDTH:300px;   
  14.      MARGIN: 0px;   
  15.      PADDING: 0px;   
  16.      BACKGROUND: #DADADA;   
  17. }   
  18. /*定义页面右列样式*/   
  19. #right{   
  20.      POSITION: absolute;   
  21.      LEFT:500px;   
  22.      TOP:0px;   
  23.      WIDTH:280px;   
  24.      MARGIN: 0px;   
  25.      PADDING: 0px;   
  26.      BACKGROUND: #FFF;   
  27. }  

/*定义页面左列样式*/ #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;。

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

查看源码复制到剪贴板打印

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">   
  3.   <head>   
  4.     <title>欢迎进入新《网页设计师》:web标准教程及推广</title>   
  5.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  6.     <meta http-equiv="Content-Language" content="gb2312" />   
  7.     <meta content="all" name="robots" />   
  8.     <meta name="author" content="ajie(at)netease.com,阿捷" />   
  9.     <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />   
  10.     <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." />   
  11.     <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />   
  12.     <link rel="icon" href="/favicon.ico" type="image/x-icon" />   
  13.     <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />   
  14.     <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />   
  15.   </head>   
  16.   <body>   
  17.     <div id="left">页面左列</div>   
  18.     <div id="middle">页面中列</div>   
  19.     <div id="right">页面右列</div>   
  20.   </body>   
  21. </html>  

<!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思维禁锢太深了,这个办法在下一节的学习中详细介绍。

  评论这张
 
阅读(119)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017