Utilisez CSS pour créer des effets iframe_CSS/HTML-tutoriel CSS-php.cn

Table des matières

Créer un effet iframe avec CSS

用CSS构建iframe效果

Maison

interface Web

tutoriel CSS

Utilisez CSS pour créer des effets iframe_CSS/HTML

May 16, 2016 pm 12:11 PM

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

Copier le code Le code est comme suit :

#content { overflow:auto; height:200px; width:600px; background:#f00;}

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

Copier le code Le code est le suivant :

html { overflow:hidden; height:100% ; background:#fff; border:0;} 
* html { padding:100px 0 0 100px;} 
body { overflow:scroll background:#f00; 0; position : absolu ; haut : 100 px ; gauche : 100 px ; bas : 0 ; droite : 0 ;} 
* corps html { hauteur : 100 %;>

<div id="info">
<h4 style="font-weight:bold; margin-top:0;">
</h4>
 <p>Créer un effet iframe avec CSS<a href="http://homepage.yesky.com">
 </a>De : </p>Site Web Tianji Tao Bar<p></p>
 </div>A. Simulez directement l'iframe et utilisez le corps comme conteneur<script src="http://www.google-analytics.com/urchin.js" type="text/<a href=" http:>javascript"> 
</script>
<script type="text/javascript"> 
_uacct = "UA-67927-3"; 
urchinTracker(); 
</script> 
 <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环境下测试通过

Déclaration de ce site Web

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