第六章 HTML網頁中的圖片
本章要點
img標記
網頁中圖片的屬性
圖文混排
使用CSS樣式表設定圖片屬性
目錄：
6.1 在網頁中加入圖片
6.2 圖片與文字的排版
6.3 網頁背景圖片
6.4 利用CSS樣式在網頁中加入圖片
6.1 img標記及其屬性
src 映像的源檔案
alt 提示文字
width,height 寬度、高度
border 邊框
vspace 垂直間距
hspace 水平間距
align 排列
6.2 圖片與文字的排版
映像和文字之間的排列通過align屬性來設定。映像的絕對對齊和相對文字對齊是不一樣的。絕對對齊的效果和文字的對齊一樣，只有3種：居左、居右、置中；而相對文字對齊是指映像與一行文字的相對位置。
top文字的中間線居在圖片上方
middle文字的中間線居在圖片中間
bottom文字的中間心啊居在圖片底部
left圖片在文字的左側
right圖片在文字的右側
absbottom文字的底線居在圖片的底部
absmiddle文字的底線居在圖片的中間
baseline英文文字基準線對齊
texttop英文文字上邊線對齊
6.3 網頁背景圖片
1.設定頁面背景顏色
主體標記<body>中的bgcolor屬性可以設定整個頁面的背景顏色。
<body bgcolor="color_value">
與文字顏色相似，也是使用顏色名稱或者十六進位值來表現顏色效果。color_value指的就是顏色的值。
2.設定頁面背景圖片
頁面中可以使用JPG或GIF圖片作為頁面的背景圖，通過主體標記<body>中的background屬性來實現。它與向網頁中插入圖片不同，放在網頁的最底層，文字和圖片等等都位於它的上面。文字、圖片等會覆蓋背景圖片。在預設的情況下，背景圖片在水平方向和垂直方向上會不斷重複出現，直到鋪滿整個網頁。
<body background="img_file_url">
img_file_url是指圖片檔案的路徑。
6.4 利用CSS樣式在網頁中加入圖片
1.應用CSS映像邊框
2. 使用CSS設定圖文環繞
可以使用float、margin和padding屬性使本文環繞一個映像。
float：設定元素向左或向右浮動；
margin：設定映像到其他元素的間距；
padding：設定映像到邊框的間距；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
