CSS を使用して iframe 効果コードを構築する_エクスペリエンス交換

iframe アプリケーションは非常に一般的で、一般的な要件が 2 つあります:

1. iframe 効果を得るには、スペースを大幅に節約できるスクロール バーを表示します。
2. ページを埋め込んでフレームリンクを実装します。

iframe を使用するのが不便な場合は、次の解決策があります。

CSS レイアウトを使用して最初の要件を実装すると、1 ページを節約でき、効率が向上します。
2 番目の要件は、xmlhttp を使用してリモートで取得できます。

A. iframe を直接シミュレートする

レイヤーをコンテナとして使用する
#content { overflow:auto; height:200px; width:600px; background:#f00;}

効果デモのソース コード:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS を使用して iframe 効果を作成する - Css Iframe - RexSong.com</title> * {font:12px Arial;} html { オーバーフロー:非表示; ボーダー:0; 高さ:100%;} ボディ { オーバーフロー:非表示; 高さ:100%;} #content { オーバーフロー:自動; 高さ:185px; 幅:600px; 背景:#ccc; パディング:10px;} スタイル> <h4 style="font-weight:bold;">CSS を使用して iframe 効果を構築する</h4> <p>出典: <a href="http://www.webjx.com/" target="_self">Web ページ教育ネットワーク</a></p> <p>A. iframe を直接シミュレートし、レイヤーをコンテナとして使用します</p> <div id="コンテンツ"> <p>·<a class="grey-s" href="http://www.webjx.com/485/2354485.shtml">CSS のみを使用して無制限の階層ポップアップ メニューを作成</a> ·<a href="http://www.webjx.com/442/2354442.shtml">ブラウザのスクロール バー パラメータの概要</a> ·<a href="http://www.webjx.com/436/2354436.shtml">CSS スタイル シートを導入する 4 つの方法の紹介</a> ·<a href="http://www.webjx.com/424/2354424.shtml">2 つの方法で実現されるテキストの縦方向の配置効果</a> ·<a href="http://www.webjx.com/336/2352836.shtml">Web デザインにおける高度なレイアウトの 40 の例</a> ·<a href="http://www.webjx.com/251/2352751.shtml">GMail から W3C 標準と Ajax を理解する</a></p> </div>