|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。
: F" \! g' N8 @& d我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。
) ^0 Z% s4 q C; C. ~3 I代码示例：
9 q/ {' S+ J) ?, P| <div class="news">' k7 q% T- x4 t, j$ N
<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
8 l8 }* L2 B6 W6 `) h <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>6 K0 g, R Y7 ?1 y. c
</div> |
0 B6 W. w3 _. W1 d- a
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。* `$ l; X2 `, y7 `/ y$ G
我们来比较一下：
; k% X# T5 K) ]4 a* S& |! f| <div class="news">; r& k p/ L. C
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
$ u0 z/ g5 B8 t' w2 S h0 n <div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
& o9 v; a6 a$ A+ B) {</div> |
% r% W) E5 Q& Q0 ]8 t如果再加上这样一条：
8 f: P8 H) ^4 ~' ]& l; D! A( w| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
8 O0 j/ o, E4 ]' {, d. o" l
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。" g: Y7 H X- x7 W
再次改进：
X3 q2 _: {) i| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
& I6 d0 X& y; E( g* y- e9 P
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）
7 ~& Q2 f, x4 B0 q' G2 g( s" X//2008-02-29，修改by：何为
8 z& v/ a& g" H' [7 R' ]0 I: c忘记加上了 | <style>.news{float:left;}</style> |
* k! A) ?# [ B; T+ b0 m4 [
有人问要文字上右下都环绕，我改了一下，如下：
0 O$ t# Q% V) b| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN": U, M; U! V, O: ^3 X. A
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">% [3 h" U! f4 S
<html xmlns="http://www.w3.org/1999/xhtml">8 o$ D. o7 F/ w- L9 }! w+ s
<head>
( Z! p2 z1 J, _ I<meta http-equiv="Content-Type" c />" N2 f4 g4 K5 N
<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>
: K7 G' K( W7 T m<meta name="keywords" c />
3 Q l4 Y [3 r( B' L: e9 j<meta name="description" c />
7 i! j' D% O; ]: R8 P<body>
( w b& ~3 h8 W<div style="float:left;">! b! [3 j& b$ `
<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>' f1 d! C& b$ z7 }
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>+ i9 ]8 O. Q2 W, k8 m: ^
3 |' Q* j+ m9 p% ^6 b- f<p>新闻内容</p>0 o( p0 H; z, P$ a
</div>* i9 ?8 }. _- ^# ]- R& P; G
</body>
: V0 o; w" A) x7 `9 h* ]( \</html>& ? d3 `3 k9 U6 @# l2 d
|
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗