HTML與CSS教學-第六章 HTML網頁中的圖片

來源:互聯網
上載者:User

第六章 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:設定映像到邊框的間距;

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.