The application of IFrame is very common, there are usually two kinds of requirements:
1, to obtain an IFRAME effect, that is, with a scroll bar, you can save a lot of suites.
2, to embed a page, to implement the framework link.
If you are not convenient to use IFRAME, you can have the following solutions:
The first requirement if we use CSS layout to implement, that is, can be less than one page, can also improve efficiency.
The second requirement can be obtained remotely using XMLHTTP.
A. Direct simulation of IFRAME
Use layers to make containers
| Reference: | |
|
Effect Demo Source code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> using CSS to build an Iframe effect-css iframe-rexsong.com</title><style>* {font:12px Arial; HTML {overflow:hidden; border:0; height:100%;} body {overflow:hidden; height:100%;} #content {overflow:auto; height:185px; width:600px; background: #ccc; padding:10px;} </style></pead><body><p style= "Font-weight:bold;" > Using CSS to build an IFRAME effect </p><p> from: <a href= "http://www.webjx.com/" target= "_self" > Web Teaching Network </a> </p><p>a. Directly simulate the IFRAME, use the layer to do the container </p><div id= "Content" > "<p> <a class=" grey-s "href=" http ://www.webjx.com/485/2354485.shtml "> Use CSS to write an unlimited hierarchical pop-up menu </a><br/> <a class=" grey-s "href=" www.webjx.com/442/2354442.shtml "> Browser scroll bar Summary of parameters </A>≪br/> <a class= "grey-s" href= "http://www.webjx.com/436/2354436.shtml" > Introduction of CSS style sheet four ways to introduce </A><BR/ > <a class= "grey-s" href= "http://www.webjx.com/424/2354424.shtml" > Two ways to achieve text vertical effects </A><BR <a class= "Grey-s" href= "http://www.webjx.com/336/2352836.shtml" > Web design Advanced Layout 40 cases Reference </a><br/> <a class= "Grey-s" href= "http://www.webjx.com/251/2352751.shtml" > Learn from Gmail standards and Ajax</a></p></div ></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Use body to make containers
| Reference: | |
|
Effect Demo Source code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> using CSS to build an Iframe effect-css iframe-rexsong.com</title><style>* {font:12px Arial; 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;} #info {position:fixed; top:10px; left:10px;} * HTML #info {position:absolute;} </style><script src= "Http://www.google-analytics.com/urchin.js" type= "Text/javascript" ></script ><script type= "text/javascript" >_UACCT = "ua-67927-3"; Urchintracker ();</script></pead>< Body><div id= "Info" > <p style= "font-weight:bold; Margin-top:0; " > Using CSS to build an IFRAME effect </p> <p> from: <a href= "http://www.webjx.com" > Web Teaching Network </a></p> <p >a. Directly simulate IFRAME, use body to do container </p></div> <p> <a class= "grey-s" href= "http://www.webjx.com/485/" 2354485.shtml "> only use CSS to write an unlimited hierarchical pop-up menu </a><br/> <a class=" grey-s "href=" http://www.webjx.com/442/ 2354442.shtml "> Browser scroll bar parameters summary </a><br/> <a class=" grey-s "href=" http://www.webjx.com/436/2354436. sHTML "> introduces four ways to introduce CSS stylesheets </a><br/> <a class=" grey-s "href=" http://www.webjx.com/424/2354424.shtml "> Two ways to achieve text vertical effect </a><br/> <a class=" grey-s "href=" http://www.webjx.com/336/2352836.shtml "> Web design Advanced Layout 40 cases Reference </a><br/> <a class= "grey-s" href= "http://www.webjx.com/251/2352751.shtml" > Understand the standard and ajax</a></p> </body></ptml> from Gmail
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
B. Absolute positioning Simulation iframe
Scroll bar on the outside
| Reference: | |
|
Effect Demo Source code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> using CSS to build an Iframe effect-css iframe-rexsong.com</title><style>* {font:12px Arial; 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;} </style><script type= "text/javascript" >_UACCT = "ua-67927-3"; Urchintracker () </script></pead ><body><div id= "Head" > <div style= "padding:12px 0 0 26px;_padding:6px 0 0 26px;" > <p style= "font-weight:bold; Margin-top:0; " > Using CSS to build an IFRAME effect </p><p> from: <a href= "http://www.webjx.com/" target= "_self" > Web Teaching Network </a> </p> <p>b. Absolute positioning simulation iframe, scroll bar outside </p> </div></div><div id= "Content" > <p> <a class= "Grey-s" href= "http://www.webjx.com/485/2354485.shtml" > only use CSS to write an unlimited hierarchical pop-up menu </a><br/> <a class= "Grey-s" href= "http://www.webjx.com/442/2354442.shtml" > Browser scroll bar Summary of parameters </a><br/> <a class= " Grey-s "href=" http://www.webjx.com/436/2354436.shtml > introduces four ways to introduce a CSS style sheet </a><br/> <a class= " Grey-s "href=" http://www.webjx.com/424/2354424.shtml > Two ways to achieve text vertical effects </a><br/> <a class= "Grey-s" href= "http://www.webjx.com/336/2352836.shtml" > Web design Advanced Layout 40 cases Reference </a><br/> <a class= "Grey-s" Http://www.webjx.com/251/2352751.shtml "> Learn from Gmail standards and ajax</a></p></div></body>< /html>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Scroll bar in the inside
| Reference: | |
|
Effect Demo Code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> using CSS to build an Iframe effect-css Iframe-rexsong.com</title><style type=" Text/css "> * {font:12px Arial; 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;} </style><script type= "text/javascript" >_UACCT = "ua-67927-3"; UrchintracKer () </script></pead><body><div id= "Head" > <div style= "padding:12px 0 0 10px;_padding : 6px 0 0 10px; " > <p style= "font-weight:bold; margin-top:0; " > Using CSS to build an IFRAME effect </p><p> from: <a href= "http://www.webjx.com/" target= "_self" > Web Teaching Network </a> </p> <p>b. Absolute positioning simulate IFRAME, scroll bar inside </p> </div></div><div id= "Content" > <p> <a class= "Grey-s" href= "http://www.webjx.com/485/2354485.shtml" > only use CSS to write an unlimited hierarchical pop-up menu </a><br/> <a class= "Grey-s" href= "http://www.webjx.com/442/2354442.shtml" > Browser scroll bar Summary of parameters </a><br/> <a class= " Grey-s "href=" http://www.webjx.com/436/2354436.shtml > introduces four ways to introduce a CSS style sheet </a><br/> <a class= " Grey-s "href=" http://www.webjx.com/424/2354424.shtml > Two ways to achieve text vertical effects </a><br/> <a class= "Grey-s" href= "http://www.webjx.com/336/2352836.shtml" > Web design Advanced Layout 40 cases Reference </a><br/> <a class= "Grey-s" Http://www.webjx.com/251/2352751.shtml "> Learn from Gmail standards and ajax</a></p></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
test through in IE6.0 and FF1.5 environments
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
