中小学教师招聘 智力开发 记忆力培养 笑话 古诗 成语 名人名言 歇后语 开心辞典 生活物理 生活化学
电脑乐园_为您服务教育网
网页制作技巧
 古诗词欣赏 2014中考 2014高考


热点推荐:假神童的泡泡是怎么吹大的 书包越来越鼓眼皮越来越重 法教育部将禁学生带手机 多动症儿童普校管不了特校收不了 孩子超十点睡小心长不高
孩子攀比成风背后的原因是什么 青春期孩子情绪不好家长要学会 班主任管理工作中几个细节 虚伪的素质教育比应试更可怕 老师的抱怨揭出教师真实现状


专题:中小学电子课本 培养孩子能力 自信心培养 注意力培养 戒网瘾 应对叛逆 防早恋 做称职父母 智力开发 小学各科教学资源
  您的当前位置是:《为您服务教育网》首页>>>电脑乐园>>>网页制作技巧>>>十天精通DIV+CSS之9:CSS布局实例
十天精通DIV+CSS之9:CSS布局实例

  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" 

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



  ☆ 十天精通DIV+CSS之10:自适应高度
  ☆ 十天精通DIV+CSS之9:CSS布局实例
  ☆ 十天精通DIV+CSS之8:CSS布局入门
  ☆ 十天精通DIV+CSS之7:CSS简单入门
  ☆ 十天精通DIV+CSS之6:XHTML代码规范
  ☆ 十天精通DIV+CSS之5:head区其他设置
  ☆ 十天精通DIV+CSS之4:如何调用样式表
  ☆ 十天精通DIV+CSS之3:定义语言编码
  ☆ 十天精通DIV+CSS之2:什么是名字空间
  ☆ 十天精通DIV+CSS之1:选择DOCTYPE


联系我们 本站搜索 要资料 请您留言 开心智慧吧 动画 笑话 安平影像 周恩来总理
为您服务教育网——全心全意为中国教育免费服务(Copyright© 2001-2017 河北·衡水) 安平明德小学 一小学前三班
冀ICP备06009845号