Home >Web Front-end >CSS Tutorial >Use CSS to build iframe effects_CSS/HTML

Use CSS to build iframe effects_CSS/HTML

WBOYOriginal: 2016-05-16 12:11:111478browse

iframe應用很普遍，通常的需求有兩種：
1，取得iframe效果，就是帶一個捲軸，可以省不少版面。
2，要嵌一個頁面，實現框架連結。
如果不方便使用iframe，可以有以下解決方案：
第一種需求如果我們使用CSS佈局來實現，即可以少一個頁面，也可以提高效率。
第二種需求可以採用xmlhttp遠端取得。
A. 直接模擬iframe
用層做容器

複製程式碼

用CSS建構iframe效果 - Css Iframe - RexSong.com
用CSS建構iframe效果

來自：
天極網頁陶吧
A. 直接模擬iframe，用層做容器

·僅用css編寫無限分級彈出式選單 ·瀏覽器捲軸的參數總結 ·

引入css樣式表的四種方式介紹

 
   ·
兩種方式實現的文字直排效果

   ·
網頁設計進階版面40例參考

·
從GMail認識W3C標準和Ajax

用CSS建構iframe效果 - Css Iframe - RexSong.com

用CSS建構iframe效果
 來自：天極網頁陶吧
 A. 直接模擬iframe，用body做容器
 
 <p>·<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://homepage.yesky.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

B. 绝对定位模拟iframe
滚动条在外边

复制代码代码如下:

html { overflow:hidden; border:0; height:100%; max-height:100%;} 
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;} 
#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;} 
#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;} 
#content { height:100%; position:relative; z-index:1; overflow:auto;}  
 

效果演示源代码：

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

滚动条在里边

复制代码代码如下:

html { height:100%; max-height:100%; border:0; overflow:hidden;} 
* html { padding:100px 0 50px 0;} 
body { height:100%; max-height:100%; margin:0; overflow:hidden;} 
#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;} 
* html #content { top:100px; bottom:0; height:100%;} 
#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#f00; z-index:5;} 
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#f00;}

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

在IE6.0和FF1.5环境下测试通过

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS implements simple image hotlink prevention code_CSS/HTMLNext article：CSS implements simple image hotlink prevention code_CSS/HTML

See more

Use CSS to build iframe effects_CSS/HTML

Related articles