通过iframe调用页面的一部分，实现自己想要的页面

图1

图2

今天同事在项目中突然遇到一个这样的问题，他想通过iframe的形式调用一个页面，只显示其中的一部分，恩，真是个不错的注意，这样我们很容易就能够早一个功能强大的新页面。呵呵。

具体实现效果是图1，图2为google 生活正式页面。

简单的想了想，其实调用这个iframe有点儿类似于调用图片。不废话了，直接来代码：

<!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">
        iframe
        {
            margin-top: -120px;
        }
    </style>
</head>
<body>
    <div style=" 1024px; height: 950px; overflow: hidden; margin-top: 20px; ">
        <div style="border: 1px solid; height: 43px; left: 340px; position: absolute; top: 778px;
            300px;background:url(mylogo.gif);">
        </div>
        <iframe src="http://shenghuo.google.cn/shenghuo/search?a_y0=9&a_n0=%E6%88%BF%E5%B1%8B&a_n1=%E5%9F%8E%E5%B8%82&a_y1=1&a_o1=0&a_v1=%E9%9D%92%E5%B2%9B&a_n2=%E7%B1%BB%E5%88%AB&a_y2=1&a_o2=0&a_v2=%E5%87%BA%E7%A7%9F&ct=h&cd=0/"
            width="1024px" height="950px" style="overflow: hidden; border:none;"></iframe>
    </div>
</body>
</html>

--------

主要代码分析如下：

1.可以控制Google生活了，另外你如果想把google图标换掉，你可以在

你可以在这里面定义你想要的图标替换Google图标。
</div>

这里主要用到了绝对定位的方法。

2.margin-top:的负像素的用法。

3.控制iframe的滚动条和边框

overflow: hidden; border:none;

这样就不会出现滚动条及其边框了，样式会好看点儿。

如果有更好的想法，欢迎提出宝贵意见。