|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。
6 [1 [8 \. q8 D1 l/ E* O我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。
# f9 U& H9 B& P& Q" m代码示例：
! ?* {5 Z# }# }( x| <div class="news">
+ {1 D7 q# |0 y* T <div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
( A" H8 [) S; v& j! u/ l7 j" D <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>! [3 F9 |/ `4 B0 ^, V8 W) u3 D
</div> |
* T# m1 z; y3 ~; X$ Y" @关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。
! }4 D4 O2 F; j9 }7 o. Z+ o8 [我们来比较一下：
' |" }4 a |: q1 D3 i| <div class="news">
8 A- X: e: S& `( |' r6 M. E z <div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
+ B, Y/ n: U) J! }2 o <div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
# y" V; l- Q3 W1 F/ W</div> |
! V3 f( b, Z& G2 q! \$ s
如果再加上这样一条：# ?5 k) [5 X. ~
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
/ S; Y/ t1 W% S5 ?% w7 t o8 v
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。9 e3 k2 T$ _' a, C$ ?
再次改进：" e! [6 `' D+ ?; l5 A9 Q6 a5 n$ ?2 K
| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
( l1 p5 J/ n- q1 c3 j! u- r$ {4 h; e终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）; }7 |8 A! G* \/ E# V, w& u
//2008-02-29，修改by：何为: R% u9 ]; _2 ^2 b" h9 }/ ~
忘记加上了 | <style>.news{float:left;}</style> |
; x/ b2 z7 U1 l0 w# g有人问要文字上右下都环绕，我改了一下，如下：
1 m* i: [3 A/ D2 r, u, A& M7 d| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
5 I7 j$ c5 j% H* M( h! I3 {& N"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9 _( |. `4 Z2 M2 O+ e. B<html xmlns="http://www.w3.org/1999/xhtml">
! e; G; j& t! i! n# W<head>
- C2 w0 w; ]; A! p- A5 K<meta http-equiv="Content-Type" c />& O. h3 s6 z" J
<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title> _( Y) i$ t4 P9 H* W; k" Y. z, Z* f) j& z
<meta name="keywords" c />+ ]/ P' k, y s) V# F+ k
<meta name="description" c />: J5 v9 M/ Q) V% q% |$ B6 l5 I
<body>
, Z( P6 h4 s2 n$ w( ~<div style="float:left;">
, J1 ~& G3 T* Q! ]7 Z# o1 Y. A6 W I<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>
, \4 K9 f: p4 A+ B% _( _! B<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>& r$ Y. W6 q; V. N$ s
2 y. t; n# G- R2 [) q<p>新闻内容</p>5 {: _+ s9 c5 Y. x
</div>6 [$ }1 y+ f% U9 b7 N" w
</body>
5 l7 ?3 m( _) }) \</html>
* V: e0 }2 V: d6 E' K. T+ i- w |
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗