CSS+DIV:讓文本字元環繞在你的圖片周圍

來源:互聯網
上載者:User
css

  看到上面的效果,你也許以為這是一張帶文字的圖片而已;呵呵,用你的滑鼠去選取文字看看,發現了吧,這完完全全是一張圖片和文字的組合,下面我就來介紹它是怎麼做的。

  先看看代碼:

  

以下是引用片段:
<div id="info">
<h2>TRACKING YOUR IMAGES</h2>
<div id="holdit">
<img src="http://www.webjx.com/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來清除浮動)

  最後把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="http://www.webjx.com/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>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.