Site map Dr. Computer Did you know ? Life Android / iOS
 

Dr. computer ....

html 文繞圖語法 ; float:left 與 clear:left 語法練習 ....2017-12-13 ( )

一直以來,筆者都是用 Microsoft SharePoint Designer 寫網頁文。基於長期使用所見即所得的編輯習慣,讓筆者疏於對 html 語法的認識。

而筆者網站中的網頁內容皆未有以文繞圖的方式來呈現過。直到最近,想將網站首頁的內容做更動時才有了文繞圖的需求。筆者想要呈現的方式是將圖片置於左邊,而文字則於圖片的右側呈現。

有了需求才有學習的動機與動力,筆者就將練習的結果做成筆記,當作自己學習過程的紀錄 ...


Html 文繞圖語法練習

1. 圖片向左浮動 ...

<img alt="圖片鏈結失效時的替代文字" src="圖片的鏈結的位址" style=" float:left ; margin:5 ">文繞圖語法練習 : 使用上述語法套用後,因圖片設定為向左漂浮,故文字會於右側繞圖。而圖片與文字間的間距為 5 pixel 。<br clear="left">

上方藍色字體的語法功用說明 :

img : 圖片 , alt : 圖片鏈結失效時的替代文字,src : 圖片鏈結的位址,style : 定義圖片的效果,float:left : 圖片向左漂浮 ,margin:5 : 圖片與文字的間距為 5 pixel 。<br clear="left"> : 清除圖片向左漂浮,文繞圖的效果終止。



套用上述語法後的結果顯示如下 :

文繞圖語法練習 : 使用上述語法套用後,因圖片設定為向左漂浮,故文字會於右側繞圖。而圖片與文字間的間距為 5 pixel 。

由於 <br clear="left"> 語法清除並終止了文繞圖的效果,故<br clear="left">語法後面的文字又恢復回到圖片下方的編排。



2. 圖片向右浮動 ...

套用語法後的結果顯示如下 :

文繞圖語法練習 : 使用上述語法套用後,因圖片設定為向右漂浮,故文字會於左側繞圖。而圖片與文字間的間距為 5 pixel 。

與圖片上左漂浮的語法相同,兩者之間只需改動浮動的方向,將 float:left 改成 float:right ,終止時將 <br clear="left"> 改為 <br clear="right"> 即可。


延伸閱讀:
1. LINE 使用技巧(集)
2. Win7 進階技巧 (集)



上一頁 下一頁     本區總覽 站內總覽