CSS+DIV:让文本字符环绕在你的图片周围

太古遮天处女座

太古遮天处女座

2016-02-19 17:27

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐CSS+DIV:让文本字符环绕在你的图片周围,赶紧看过来吧!

  看到上面的效果,你也许以为这是一张带文字的图片而已;呵呵,用你的鼠标去选取文字看看,发现了吧,这完完全全是一张图片和文字的组合,下面我就来介绍它是怎么做的。

  先看看代码:

   以下是引用片段:
div id="info"
h2TRACKING YOUR IMAGES/h2
div id="holdit"
img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" /
em class="a420"/em
em class="a430"/em
em class="a400"/em
em class="a370"/em
em class="a340"/em
em class="a300"/em
em class="a270"/em
em class="a250"/em
em class="a240"/em
em class="a230"/em
em class="a230"/em
em class="a340"/em
em class="a340"/em
em class="a360"/em
em class="a540"/em
em class="a540"/em
em class="a540"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a540"/em
em class="a460"/em
em class="a490"/em
em class="a500"/em
em class="a500"/em
p"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"br /
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"br /
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."br /
With these few words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way.br /
"What's the matter?" asked Piglet.br /
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is--
and the two of them are now proceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?"br /
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle.br /
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together./p
/div
/div

   以下是引用片段:
#info h3{ text-align:center;
}
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; z-index:1; top:10px; left:10px; }
#holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif}
#holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; }
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}

  接着我们来分析一下红色加亮的部分:

  首先将包容对象#holdit设置成相对定位(确保等下的img绝对定位以它左上角为原点)

  接着把#holdit里面的img设成绝对定位且z-index高度为1,这样img就脱离文档流了

  将em标签设置左浮动,高度和p的ling-height要一样,再根据图片的图案分别设置每个em的宽度(记得要用clear来清除浮动)

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  最后把P设置成相对定位且z-index高度设置大于img的数值

  其实我们也可以直接将图片作为为#holdit的背景,这样就不需要专门为img来设置CSS了

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

STYLE
#info h3{ text-align:center;
}
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; z-index:1; top:10px; left:10px; }
#holdit p { margin:0px; position:relative; z-index:10; line-height:18px; text-align:justify; font-size:10px; font-family:verdana, arial, sans-serif}
#holdit em {display:block; float:left; height:18px; clear:left; overflow:hidden; }
.a230 {width:230px;}
.a240 {width:240px;}
.a250 {width:250px;}
.a270 {width:270px;}
.a300 {width:300px;}
.a340 {width:340px;}
.a360 {width:360px;}
.a370 {width:370px;}
.a400 {width:400px;}
.a420 {width:420px;}
.a430 {width:430px;}
.a460 {width:460px;}
.a490 {width:490px;}
.a500 {width:500px;}
.a540 {width:540px;}
.a550 {width:550px;}
/STYLE

div id="info"
h2TRACKING YOUR IMAGES/h2
div id="holdit"
img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" /
em class="a420"/em
em class="a430"/em
em class="a400"/em
em class="a370"/em
em class="a340"/em
em class="a300"/em
em class="a270"/em
em class="a250"/em
em class="a240"/em
em class="a230"/em
em class="a230"/em
em class="a340"/em
em class="a340"/em
em class="a360"/em
em class="a540"/em
em class="a540"/em
em class="a540"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a550"/em
em class="a540"/em
em class="a460"/em
em class="a490"/em
em class="a500"/em
em class="a500"/em
p"I shall have to wait until I catch up with it," said Winnie-the-Pooh. "Now, look there." He pointed to the ground in front of him. "What do you see there?"br /
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?"br /
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks."br /
With these few words he went on tracking, and Piglet, after watching him for a minute or two, ran after him. Winnie-the-Pooh had come to a sudden stop, and was bending over the tracks in a puzzled sort of way.br /
"What's the matter?" asked Piglet.br /
"It's a very funny thing," said Bear, "but there seem to be two animals now. This--whatever-it-was--has been joined by another--whatever-it-is--
and the two of them are now proceeding in company. Would you mind coming with me, Piglet, in case they turn out to be Hostile Animals?"br /
Piglet scratched his ear in a nice sort of way, and said that he had nothing to do until Friday, and would be delighted to come, in case it really was a Woozle.br /
"You mean, in case it really is two Woozles," said Winnie-the-Pooh, and Piglet said that anyhow he had nothing to do until Friday. So off they went together./p
/div
/div
运行代码复制代码另存代码

展开更多 50%)
分享

猜你喜欢

CSS+DIV:让文本字符环绕在你的图片周围

Web开发
CSS+DIV:让文本字符环绕在你的图片周围

CSS+DIV制作页面圆角效果

Web开发
CSS+DIV制作页面圆角效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计之css+div PK table+css

Web开发
网页设计之css+div PK table+css

CSS+DIV实现Yahoo搜索框的制作

Web开发
CSS+DIV实现Yahoo搜索框的制作

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS高级技巧:文字环绕图片

Web开发
CSS高级技巧:文字环绕图片

CSS+Div网页布局中的结构与表现

Web开发
CSS+Div网页布局中的结构与表现

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

网页CSS技巧:闭合浮动元素超级简单的方法

网页CSS技巧:闭合浮动元素超级简单的方法

浅谈网站收费

浅谈网站收费
下拉加载更多内容 ↓