ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して iframe 効果を構築する_CSS/HTML

CSS を使用して iframe 効果を構築する_CSS/HTML

WBOYオリジナル: 2016-05-16 12:11:111475ブラウズ

iframe アプリケーションは非常に一般的であり、次の 2 つの共通の要件があります。
1. iframe 効果を得るには、スペースを大幅に節約できるスクロールバーを表示します。
2. フレームリンクを実装するページを埋め込みます。
iframe を使用するのが不便な場合は、次の解決策があります:
CSS レイアウトを使用して最初の要件を実装すると、1 ページを節約でき、効率が向上します。
2 番目の要件は、xmlhttp を使用してリモートで取得できます。
A. iframe を直接シミュレートします
レイヤーをコンテナとして使用します

コードをコピーしますコードは次のとおりです次のように: >

CSS を使用して iframe 効果を構築する - Css Iframe - RexSong.com

CSS を使用して iframe 効果を構築する
出典: <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>A. iframe を直接シミュレートし、レイヤーをコンテナとして使用します

<h4 style="font-weight:bold;">·</h4>CSS のみを使用して無制限の階層ポップアップ メニューを作成します<p>
 
   ·<a href="http://homepage.yesky.com/" target="_self">ブラウザのスクロールバーパラメータの概要</a>
 
   ・</p>CSSスタイルシートを導入する4つの方法を紹介<p>
 
   ·</p>2つの方法で実現されるテキストの縦方向の配置効果<div id="content">
 
   ·<p>Web デザイン向けの高度なレイアウトの 40 例<a class="grey-s" href="http://homepage.yesky.com/485/2354485.shtml">
 
    ·</a>GMail から W3C 標準と Ajax について学びます<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">
</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"></a> <a class="grey-s" href="http://homepage.yesky.com/251/2352751.shtml"> </a>[Ctrl+A すべて選択 注: </p>外部 Js を導入する必要がある場合は、更新して実行する必要があります </div>]

ボディを使用するコンテナを作成する
コードをコピーする

コードは次のとおりです:
html {オーバーフロー:非表示;高さ:100%;背景:#fff;ボーダー:0;}

* html {パディング:100px 0 0 100px;} ボディ {オーバーフロー:スクロール:#f00; 0; 位置: 絶対; 左: 100 ピクセル; 右: 0; } * 幅: 100%;}

CSS を使用して iframe 効果を構築する - Css Iframe - RexSong.com

[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环境下测试通过

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS は単純な画像ホットリンク防止コードを実装します_CSS/HTML次の記事：CSS は単純な画像ホットリンク防止コードを実装します_CSS/HTML

続きを見る

CSS を使用して iframe 効果を構築する_CSS/HTML

関連記事