設置文字環(huán)繞

  • 2019-09-27 15:02:52
  • 閱讀次數:次
  • 作者:盈嵐科技小編
  • 來(lái)源:http://amzcoolest.com

網(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

上一篇:定義圖片的橫縱向對齊

下一篇:網(wǎng)頁(yè)設計中的設計圖文混排

網(wǎng)站建設、網(wǎng)絡(luò )營(yíng)銷(xiāo)咨詢(xún)專(zhuān)線(xiàn):181-8386-5875(點(diǎn)擊可一鍵撥號)
亚洲精品无码mv在线|新国产精品视频福利免费|日韩高清在线观看不卡一区二区|一本久久a久久精品免费不|亚洲私人无码内射免费观看