网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

中老年人学电脑摄影博客

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

导航

 
 
 
 
 

日志

 
 
关于我
广阔天地

我从事中老年人摄影、计算机教育行业,在哈尔滨老年人大学任教,在从事摄影、计算机教育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思维禁锢太深了，这个办法在下一节的学习中详细介绍。

  评论这张
 
阅读(216)| 评论(0)

历史上的今天

评论

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

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

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