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