|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。
) b1 Y. W: p4 S# g7 L/ f我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。1 q$ t0 Z2 V( Z4 w7 p
代码示例：
5 p, W X& `4 `# {- y- C9 C7 D| <div class="news">
0 L: A& ~/ D( P) z( A <div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
1 _1 D( D' P' ~9 Q$ [ <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>4 u3 M1 M) h; ?7 ]1 [
</div> |
% t" M+ y& \, I# _1 z: f' g4 ?
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。
$ k$ h3 U' m+ X; m$ b/ D我们来比较一下：
6 o/ | z& g+ y+ ^6 O( J5 {- @( I, n| <div class="news">$ U/ [; Z+ e+ o8 f
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div> c. o( _9 V: V. O/ A; ~6 H; V
<div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>' `% Z7 k1 D( V. l& F( ^
</div> |
+ a/ ^9 A; i3 U, ^
如果再加上这样一条：- D, R5 ^; U# t$ P9 Y4 Y$ |
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
2 j' g1 E3 {, f) N# \1 |' ~很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。9 K$ r+ d+ e1 T/ z) l+ `
再次改进：7 b* b* I& ^' K$ v
| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
( i- e3 |! t0 w ?终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）& C/ r3 W" }; V Y7 ]; {& U B2 Y
//2008-02-29，修改by：何为$ |3 D0 r6 r5 H& }& v
忘记加上了 | <style>.news{float:left;}</style> |
: c; C/ i) }5 y9 Q- x3 R0 d& H
有人问要文字上右下都环绕，我改了一下，如下：
' }# s- O0 g$ A$ ~2 K* d: D* f- X| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
! }' s, G; S% H7 t- Y d: B1 g"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* ?0 E* Z' h" P2 ~: ~- T I* G# I3 E; s7 G<html xmlns="http://www.w3.org/1999/xhtml">
( y4 c. Q( j: a/ ?, Z* x<head>2 E1 F" o \% f
<meta http-equiv="Content-Type" c />
9 N2 `$ w) x2 J7 A4 v! @1 y<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title># Y5 p( }! }4 |! G* D( Z8 B9 C! |
<meta name="keywords" c />* y) B# K# V! ~* g; s* c
<meta name="description" c /> b Y' A$ o! V2 {
<body>) _2 b2 Z" L% j/ |6 @. d
<div style="float:left;">! B" ^, b7 X: Z8 Y& x9 `' ~
<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>
k' @) R, ?! C& n<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>) a% G2 S) Q* X! e; D% p
3 L) r$ _, U( [$ h1 x# L) f) t
<p>新闻内容</p>( n4 J3 g0 ?5 W+ i$ h
</div>, e3 r5 c. H, }
</body>
0 q- x) ?+ H* d0 {9 u/ X</html>. ]' N! j7 p* t& P/ x* q
|
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗