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

中老年人学电脑摄影博客

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

 
 
 

日志

 
 
关于我

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

网易考拉推荐

使用Web标准建站第10天  

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

  下载LOFTER 我的照片书  |

       如果我们想在3列布局的最后加一行页脚,放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中,我们用大表格嵌套小表格的方法,可以很方便对齐三列;而用div布局,三列独立分散,内容高低不同,就很难对齐。其实我们完全可以嵌套div,把三列放进一个DIV中,就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面):

使用Web标准建站第10天 - 广阔天地 - 中老年人学电脑博客

  这个例子的页面主要代码如下:

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

  1. <div id="header"></div>   
  2. <div id="mainbox">   
  3.   <div id="menu"></div>   
  4.   <div id="sidebar"></div>   
  5.   <div id="content"></div>   
  6. </div>   
  7. <div id="footer"></div>  

<div id="header"></div> <div id="mainbox"> <div id="menu"></div> <div id="sidebar"></div> <div id="content"></div> </div> <div id="footer"></div>

  具体样式表都写在相应版块里了。重点在于#mainbox层嵌套了#menu,#sidebar和#content三个层。当#content的内容增加,#content的高度就会增高,同时#mainbox的高度也会撑开,#footer层就自动下移。这样就实现了高度的自适应。

  另外值得注意的是:#menu和#content都是浮动在页面右面"FLOAT: right;",#sidebar是浮动在#menu层的左面"FLOAT: left;",这是浮动法定位,还可以采用绝对定位来实现这样的效果。

  这个方法存在另一个问题,就是侧列#sidebar的背景无法百分之百。一般的解决办法就是用body的背景色来填充满。(不能使用#mainbox的背景色,因为在Mozilla等浏览器中#mainbox的背景色失效。)

  好了,主要的框架已经搭建完毕,剩下的工作只是往里面添砖加瓦

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

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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