仿Google阅读器网页布局示例


仿Google阅读器布局

说明

最近因为工作需要需要做个类似抓虾、Google Reader这样的网页订阅页面。这种页面的难点主要是——

  • 左侧频道列表的高度要根据各种浏览器可视高度动态改变(改变窗口大小时需要动态改变)
  • 侧边栏宽度固定,而阅读区域的宽度需要动态改变
  • 滚动条的处理
  • IE和FF的兼容性
  • 其他一些细节……

实现思路

左侧频道列表的高度要根据各种浏览器可视高度动态改变(改变窗口大小时需要动态改变)
—— 需要监听浏览器的resize(FF中),或者onresize(IE中)事件。

侧边栏宽度固定,而阅读区域的宽度需要动态改变
——参考这篇文章: 《大家一起来博皮——2:液态布局和固态布局,页面框架篇 》

滚动条的处理
——需要注意横向滚动条一直不出现,竖向滚动条根据内容多少需要出现滚动条。最需要注意的一点是:需要将body的滚动条隐藏,右侧的滚动条其实是"content_content"的滚动条。

IE和FF的兼容性
——主要是JavaScript中一些事件名称的区别。

其他一些细节……
——一些细节……

参考代码

提示:可以先在文本框内,根据需要修改代码后再运行

效果截图

web标准设计
IE下实例效果截图(点击图片查看完整大图)
web标准设计
FireFox下实例效果截图(点击图片查看完整大图)
posted @ 2008-05-05 17:12 阿一(杨正祎) 阅读(3469) 评论(14)  编辑 收藏 所属分类: Web标准

  回复  引用  查看    
#1楼 [楼主]2008-05-05 17:21 | 杨正祎(阿一)      
好像依然有问题——
在傲游或者theWord这样的使用IE内核的第三方多tab浏览器下,body的滚动条好像去不掉 囧rz~

——文章发布10分钟后补充:
解决办法是对html也使用overflow:hidden;(文章中代码已经修正)
  回复  引用  查看    
#2楼 2008-05-05 18:07 | 布尔      
挺早点时候提出XHTML时就有了,嘻嘻
  回复  引用  查看    
#3楼 2008-05-05 19:08 | 马可香蕉      
嘿嘿,html的方法我当初也找了半天
  回复  引用  查看    
#4楼 2008-05-05 20:40 | 曲滨*銘龘鶽      
哎;要不是有支持css不好的浏览器在的话如 ie6,直接用绝对定位加上下左右就可以搞定,一行js都用不到,前一阵做项目就要用倒这样的界面 就是拿js解决的郁闷;如下代码放到ie6会很恶心的!
<!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">
<head>
    
<title>无标题页</title>
    
<style type="text/css">
    *
{
    margin
:0;
    padding
:0;
    
    
}
    body,html
{
        overflow
:hidden;
    
}

#header
{
    height
:100px;
    background-color
:#FF0000;
}

#left
{
    top
:100px;
    bottom
:0px;
    left
:0px;
    width
:200px;
    background-color
:#00FF00;
    position
:absolute;
    
}

#right
{
    position
:absolute;
    top
:100px;
    bottom
:0px;
    left
:200px;
    right
:0px;    
    background-color
:#0000FF;
}
    
</style>
</head>
<body>
    
<div id="header">1</div>
    
<div id="left">    2</div>
    
<div id="right">3</div>
</body>
</html>

  回复  引用    
#5楼 2008-05-05 21:31 | 苏州虎丘婚纱 [未注册用户]
楼上说的是噢
  回复  引用  查看    
#6楼 2008-05-05 21:37 | 李涛      
阿一的想法不错,其实如果完全能用css实现是最好不过的了.兼容性方面值得考虑.有时候前台,我基本把原来的JS都换下了,现在很多都在想用css怎么替换.
  回复  引用    
#7楼 2008-05-05 21:52 | NormRen [未注册用户]
收藏.
  回复  引用  查看    
#8楼 [楼主]2008-05-05 22:27 | 杨正祎(阿一)      
没有办法,现在IE6还是占据很大的市场份额。
  回复  引用  查看    
#9楼 2008-05-06 01:27 | 镜涛      
IE6 ,我们做的东西也是支持不好,郁闷!
  回复  引用  查看    
#10楼 2008-05-06 09:11 | 蛙蛙池塘      
主要是用好overflow
  回复  引用  查看    
#11楼 2008-05-06 09:40 | Clark Zheng      
收藏了
  回复  引用    
#12楼 2008-05-06 11:35 | aoao [未注册用户]
好久好久之前我做过一个差不多的。。
http://labs.aoao.org.cn/demo/layout/100x100/

  回复  引用  查看    
#13楼 [楼主]2008-05-06 16:07 | 杨正祎(阿一)      
@aoao
嗷嗷?久仰大名呀。呵呵~~
  回复  引用  查看    
#14楼 [楼主]2008-05-06 16:10 | 杨正祎(阿一)      
@曲滨*銘龘鶽
这个应该不能出现局域的滚动条吧。右面的东西多了,滚动滚动条的时候,左边也会滚上去哦。并不是我想要的效果哦。
51count统计