网站设计网站建设CSS+DIV:让文本字符环绕在你的图片周围_网站制作 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

北京网站制作HTML元素语义的分类
 北京网站建设CSS编写过程中常见的10个错误
 网站制作Div+CSS布局入门教程(全)
北京网页设计CSS层叠样式的主次顺序
 北京网站建设在DreamWeaver中编写CSS的一些习惯建议
 网站设计教程/dreamweaver/高级关于 Dreamweaver 的插件
 网页设计Flash 菜单简要说明（2）
北京网站建设新手三小时制作MTV-flash mx 2004 教程
 网站设计给FLASH初学者的10点制作经验
 北京网站制作使用html表格和CSS进行混合网页设计

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网站制作 >> 网站设计网站建设CSS+DIV:让文本字符环绕在你的图片周围

网站设计网站建设CSS+DIV:让文本字符环绕在你的图片周围

作者：北京网站建设日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com

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

　　先看看代码:

以下是引用片段：北京网页设计北京网站制作
<div id="info">网站建设
<h2>TRACKING YOUR IMAGES</h2>网站制作
<div id="holdit"> 网站设计网站建设
<img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" />北京网站制作
北京网站设计
网站建设
网站建设
网站设计
北京网站建设
企通互联
北京网站设计
北京网页设计
北京网站制作
北京网站建设
网站设计
 www.qitongnet.com网站设计
北京网站建设
北京网站制作
网页设计
北京网站制作
北京网站制作
北京网站设计
网站设计
北京网站建设
北京网页设计
北京网站建设
北京网页设计
北京网站建设
网站制作
北京网页设计
北京网页设计
网站制作
"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?" 北京网站建设
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?" 网站制作
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks." 北京网页设计
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. 北京网页设计
"What's the matter?" asked Piglet. 网站建设
"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?" 北京网站建设
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. 网站设计
"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. 北京网站制作
</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来清除浮动)

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

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

<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">
<h2>TRACKING YOUR IMAGES</h2>
<div id="holdit">
<img src="/imagelist/06/24/4fnpgj5042e6.jpg" alt="Winnie the pooh" title="Winnie the pooh" />




























"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?" 
"Tracks," said Piglet. "Paw-marks." He gave a little squeak of excitement. "Oh, Pooh! Do you think it's a--a--a Woozle?" 
"It may be," said Pooh. "Sometimes it is, and sometimes it isn't. You never can tell with paw- marks." 
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. 
"What's the matter?" asked Piglet. 
"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?" 
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. 
"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. 
</div>
</div>

北京网站建设

北京网站设计

字体：【大】【中】【小】

上一篇：北京网站制作DIV下图片自适应解决方法

下一篇：北京网站设计避免页面布局被大尺寸图片和长字符串破坏

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

网站设计网站建设CSS+DIV:让文本字符环绕在你的图片周围