|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。- `- h4 O5 X. N3 u& @9 k
我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。
( |; S5 e0 L, t; {7 B代码示例：
6 y; M8 q5 y- ^# Q; e| <div class="news">8 `# {& {/ M; G" ~
<div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>% L" c' ~2 _4 n, ~; N. C# ?
<div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>. V/ s* q5 z s+ d Z1 s3 s, J
</div> |
& q W: N- y; q" L1 `2 h0 {6 \# K, y
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。. {+ y6 I6 ?1 D, F( U* \5 y3 B" h
我们来比较一下：5 g+ n; `$ y" S- k
| <div class="news">* y+ Z! H# L, ~: \/ R& X9 T. q
<div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>4 w. H5 x# `) x( n7 ?+ C& z( E) D( \
<div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
1 G& Q B) o9 f F0 {% d</div> |
8 Z( W+ _, _: ]. a, @2 Z2 o0 R" S如果再加上这样一条：% _7 e7 G$ v4 u |& C, x! f
| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
( y; n8 F% R E. H/ I: J q
很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。
! _( N; Q5 R9 a9 R6 K再次改进：
5 A( s% u `1 B4 f) Q( s| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
+ D8 E* ]! i5 a. X
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）
, r! y0 {& u/ v8 A//2008-02-29，修改by：何为( f) U9 o( j% ^4 e0 U+ ?
忘记加上了 | <style>.news{float:left;}</style> |
& c. S9 J& `5 t/ b# [: ]/ [( C
有人问要文字上右下都环绕，我改了一下，如下：: P7 I; u% T7 m& Y$ C/ V5 R
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" `2 O; Q8 h Z' R' }
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">: V$ j2 X$ @& s, h- B5 C
<html xmlns="http://www.w3.org/1999/xhtml">
0 F% t/ i' `+ V1 v2 M<head>
; b+ U( Y( ?4 K7 q, n3 T<meta http-equiv="Content-Type" c />
: f; w O" J7 J7 Q<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>+ _ X" t1 H& W8 N( {3 y
<meta name="keywords" c />
$ ^ F) \3 E/ p& J5 H<meta name="description" c />% a. E/ L$ ?! S$ A4 ?& d
<body>9 A7 }% ~2 m! ?2 r
<div style="float:left;">
; {2 I- |' K! a, |+ x" c" @: b<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>
) `( ~6 n8 W% c8 S, z! j) ~<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>
2 |" j1 s2 o3 B) t5 X. L
: ]2 ?& |. p" U8 U9 R! Q1 h% S<p>新闻内容</p>
: d |- n i3 V1 `1 X& Z</div>
; q% m! C; L6 @: X% Z4 l</body>, p! O2 b4 `$ ~6 f8 M" J7 u, A
</html> H% F" L# ^; N
|
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗