recherche

Maison >interface Web >tutoriel CSS >Utilisez CSS pour créer des effets iframe_CSS/HTML

Utilisez CSS pour créer des effets iframe_CSS/HTML

WBOY
WBOYoriginal
2016-05-16 12:11:111477parcourir

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;}


[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 %;>


[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：
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：CSS implémente un simple code de prévention des liens hypertextes d'image_CSS/HTMLArticle suivant：CSS implémente un simple code de prévention des liens hypertextes d'image_CSS/HTML

Articles Liés

Voir plus