|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。
5 ]$ @" R; d2 X5 Y4 q我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。5 i; z$ v7 K \" N+ S' Y
代码示例：0 P9 b/ d0 {- _
| <div class="news">* ~/ S7 C$ l/ a$ _2 Y
<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
$ T) U6 @- G6 o) I8 ` <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>4 O* J6 Q% O, O: S0 w6 m8 E
</div> |
6 D* T2 O9 h5 H0 m
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。
2 A& r0 o8 h1 @/ S- k7 h# b我们来比较一下：
- e' x+ o/ b$ R/ R% q( Q| <div class="news">
/ N- m i, w4 l' B <div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>2 X% R8 B( \- y- I3 X
<div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>1 ]6 v7 g W1 I. S( h8 {- l
</div> |
; j0 t' s6 `# e6 w- ]4 n0 I如果再加上这样一条：0 d: o, ~1 t( W1 }6 e0 ]( Q8 D& ?( {
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
* y/ K5 E/ c, c9 V: ?( L
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。7 H. S% V% M" @6 F3 `% Y* Y: A- J
再次改进：: |8 `6 B [2 H. D# p6 S7 C
| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
' v8 `! R. C% q9 g# H( Y
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）
0 t& K3 Y" D, I5 i' ?2 J d6 D$ A//2008-02-29，修改by：何为
$ v8 v/ j; X7 [忘记加上了 | <style>.news{float:left;}</style> |
1 K# \/ x! f0 R% ?5 `1 C$ U
有人问要文字上右下都环绕，我改了一下，如下：
! D8 i W: b, W4 _| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"" f0 c1 T' u& p7 _+ t l
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
$ A) n1 l. @) x3 V4 H& H<html xmlns="http://www.w3.org/1999/xhtml">
]6 v( F7 \: c" B<head>5 z. p U, u! J6 d: l
<meta http-equiv="Content-Type" c />
5 _) f2 ~* b C5 r- K. @<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>
: U6 a. j/ e# O N' D% Z<meta name="keywords" c />, q: m, I) f# o7 I- `/ N" z; ?
<meta name="description" c />, O. B8 G5 z1 u& G( `# |
<body>
6 ^# ^4 ]; U3 d# L- N0 t. \<div style="float:left;">9 ]& Y$ H% @* A- r5 a! H* N
<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>
m$ R3 s/ b' M0 S, S& z<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>5 U; M' w) T" t# s
9 Z2 O# |8 b2 j
<p>新闻内容</p>1 ~+ _1 A) ?. c( F& Q8 i( I
</div>
5 E+ Q8 B+ K m: n+ d3 E</body>
/ \$ o0 N. b! X! W( M</html>
9 _; F* z. u8 f( g0 l |
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗