XHTML+CSS应用教程——利用CSS做的文章配合图片效果
这个例子是我第一次见到这种文配图的效果，实在是另我大开眼界啊。有机会使用在网页中的话可是显得十分的厉害哦。至少我看到这个例子的时候是没有想到怎么实现的。
实际效果
<style type="text/css">
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; top:11px; left:6px; z-index:1;}
#holdit p {position:relative; z-index:10; text-align:justify; line-height:18px;}
#holdit em {display:block; float:left; height:18px; overflow:hidden; clear:left;}
.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="holdit">
<img src="pooh.jpg" alt="Winnie the pooh" width="700" height="500" 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>
#holdit {width:700px; position:relative; margin:3em auto; padding:10px; border:1px solid #ddd;}
#holdit img {position:absolute; top:11px; left:6px; z-index:1;}
#holdit p {position:relative; z-index:10; text-align:justify; line-height:18px;}
#holdit em {display:block; float:left; height:18px; overflow:hidden; clear:left;}
.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="holdit">
<img src="pooh.jpg" alt="Winnie the pooh" width="700" height="500" 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>