仿Google阅读器网页布局示例

仿Google阅读器布局

说明

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

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

实现思路

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

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

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

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

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

参考代码

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="yes!b/s!,web标准,杨正祎,博客园,实例代码" />
<meta name="description" content="这是一个简单yes!b/s!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>yes!b/s!文章示例页面</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body,html{
overflow:hidden;
}
#header{
height:100px;
background-color:red;
}
#sidebar{
float:left;
width:240px;
display:inline;
background-color:yellow;
overflow-y:auto;
overflow-x:hidden;
}
#content{
float:right;
margin-left:-270px;
width:100%;
background-color:deeppink;
}
#content_content{
margin-left:280px;
overflow-y:auto;
overflow-x:hidden;
}
</style>
<SCRIPT LANGUAGE="JavaScript">

</script>
</head>
<body>
<div id="wrap">
<div id="header">
这里是头部
</div>
<div id="content">
<div id="content_content">
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
主体内容
</div>
</div>
<div id="sidebar">
<ul >
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
<li>侧边栏栏目</li>
</ul>
</div>
</div>
<script language="javascript">

</script>
</body>
</html>

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

效果截图

IE下实例效果截图（点击图片查看完整大图）

FireFox下实例效果截图（点击图片查看完整大图）

posted @ 2008-05-05 17:12 阿一(杨正祎) 阅读(6765) 评论(17) 收藏举报

刷新页面返回顶部