|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。3 v, o2 c8 y+ ?( m) @
我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。# W& r4 L$ J5 Y' f. ]
代码示例：
- j! F5 p X, p- N, g, e' x| <div class="news"># p& I% N4 Q. i# \
<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
) Y6 N8 ~7 ~2 e T0 {# J: F <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
# r( P8 I7 e" ~0 }9 b</div> |
1 [. b/ K X# _/ n
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。
0 \# k/ X8 k, J7 @我们来比较一下：
! X* b$ l) y/ [) u x) I| <div class="news">& T8 U" X6 E2 l2 x# C- l( }
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>5 |0 L5 _+ C1 x$ }
<div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
" l# n; u! b/ X4 q( h0 `/ \</div> |
& b! U4 a" v n& E3 e; O8 e& ]如果再加上这样一条：" a: i } L% Y& j" ^
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
( I) z( j- H3 }) ?8 C; U4 _
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。1 \+ @: z, a1 t0 }$ I
再次改进：
. r4 w4 k7 t* e0 N6 l| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
$ T( P. h5 z( p8 L
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）
. V- a: T; T3 O( R3 B0 s9 z4 D//2008-02-29，修改by：何为1 q! c! d1 ^) K S& r& X% O$ V
忘记加上了 | <style>.news{float:left;}</style> |
& I3 @0 H ]: b2 v3 x有人问要文字上右下都环绕，我改了一下，如下：
2 C$ Z" ~# M, [| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
( \3 [8 I- A% X$ r/ C. v6 d"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 {4 N6 V b3 A9 m( ?( `<html xmlns="http://www.w3.org/1999/xhtml">- `9 x+ j1 U* v8 A+ ^# H5 U
<head>" M3 K7 N+ j4 L$ C
<meta http-equiv="Content-Type" c />
6 h3 y2 `- z) Z) M! |4 [<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>
6 n& A5 ~& B' a1 \<meta name="keywords" c />7 T. b, @. g+ G, W
<meta name="description" c />% c/ p, B+ c" X/ o3 b
<body>- D' z& |& T6 s! _
<div style="float:left;">
" q4 Z- o. R/ l. Y0 x<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>
F' Z3 \0 ]+ }' T& R<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>
( j2 m4 E; m) W; @ J
: T: k$ v3 |- ?2 C( Y" k& b<p>新闻内容</p>
. q; q2 i) z( @( y/ {9 J/ g; w" ?. o0 ], ]</div>
! n1 n) C% m: x9 ^' z0 ^* Y. A</body>
! u6 y2 F' V w4 v' b</html>- I$ Z% t! Y$ V; G
|
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗