HTML+CSS學習筆記（四）

一、自訂背景和顏色

1.背景顏色和文本顏色
在需要的地方比如說body中添加style="background-color:red;color:blue",即指定背景為紅色，字型為藍色，當然可以在特定的元素中用color設定字型顏色

2.指定自訂色彩
自訂色彩的格式是：#rrggbb，rr、gg、bb分別表示紅綠藍這三種顏色的兩位十六進位數。例如亮紅色是#FF0000，藍紫色是#660099，這個不用記，一般的都是顏色選取器設定的

3.用圖片做背景
style="background-image:url(圖片.jpg);backgroud-repeat:repeat-x"
注意這裡是image，而不是插入圖片img。backgroud-repeat表示圖片尺寸小於頁面時，圖片重複的方向，repeat-x、repeat-y、no-repeat分別表示水平重複、垂直重複、不重複

4.透明圖片
一般透明圖片格式有png，gif等，大多數使用的是png，這些知識這裡不說。使用透明圖片，就可以同時把背景顏色用到

二、圖片連結和圖片映射

1.圖片連結

點擊一張圖片，會開啟另一個頁面，使用<a href="另一個圖片或頁面"><img src="圖片.jpg" alt="IMG" /></a>建立
注意如果要兩幅圖片無縫，第一張圖片的</a>要和第二張圖片的<a>

2.圖片映射

點擊圖片中的某一部分，開啟另一個頁面，一張圖片可以開啟多個頁面

<map id="cat"><area shape="rect" coords="100,230,230,400" href="eye.png" atl="圖片" title="眼睛原圖" /><area shape="rect" coords="350,450,570,600" href="bz.png" atl="圖片" title="標誌原圖" /></map><img src="mdl.jpg" alt="原圖" title="怒小奇" usemap="#cat"  style="boder:none" />

<map></map>標籤建立映射，<area />建立可以映射的地區，其中shape表示地區形狀，其值可以是rect,circle,poly；coords表示地區座標；usemap使用建立的圖片映射，注意上例中紅色字型的對應 

圖片映射樣本

三、建立表格

1.簡單表格

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<table></table>建立表格；<tr></tr>表示行；<th></th>表示儲存格的內容，並且是表頭部分，一般瀏覽器都將其置中加粗顯示；<td></td>表示普通儲存格的內容

2.控製表格大小
<table style="width:200px;height:400px">

下面這個表格是按頁面的大小比列來建立的，它會更具頁面的顯示大小自動調整寬度和高度
<table style="width:100%;hegiht:100%">
<tr style="hegiht:30%">
<th style="width:20%">NO1<th>
<th style="width:80%">NO2<th>
</tr>
<tr style="hegiht:70%">
<td style="width:40%">NO3<td>
<td style="width:60%">NO4<td>
</tr>
</table>

3.設定表格內的對齊及跨度
表格對齊依然使用文字的對齊樣式text-align和vertical-align;
表格的邊框寬度直接使用border=“寬度”

colspan=“2”表示橫跨了兩列，rowspan=“3”表示豎跨了三行，相當於合併儲存格

4.背景和圖片背景
這也和設定頁面的方法一樣，background-color和background-image
cellpadding 屬性規定單元邊沿與其內容之間的空白。
cellspacing 屬性規定儲存格之間的空間。

表格版面配置樣本

 練習答案