|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。
$ q2 @/ I3 i! @% d3 Q我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。
* d" ` ~% j* t5 b代码示例：
4 y6 ]- A* M( R0 \( i. ]| <div class="news">! V# Q7 i3 }+ _: e8 G: L, [
<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>6 c) i2 W! ?* F
<div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
8 C+ S/ Q( C4 }2 V% q</div> |
' O/ Z3 z9 h2 [; H O
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。8 \% t# `) w& ?7 ?
我们来比较一下：
# E4 M6 w" v+ e4 @7 i+ Q| <div class="news">
) I# Q* D/ x! c <div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
- R9 f6 I ?& i$ e- r K <div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>( z+ V$ b2 J' G1 D
</div> |
' F. d: \- [& p7 b( M
如果再加上这样一条：% E8 \! ]" {" c3 e) u
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
: _* I/ q$ p( @, Y: o4 p
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。
7 a5 t7 k6 z, T) f5 s w/ L再次改进：
, y! k4 h: T! I$ J6 f: X2 y: t| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
5 J e' H* j Z k, |- @% p
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）
. f) @7 p- h: V4 I% l' N/ Z//2008-02-29，修改by：何为
: i6 C) o8 E6 O# r9 m忘记加上了 | <style>.news{float:left;}</style> |
# \" O7 X* P* q
有人问要文字上右下都环绕，我改了一下，如下：
) ^+ d( M5 _2 R# Q| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
5 w3 s# a n! m+ `( h; c"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6 Z* S9 M- H# X0 W- p/ W<html xmlns="http://www.w3.org/1999/xhtml">% ?. K, ~. V# x4 B# Z
<head>2 B* m1 k7 i9 X: f, T4 D/ i
<meta http-equiv="Content-Type" c />
8 _: f9 a0 x5 H! K$ Z' j<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>7 u0 L0 ?! k; E) S+ z/ x7 d7 P
<meta name="keywords" c />( l& ~6 O/ I" Y) n2 H i
<meta name="description" c />% t+ E; G. Z8 \) }
<body>6 G. h2 x1 d; g+ K# ?# ~
<div style="float:left;">
3 d- G- t, z$ y! n3 _<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>0 Q& K) P+ y4 U$ |
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>
& Y+ C6 d+ b$ V! G9 ]. F! P) F
4 p9 k3 r# K; A4 l8 a3 B<p>新闻内容</p>( q" f; Q9 l* t/ U$ Q: z" I" d
</div>. e; W$ m+ }4 {4 E( `& v" D
</body>
8 D2 R$ @1 ]/ g X* M9 b! q</html>( l" z( E$ `! O4 i7 K5 @
|
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗