[方法技巧] 用CSS构建iframe效果

okimg

超级版主

Rank: 8 Rank: 8

1^# 大中小发表于 2006-12-18 11:47 只看该作者

用CSS构建iframe效果

iframe应用很普遍，通常的需求有两种：

1，获取iframe效果，就是带一个滚动条，可以省不少版面。
2，要嵌一个页面，实现框架链接。2 i6 ~5 C5 \; H+ h7 ]/ f
) t/ M0 G+ i# M! Z% T2 s
如果不方便使用iframe，可以有如下解决方案：8 h/ l+ k4 W4 [9 h7 z; O
& m* }0 l( t5 Y2 u3 i  r, q+ p1 Q
第一种需求如果我们使用css布局来实现，即可以少一个页面，也可以提高效率。5 |; a: K  j! s; D
第二种需求可以采用xmlhttp远程获取。! f$ a3 n9 c, v% @2 z) d$ z
/ R7 y3 D: f2 k9 o
A. 直接模拟iframe
# v+ I* s. y& ~, O* U8 }
用层做容器
1 t. B- E! x5 x% P4 `/ k
  引用: 9 ]9 n. U* {" x2 A
#content { overflow:auto; height:200px; width:600px; background:#f00;} 0 I% ~" V$ m/ Q) ]' ?# y7 b5 D. ]' M

效果演示源代码：
% z6 h; b' x- ?& ?9 E
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">( [/ ~  {5 i) u4 l& A0 ?0 T0 E
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />2 T, ^9 t1 r% g; ~4 y6 C, s  y  c
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>9 U+ T- B* n. R- ^
<style># c1 V5 S! p0 |+ ?1 h
* { font:12px Arial;}  a$ C- b6 H% W6 m( U' r
html { overflow:hidden; border:0; height:100%;}/ Q( _8 t( X& y% S7 y
body { overflow:hidden; height:100%;}
#content { overflow:auto; height:185px; width:600px; background:#ccc; padding:10px;}- l# D- Q/ C& @0 ]7 j; a7 l( Y' `
</style>
</head>; n3 b$ T& ^* P6 Z. ~8 c
<body>
<h4 style="font-weight:bold;">用CSS构建iframe效果</h4>
<p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p>. s1 ~8 y" d* O# t7 v
<p>A. 直接模拟iframe，用层做容器</p>3 u* \0 S2 L/ V3 f- }6 l' V
<div id="content">; z( _9 }6 t# [0 Z/ u/ [" B7 Q
<p>·<a class="grey-s" : c( `1 @6 Q3 s7 D; K
href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a><br />
·<a
class="grey-s" + `" K3 U) }+ `/ L
href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br />
·<a 8 E; v5 X) t+ |. |( b; M; u5 k$ z
class="grey-s"
href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br />1 U$ G9 n4 }' H$ K; B) j- e$ ?% C" n
·<a & t# ?* `8 x) p  R& q9 B0 z
class="grey-s" + d6 I7 d" w4 Q$ ~3 U
href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br />
·<a
class="grey-s"
href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a><br />) r2 R: b+ Q* O' Z
·<a " V% b) a2 e0 \% F* x' P& [
class="grey-s" 0 e" o6 m* d7 a5 y
href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>& p$ ]% Y" \! ^) I. `# b3 M
</div>' W7 Q# ]7 m9 Y9 U! m- q
</body>
</html>! E" |0 ]- ]; v& A7 [0 d, o
" t) a) W% p: u# h' z6 c

6 N1 B, D, I- \, C; w( u& l
用body做容器

  引用: 7 B% u9 u4 ^. {; h$ g
html { overflow:hidden; height:100%; background:#fff; border:0;}* p0 a6 F1 H. c2 Q0 I
* html { padding:100px 0 0 100px;}$ o" U" ]; W; x5 C% v
body { overflow:scroll; background:#f00; margin:0; position:absolute; top:100px; left:100px; bottom:0; right:0;}9 M* y: y3 Q4 V; k
* html body { height:100%; width:100%;} ) A1 G! s1 o, w6 Z% A* d& g3 @

5 L( A/ F7 ?7 V% s6 c) ]3 }; z; A

效果演示源代码：
- y7 J2 T4 ?" }5 \% e; Y) q
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />5 E9 u8 j. w! U& |: `7 J4 F- J
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style>
* { font:12px Arial;}
html { overflow:hidden; height:100%; background:#fff; border:0;}
* html { padding:200px 0 0 100px;}
body { overflow:auto; background:#ccc; margin:0; position:absolute; top:200px; left:100px; bottom:0; right:0;}" b  P5 [5 `/ |/ p- E* i! \
* html body { height:100%; width:100%; position:static;}
#info { position:fixed; top:10px; left:10px;}
* html #info { position:absolute;}
</style>5 U  f8 u- f( `! y0 r, O& ~4 }
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>- |; m$ n/ G( V# Z" c& u
<script type="text/javascript">
_uacct = "UA-67927-3";. t( n; M3 ^# q
urchinTracker();) `' \& ?! I% U! B3 h. B
</script>5 f0 b! ^% `4 F' K
</head>) X6 [+ S9 k0 J& G, ^
<body>4 B. r5 l% e5 F0 Y: y% D
<div id="info">' j/ X3 m0 x4 r0 p# g  Y
<h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4>0 q5 P+ s6 k8 Q' \: R
<p>来自：<a href="http://www.webjx.com">网页教学网</a></p>
<p>A. 直接模拟iframe，用body做容器</p>
</div>  t4 |; p  V; V) n1 y
<p>·<a class="grey-s"
href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a><br />
·<a 8 r8 w  p2 y. @1 u$ H" s& J
class="grey-s" , n2 ^' ~- `: r3 Y
href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br />
·<a
class="grey-s" & I- m  z) R8 e) Q5 y+ W8 M% j
href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br />
·<a 9 t- \$ r2 E8 v9 `3 C1 k# b: {
class="grey-s" ' T1 z8 A) y/ N. o3 f! g) ~
href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br />) c: A* O; W/ e1 k4 Q3 ~; E, A
·<a 5 c9 ^/ W. I& A& x
class="grey-s" " H; V' S% O* ^
href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a><br />; @! b6 U: O" z
·<a 7 u' y2 Y, K2 D9 C
class="grey-s"
href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>

</body>
</html>
$ M# d7 v$ L$ V$ b* z, |9 Q
) U4 s# _) i. m: R
8 u+ {, p# J4 ^/ A
B. 绝对定位模拟iframe4 F% `( T' W$ Z( V5 d3 i: w% R

滚动条在外边4 Q+ N) {: b, I+ Y, Q2 s
. v9 {  n- r) L
1 B+ |% K6 t' t. N
% m. y9 L! z) h; o
  引用: + s1 c  k( T# d' F4 |( s8 S
html { overflow:hidden; border:0; height:100%; max-height:100%;}
body { overflow:hidden; margin:0; height:100%; max-height:100%; position:relative;}
1 C: b1 ?* {: _3 r( h
#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;} $ b- G# F4 X1 `; a
3 C3 l" N$ O0 s

效果演示源代码：0 U# k% ]% H6 b7 J
" @6 c, `* X. j" J7 J% M" J& H9 U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">& _7 x, X1 d' q6 b
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />, J! n" q7 R2 Q0 F) Y( ?) }
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style>: M1 e" ?% [' S1 R3 Z5 u; F; `& @$ H8 A
* { font:12px Arial;}& n1 B! O, T+ |
html { overflow:hidden; border:0; height:100%;}* {( \) w6 j: i) w  ^
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;}% d+ {2 A+ d) H9 P
#foot { position:absolute; bottom:0; right:16px; width:100%; background:#ccc; height:50px;z-index:2;}/ l2 @' }4 Y( [+ Z$ n4 p3 p. L
</style>  ^8 p+ t9 e& X& Z
<script type="text/javascript">
_uacct = "UA-67927-3";* m8 Y% K4 ~8 }/ D) \8 d
urchinTracker();
</script>% n! R0 E4 O# s' W
</head>
<body>. P  |$ z' j5 v) M) y
<div id="head">, w) F8 o, A/ z: _3 Y
<div style=" padding:12px 0 0 26px;_padding:6px 0 0 26px;">% G. Z) t# f, ], U8 q3 d
  <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4>
<p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p>4 v; d8 K  M3 F: T
  <p>B. 绝对定位模拟iframe，滚动条在外边</p>+ d8 ]9 F2 p9 k# Z: v
</div>2 ~- d- f' y+ o' [1 I# r3 I
</div>, H0 _) F* S( t0 K
<div id="content">
<p>·<a class="grey-s" ) `: e% g1 n0 `+ W# O
href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a><br />( Q7 \3 Q) S1 d% E
·<a
class="grey-s"
href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br />
·<a
class="grey-s" * z1 Z3 F! F5 W5 o. ]
href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br />* M- r& b0 @8 o8 M# W$ ^/ o& J1 R
·<a : G# v7 O6 T% B" Z4 |/ L# j$ c
class="grey-s" : n* w- k* x/ L  B
href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br />
·<a   m. G7 ^9 _1 V% Y) i: l: T0 T
class="grey-s"
href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a><br />0 T# V4 J' Q, B# n! x8 P' ~( q
·<a
class="grey-s"
href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>+ s$ n* i) E% W5 {5 T* e
</div>0 x. H& x4 n+ X- X# f/ S
</body>
</html>

- r! [5 `$ t! J5 R
滚动条在里边- q, _3 h& u2 q  ~

+ e, R& c5 f- n
4 J" J6 x2 h+ Z& g. F& k7 L
  引用: * g, N- d: N2 `$ x; B* _( I' z# b
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}1 ?/ r* R( q0 T$ X, y1 m) ]
body { height:100%; max-height:100%; margin:0; overflow:hidden;}4 I$ ?* T' ~, \- ^0 Q- w

#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%;}
; b1 ~$ Z1 |9 S! j0 M( t. S$ u- Y0 `
#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;}

, C! q$ j, o: Y& F/ O

效果演示代码：; ^  U; l4 n: f2 b. A5 F

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">4 }% I9 J( Y6 w
<html xmlns="http://www.w3.org/1999/xhtml">
<head>, D# i( I/ b; {. z6 k8 A( b8 t
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用CSS构建iframe效果 - Css Iframe - RexSong.com</title>
<style type="text/css">
* { font:12px Arial;}
html { height:100%; max-height:100%; border:0; overflow:hidden;}
* html { padding:100px 0 50px 0;}: }$ h0 I" x  U+ s* w- w
body { height:100%; max-height:100%; margin:0; overflow:hidden;}5 Y' G: p2 C% F, p! K- s
#content { position:absolute; top:100px; bottom:50px; left:0; right:0; z-index:3; width:100%; overflow:auto;}. c( I0 z/ `8 m0 }5 k2 I9 ]
* html #content { top:100px; bottom:0; height:100%;}
#head { position:absolute; margin:0; top:0; left:0; width:100%; height:100px; background:#ccc; z-index:5;}
#foot { position:absolute; margin:0; bottom:0; left:0; width:100%; height:50px; z-index:5; background:#ccc;}
</style>+ X: {7 @' m6 S
<script type="text/javascript">
_uacct = "UA-67927-3";
urchinTracker();
</script>7 s( t; d& R0 F2 E
</head>! {$ c: b; J$ O6 X  d
<body>
<div id="head">
<div style=" padding:12px 0 0 10px;_padding:6px 0 0 10px;">+ r8 O7 V  y4 k+ [/ {  d. r' O
  <h4 style="font-weight:bold; margin-top:0;">用CSS构建iframe效果</h4>. z# K- S8 a9 z' C
<p>来自：<a href="http://www.webjx.com/" target="_self">网页教学网</a></p>
  <p>B. 绝对定位模拟iframe，滚动条在里边</p>. ^' R: ~) X* d2 u. r: \
</div>
</div>
<div id="content">
<p>·<a class="grey-s"
href="http://www.webjx.com/485/2354485.shtml">仅用css编写无限分级弹出菜单</a><br />
·<a 1 ^- i2 g; Y0 f. l9 i) L' ]! ]
class="grey-s"
href="http://www.webjx.com/442/2354442.shtml">浏览器滚动条的参数总结</a><br />) K% }# f/ P& Z
·<a & [# j* ]- t4 F  _7 c
class="grey-s" ; ?1 [2 Q# e* y
href="http://www.webjx.com/436/2354436.shtml">引入css样式表的四种方式介绍</a><br />. e; }  e! H1 b9 U
·<a ' t* m2 B# B4 D# p$ C* `4 M
class="grey-s" 1 {" o4 \/ ?1 u, k1 E
href="http://www.webjx.com/424/2354424.shtml">两种方式实现的文字竖排效果</a><br />
·<a
class="grey-s" ' P% i- d! |3 t: ~; g6 u) P  m
href="http://www.webjx.com/336/2352836.shtml">网页设计高级布局40例参考</a><br />( D7 K0 S1 ^- e, P
·<a : a+ W1 u6 o  J. ]: @) O
class="grey-s" + K  {, U/ u5 |& |
href="http://www.webjx.com/251/2352751.shtml">从GMail认识W3C标准和Ajax</a></p>& {8 `% ^3 P4 [# ~4 h  b$ H, i
</div>1 _- E8 T* i5 U
</body>
</html>

TOP

设计图片在线处理软件

‹‹ 上一主题 | 下一主题 ››