|
|
登录后查才能浏览下载更多咨询，有问题联系QQ：3283999
您需要 登录 才可以下载或查看，没有账号？入住遨海湾
×
是否看见大站的广告都是放在内容中间实现文字环绕的呢，一般普通小站广告只能放在内容开头或者结尾，也许大站的cms系统带这个功能吧，我们小站常用cms的基本没这个功能，因为内容标签里面不可能再自动加入一个广告标签，除非你添加文章的时候手动编辑，那不累死。9 n0 S, g% Z& C& a! [
我也一直没想到过用css来控制，主要是没想到这个clear属性，今天偶然看到一个介绍，才知道原来实现文字环绕是如此简单。
! q6 o: b. }4 c0 y8 k6 e代码示例：
7 a4 f# J& R+ C* u- C) n) D- p( G| <div class="news">
5 J$ K8 X, ~1 z2 Z: l7 ~7 S9 R <div style="float:left;height:300px;width:0">一个宽为0的空白层，利用该层的高度控制广告层上下的位置</div>
: X; U: D) b- {0 Z <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div>
, k# p5 R+ R" J</div> |
. s+ b& u4 d8 L- N% U( M- Y E
关键在于clear:left的作用，clear有3个属性：clear:both，clear:left，clear:right，分别表示清除两边，左边，右边的浮动块。在广告层加上clear:left，那么就表示该层相对于空白层来说不浮动了，就往下移动了，太妙了，哈哈。
( W/ X( b) f+ _+ X# e Z& M我们来比较一下：
' ^8 u/ B5 O K6 b0 m- V" S! G7 k( @| <div class="news">
3 S. a; |. x1 ~! l6 r/ O6 H7 p, ]- y <div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div>
% b7 t0 u% H( ? n) r+ B <div style="float:left;height:250px;width:250px;">去掉了清除浮动，你就明白了它的意义</div>
) U( D+ G |* ^& o' C</div> |
' i$ B0 d2 ?; L) _( e! Z( _2 r如果再加上这样一条：
, L8 t( r8 b; X+ \3 D D" D| <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 |
) l; A& z5 R1 I2 I很遗憾，上面的测试发现只有ie可行，firefox和opera还有不同的结果，ie的效果是图片遇到广告层自动下移，firefox是不会下移，但是不会遮住广告层，因为广告层在最前，opera是图片不会下移，会遮住广告层，搞笑啊。
6 l; L! l' m; \ m2 f- B再次改进：' L% A3 J5 t5 g4 Z! _8 Q6 J& h T
| <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 |
$ r- i# }/ ~$ B5 n/ }& k+ ]) o0 w
终于可以了，比较完美了，广告内容环绕的效果就这样搞定了：）( b4 H& M$ z- v' ~% r
//2008-02-29，修改by：何为
5 S2 C D# j, p3 |% m忘记加上了 | <style>.news{float:left;}</style> |
. o- S* d5 z) W9 m) x D* @+ W$ S
有人问要文字上右下都环绕，我改了一下，如下：
# S) {& t0 s. u1 v| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"- U }9 E# [. }$ z% u( F# L
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> i5 b T* N+ t4 D$ }0 N' R
<html xmlns="http://www.w3.org/1999/xhtml">
" u7 D$ U6 j# U9 N. d9 B<head>
8 P+ d+ Q2 s T! G5 R<meta http-equiv="Content-Type" c />
/ e% |- X5 S# q1 f( r, g<title>利用css的clear属性搞定gg广告文字环绕 - by:hewei.org</title>
( {* O$ M" l" p F9 g6 n<meta name="keywords" c />
8 U L8 C; f+ S1 v& D, r<meta name="description" c />+ M) ~$ V1 C: L8 `& ^
<body>* g4 X4 k" J1 c* t& e( ]
<div style="float:left;">
4 \: e/ D4 `$ @. M<div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。宽为0就不能控制上下了，原因不知道。--></div>8 n3 C! J5 ] z# F. S
<div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码，firefox和opera还有少量偏差，需要另外调整，就不写了，基本可以。--></div>5 L1 [$ d3 @+ d8 |9 n
P3 P* ?9 H( _( m<p>新闻内容</p>2 O; D) g }' Y) |# m
</div>
7 y0 J2 `9 R% L( O6 z</body>
. S! q0 m) ]. _+ E8 a# |" j2 ~</html>
; C4 X' X; D [" P9 J3 y3 B! H |
|
|
IP卡
狗仔卡
发表于 2008-8-11 21:51:00
提升卡
置顶卡
沉默卡
喧嚣卡
鍙樿壊鍗
鏄捐韩鍗