Maison >interface Web >tutoriel CSS >Utiliser CSS pour créer un effet iframe code_Experience Exchange

Utiliser CSS pour créer un effet iframe code_Experience Exchange

WBOYoriginal: 2016-05-16 12:07:441493parcourir

Les applications iframe sont très courantes, et il y a deux exigences courantes :

1 Pour obtenir l'effet iframe, il faut apporter une barre de défilement, ce qui permet de gagner beaucoup d'espace.
2. Intégrez une page pour implémenter la liaison de cadres.

S'il n'est pas pratique d'utiliser iframe, vous pouvez avoir les solutions suivantes :

Si nous utilisons la mise en page CSS pour implémenter la première exigence, nous pouvons enregistrer une page et améliorer l'efficacité.
La deuxième exigence peut être obtenue à distance en utilisant xmlhttp.

A. Simuler directement l'iframe

Utiliser les calques comme conteneurs
#content { overflow:auto; >Code source de démonstration de l'effet :

Créer un effet iframe avec CSS - Css Iframe - RexSong.com<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
</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>
Créer un effet iframe avec CSS
<h4 style="font-weight:bold;">De : </h4>Réseau d'enseignement Web<p><a href="http://www.webjx.com/" target="_self">
</a>A. Simulez directement l'iframe et utilisez des calques comme conteneurs </p>
<p>
 </p>·<div id="content">Écrivez des menus contextuels hiérarchiques illimités en utilisant uniquement CSS<p>
 
   ·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">Résumé des paramètres de la barre de défilement du navigateur</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">Introduction à quatre façons d'introduire les feuilles de style CSS</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">Effet de disposition verticale du texte obtenu de deux manières</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">40 exemples de mises en page avancées pour la conception Web</a>
 
    ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">Découvrez les normes W3C et Ajax depuis GMail</a><a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">
</a>
</p>
</div>

[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ] Utiliser le corps comme conteneur

html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:100px 0 0 100px;}
body { overflow:scroll ; arrière-plan : #f00 ; marge : 0 ; position : absolu ; haut : 100 px; 🎜>Code source de démonstration de l'effet :

Créer un effet iframe avec CSS - Css Iframe - RexSong.com

Créer un effet iframe avec CSS<div id="info">
 <h4 style="font-weight:bold; margin-top:0;">De : </h4>Réseau d'enseignement Web<p><a href="http://www.webjx.com">
 </a>A. Simulez directement l'iframe et utilisez le corps comme conteneur</p>
<p> 
 </p>
<p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>

<br><input onclick="runEx('runcode9325')" type="button" value="运行代码"> <input onclick="doCopy('runcode9325')" type="button" value="复制代码"> <input onclick="doSave(runcode9325)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div>
<br>B. 绝对定位模拟iframe <br><br>滚动条在外边 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="96839" class="copybut" id="copybut96839" onclick="doCopy('code96839')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code96839">
<br>html { overflow:hidden; border:0; height:100%; max-height:100%;}  <br>body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}  <br>#head { position:absolute; top:0; right:15px; width:100%; height:100px; background:#f00; z-index:2;}  <br>#foot { position:absolute; bottom:0; right:15px; width:100%; background:#f00; height:50px;z-index:2;}  <br>#content { height:100%; position:relative; z-index:1; overflow:auto;} <br>
</div>
<br>效果代码演示 <br><div class="htmlarea">
<textarea id="runcode87299">
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>用CSS构建iframe效果 - 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> 
 
 
<div id="head"> 
 <div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;"> 
  <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4> 
<p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p> 
  <p>B. 绝对定位模拟iframe，滚动条在外边</p> 
 </div> 
</div> 
<div id="content"> 
 <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a>
 
   ·<a class="grey-s" href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a>
 
    ·<a class="grey-s" href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p> 
</div>

[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需刷新才能执行]

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：La théorie et la pratique des annotations conditionnelles CSS qui doivent être connues pour la mise en page div+css Page 1/2_Échange d'expérienceArticle suivant：La théorie et la pratique des annotations conditionnelles CSS qui doivent être connues pour la mise en page div+css Page 1/2_Échange d'expérience

Articles Liés

Voir plus