1. 獲取iframe效果,就是帶一個滾動條,可以省不少版面。
2. 要嵌一個頁面,實現框架鏈接。
如果不方便使用iframe,可以有如下相應解決方案:
1. 可以使用css布局來實現,即可以少一個頁面,也可以提高執行效率。
2. 可以采用xmlhttp遠程獲取數據。
A. 直接模擬iframe
用層做容器
#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_150246_cssiframe1.htm
用body做容器
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:200px 0 0 100px;}
body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}
* html body { height:100%; width:100%; position:static;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_151517_cssiframe2.htm
B. 絕對定位模擬iframe
滾動條在外邊
html { overflow:hidden; border:0; height:100%;}
body { overflow:hidden; margin:0; height:100%; position:relative;}
#content { height:100%; position:relative; z-index:1; overflow:auto;}
#head { position:absolute; top:0; right:16px; width:100%; height:100px; background:#ccc; z-index:2;}
#foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_151837_cssiframe3.htm
滾動條在里邊
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:#ccc; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}
效果演示:http://www.rexsong.com/blog/attachments/200601/02_153241_cssiframe4.htm
強調一下,standard模式要把body看作是一個容器,基本和P類似,這和傳統觀念是很不一樣。搞清楚了html與body的關系,關于高級布局的很多問題自然迎刃而解。
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15