仿Google阅读器网页布局示例

saybody

浏览: 902425 次
性别:
来自: 西安

最近访客更多访客>>

morelily

juzhibest

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1052)

社区版块

存档分类

<div style="border: 1px dotted teal; font-size: 9pt; float: right; color: teal; text-align: center;">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/justinyoung/googlelogo2.gif"><br>
仿Google阅读器布局</div>
<h4>说明</h4>
<p>最近因为工作需要需要做个类似抓虾、Google Reader这样的网页订阅页面。这种页面的难点主要是——</p>
<ul style="margin: 0px 2px 15px 25px;">
<li style="">左侧频道列表的高度要根据各种浏览器可视高度动态改变（改变窗口大小时需要动态改变）
    </li>
    <li style="">侧边栏宽度固定，而阅读区域的宽度需要动态改变
    </li>
    <li style="">滚动条的处理
    </li>
    <li style="">IE和FF的兼容性
    </li>
    <li style="">其他一些细节…… </li>
</ul>
<h4>实现思路</h4>
<p>左侧频道列表的高度要根据各种浏览器可视高度动态改变（改变窗口大小时需要动态改变）<br>
—— 需要监听浏览器的resize(FF中)，或者onresize（IE中）事件。</p>
<p>侧边栏宽度固定，而阅读区域的宽度需要动态改变<br>
——参考这篇文章： <a title="《大家一起来博皮——2：液态布局和固态布局，页面框架篇》" href="http://www.cnblogs.com/JustinYoung/archive/2008/03/11/lets-blog-skin-02.html" target="_blank">《大家一起来博皮——2：液态布局和固态布局，页面框架篇》</a></p>
<p>滚动条的处理<br>
——需要注意横向滚动条一直不出现，竖向滚动条根据内容多少需要出现滚动条。最需要注意的一点是：需要将body的滚动条隐藏，右侧的滚动条其实是"content_content"的滚动条。</p>
<p>IE和FF的兼容性 <br>
——主要是JavaScript中一些事件名称的区别。</p>
<p>其他一些细节……<br>
——一些细节……</p>
<h4>参考代码</h4>
<textarea id="txtTestCode2" cols="65" rows="12"> <!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>



</head>
<body>
<div id="wrap">
<div id="header">
这里是头部
</div>
<div id="content">
<div id="content_content">
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
<p>主体内容</p>
</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>



</body>
</html>
</textarea><div style="margin-bottom: 15px; clear: both;">
<input value="运行代码" type="button"><input value="复制代码" type="button"><input value="另存代码" type="button"><span style="font-size: 9pt; color: rgb(153, 153, 153);">提示：可以先在文本框内，根据需要修改代码后再运行</span>
</div>
<h4>效果截图</h4>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader2.gif" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader2.gif" height="466" width="526"></a>
<h6>IE下实例效果截图（点击图片查看完整大图）</h6>
</div>
<div class="floatMPic">
<a title="web标准设计" href="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader.gif" target="_blank"><img alt="web标准设计" src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2008_2q/googleReader.gif" height="466" width="526"></a>
<h6>FireFox下实例效果截图（点击图片查看完整大图）</h6>
</div>

分享到：