在網(wǎng)站建設時(shí)使用float屬性來(lái)實(shí)現圖片的文字環(huán)繞，另外，除了float屬性以外，再配合使用padding屬性和margin屬性，使圖片和文字達到一種最佳的效果。float屬性在網(wǎng)頁(yè)設計中的作用是使對象產(chǎn)生浮動(dòng)，其語(yǔ)法如下：
{float:left|right|none;}
float屬性共有3個(gè)值，其作用分別如下。
?none：默認值，對象不浮動(dòng)。
?left：左浮動(dòng)，對象向其父元素的左側僅靠。
?right：右浮動(dòng)，對象向其父元素的右側僅靠。
【示例1】新建一個(gè)網(wǎng)頁(yè)，保存為test.html，在<head>標簽內添加<style type="text/css">標簽，定義一個(gè)內部樣式表，然后輸入下面樣式，定義兩個(gè)類(lèi)樣式。
body { font-family: "宋體";
font-size: 14px;
text-align: center;
color: #000066;}.container {
width: 600px; /*容器container的寬度*/
margin: 20px auto 0 auto; /*container四周邊界，左右值為auto，實(shí)現居中顯示*/
padding: 20px 10px; /*容器container的內邊距*/
border: #990000 1px solid; /*容器container的邊框*/}img { border: 2px #009966 solid; /*圖片的邊框*/
float: left; /*圖片的左浮動(dòng)*/ width: 150px; /*圖片的寬度*/}p { l
ine-height: 2em; /*行間距*/ text-align: left; /*左對齊*/
text-indent: 2em; /*首行縮進(jìn)*/}
然后在<body>標簽中輸入代碼，并應用上面的類(lèi)樣式。
<div class="container">
<h1>北湖詩(shī)韻</h1>
<p>可是熏風(fēng)吹來(lái)的季節？秋是藍色的。藍的蒼穹，藍的泥土，藍的微風(fēng)……。靜謐、清凜的早晨，是你最嫵媚的時(shí)刻；清麗世界，藍的柔情，輕輕簇擁著(zhù)你，像流溢著(zhù)藍色秋思的明眸，深邃、沉靜。什么時(shí)候，燃燒的云霞迸現了。
<img src="images/1.jpg" alt="" />你羞澀的面龐，透出淡淡的紅暈，而后來(lái)又隱去了。你不喜歡濃妝艷抹，你不鐘愛(ài)飄渺的煙云？盡管它一度那么誘人，你卻重新找回了寧靜；像一幅潑墨如云的畫(huà)卷，天與湖的組合，風(fēng)與情的融匯，藍色太濃，太多。遠處，一群孩童在船上嬉戲，還撐起了荷葉的小傘；博大的藍色錦繡，瞬間綴上幾點(diǎn)綠色的希冀，于是，你心底流出一首詩(shī)，很長(cháng)很長(cháng)；關(guān)于童年，關(guān)于絢麗的夢(mèng)幻…… 阿波羅—不是你愛(ài)戀許久的太陽(yáng)神么？你卻等它升到了極點(diǎn)，才坦露出那環(huán)抱你的、蓊郁的綠樹(shù)；那籬笆或柵欄似的葦叢，那依稀點(diǎn)綴的苦江草。南面那巍巍的影子，是黃山、白山……。四周淡淡的霧氣籠罩著(zhù)，或銀灰、米黃，或淡青、淺藍。在映日荷花安葬的地方，亭亭的荷葉依然佇立著(zhù)，幾多深情，幾多眷念。那荷葉編織的屏障后面，卻傳來(lái)喁喁私語(yǔ)，蕭蕭瑟瑟，觸動(dòng)了你多情的心弦，于是，你心底飄來(lái)一首歌，很美很美；關(guān)于初戀，關(guān)于大自然……</p>
</div>
在瀏覽器中預覽。本例中運用了float:left使圖片移至頁(yè)面左邊，從而文字在右邊環(huán)繞。
【示例2】在示例1中，可以看到文字緊緊環(huán)繞在圖片周?chē)?，如果希望圖片本身與文字有一定的距離，只需要給img元素添加padding和margin屬性即可，將示例1中的img元素做如下修改：
img { border: 2px #009966 solid; /*圖片的邊框*/
float: left; /*圖片的左浮動(dòng)*/
width: 150px; /*圖片的寬度*/
padding: 10px;
margin: 10px;}
在瀏覽器中預覽，可以看到圖片的邊框離文字有10px的距離，這是由于在網(wǎng)頁(yè)設計時(shí)添加了margin:10px語(yǔ)句，而圖片的邊框離圖片也有10px的內邊距，這是由于添加了padding:10px語(yǔ)句。這樣設置使文字與圖片的距離明顯變遠，顯示效果更佳。至于margin和padding屬性的詳細用法，在后面的章節中會(huì )陸續提到。
當前文章標題：設置文字環(huán)繞
當前URL：http://amzcoolest.com/news/wzzz/3104.html
上一篇：定義圖片的橫縱向對齊
