rowspan="2" 直 二合併為一
<table border="2" style="width: 80%;">
<caption>rowspan="2" 直 二合併為一</caption>
<tbody>
<tr><td rowspan="2">直 二合併為一
</td><td>第一行 欄位 1</td></tr>
<tr><td> 第二行 欄位 1</td></tr>
</tbody></table>
text-align vertical-align
text-align:left
vertical-align:top | text-align:center
vertical-align:top | text-align:right
vertical-align:top |
text-align:left
vertical-align:middle | text-align: center
vertical-align:middle | text-align:right
vertical-align:middle |
text-align:left
vertical-align:bottom | text-align: center
vertical-align:bottom | text-align:right
vertical-align:bottom |
<table rules="rows">
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 4 |
<table rules="cols">
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 4 |
<table rules="all">
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 4 |
<table rules="none">
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 3 |
| 欄位 1 | 欄位 2 | 欄位 4 |
#html table 表格
HTML img 圖片標籤
<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">
| 參數
| 用法說明 |
| src
| 圖片網址，必要項目。 |
| border
| 圖片邊框，例如 border="0" 代表邊框為 0。 |
| alt
| 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。 |
| title
| 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。 |
| width
| 圖片寬度，例如 width="120px" 代表寬度限制在 120px。 |
| height
| 圖片高度，例如 height="100px" 代表高度限制在 100px。 |
width:auto 自動判斷圖片寬度。
<img
style="width:auto;"
src="https://xxx.jpg" />
width:300px : 將圖片寬度設為 300px。
<img
style="width:300px;"
src="https://xxx.jpg" />
height: 100px; width: 100px; 將圖片 寬度 高度 設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px
;" />
|
height: inherit
; width: inherit; 將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="
height: inherit; width: inherit;
" /></div>
max-width
及
max-height
設為 100px ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="
height: 400px; width: 400px;max-width:100px;max-height:100px;
" />
height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="
height: 50%; width: 50%;
" /></div>
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。
<img style="
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6
);" src="https://xxx.jpg" width="200px" />
#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>
#HTML
#img 圖片標籤
#html img
#HTML 圖片標籤
CSS Filters濾鏡效果
CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
| blur 模糊 |
blur(0px) |
0px 到100px，的百分比控制 |
| sepia 懷舊 |
sepia(0) |
0 or 1，1為元素轉換成黑白影像 |
| invert 負片 |
invert(0) |
0 or 1，1為元素轉換成負片影像 |
| opacity 透明 |
opacity(1) |
0 to 1，step 0.1 0為元素轉換成全透明影像 |
| contrast 對比 |
contrast(0) |
0 to 10， 10為明亮和陰暗部份的大差距 |
| saturate飽和 |
saturate(0) |
0 to 10， 10為元素轉換成最大飽和度 |
| brightness 亮度 |
brightness(0) |
0 to 10， 10為元素轉換成最大亮度度 |
| grayscale 灰階 |
grayscale(0) |
0 to 10， 10為元素轉換成最大灰階度 |
| hue-rotate 色相旋轉 |
hue-rotate(0deg) |
0deg – 360deg 旋轉色相環 |
| drop-shadow 下拉陰影 |
drop-shadow(30px 10px 4px #4444dd) |
x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 |
#CSS Filters濾鏡效果
#html Filters濾鏡效果
#blur 模糊
#sepia 懷舊
#invert 負片
#opacity 透明
#contrast 對比
#saturate飽和
#brightness 亮度
#grayscale 灰階
#hue-rotate 色相旋轉
#drop-shadow 下拉陰影
box-shadow 方塊陰影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影的顏色 內部陰影;
| 值 | 描述 |
|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
v-shadow | 必需。垂直陰影的位置。允許負值。 |
blur | 可選。模糊距離。 測試 |
spread | 可選。陰影的尺寸。 測試 |
color | 可選。陰影的顏色。請參閱 CSS 顏色值。 |
inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
box-shadow: 20px 20px 5px 5px #888888
box-shadow: 20px -20px 10px 0px #888888;
box-shadow: 20px -20px 10px 0px #91e6fb inset;
border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900
box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4),
5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset,
-5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;
box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;
#box-shadow 方塊陰影
box-shadow 方塊陰影
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影的顏色 內部陰影;
| 值 | 描述 |
|---|
| h-shadow | 必需。水平陰影的位置。允許負值。 |
v-shadow | 必需。垂直陰影的位置。允許負值。 | blur | 可選。模糊距離。 測試 | spread | 可選。陰影的尺寸。 測試 | color | 可選。陰影的顏色。請參閱 CSS 顏色值。 | inset | 可選。將外部陰影 (outset) 改為內部陰影。 |
box-shadow: 20px 20px 5px 5px #888888
box-shadow: 20px -20px 10px 0px #888888;
box-shadow: 20px -20px 10px 0px #91e6fb inset;
border-radius: 150px;box-shadow: 5px 5px 60px 40px #ff9900
box-shadow: 10px 10px 5px 0px rgba(20%,20%,40%,0.4), 5px 5px 5px 0px rgba(20%,20%,40%,0.4) inset, -5px -5px 5px 0px rgba(20%,20%,40%,0.4) inset ;
box-shadow: 5px 5px 3px 0px navajowhite,
10px 10px 3px 0px navajowhite,
15px 15px 3px 0px navajowhite,
20px 20px 3px 0px navajowhite,
25px 24px 3px 0px navajowhite;
#box-shadow 方塊陰影
CSS Filters濾鏡效果
CSS Filters濾鏡效果有點像是photoshop的濾鏡功能。透過CSS Filters濾鏡效果我們可以對網頁元素進行渲染。一般情況下、當網頁元素包含子元素時、CSS Filters 會同時對子元素進行渲染。
| blur 模糊 | blur(0px) | 0px 到100px，的百分比控制 |
| sepia 懷舊 | sepia(0) | 0 or 1，1為元素轉換成黑白影像 |
| invert 負片 | invert(0) | 0 or 1，1為元素轉換成負片影像 |
| opacity 透明 | opacity(1) | 0 to 1，step 0.1 0為元素轉換成全透明影像 |
| contrast 對比 | contrast(0) | 0 to 10， 10為明亮和陰暗部份的大差距 |
| saturate飽和 | saturate(0) | 0 to 10， 10為元素轉換成最大飽和度 |
| brightness 亮度 | brightness(0) | 0 to 10， 10為元素轉換成最大亮度度 |
| grayscale 灰階 | grayscale(0) | 0 to 10， 10為元素轉換成最大灰階度 |
| hue-rotate 色相旋轉 | hue-rotate(0deg) | 0deg – 360deg 旋轉色相環 |
| drop-shadow 下拉陰影 | drop-shadow(30px 10px 4px #4444dd) | x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影顏色 |
#CSS Filters濾鏡效果#html Filters濾鏡效果#blur 模糊#sepia 懷舊#invert 負片#opacity 透明#contrast 對比#saturate飽和#brightness 亮度#grayscale 灰階#hue-rotate 色相旋轉#drop-shadow 下拉陰影
HTML img 圖片標籤
<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">
| 參數 | 用法說明 |
| src | 圖片網址，必要項目。 |
| border | 圖片邊框，例如 border="0" 代表邊框為 0。 |
| alt | 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。 |
| title | 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。 |
| width | 圖片寬度，例如 width="120px" 代表寬度限制在 120px。 |
| height | 圖片高度，例如 height="100px" 代表高度限制在 100px。 |
width:auto 自動判斷圖片寬度。
<img
style="width:auto;" src="https://xxx.jpg" />
width:300px : 將圖片寬度設為 300px。
<img
style="width:300px;" src="https://xxx.jpg" />
height: 100px; width: 100px; 將圖片 寬度 高度 設為 100px。
<img src="https://xxx.jpg" style="height: 100px; width: 100px;" />
|
height: inherit ; width: inherit; 將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="
height: inherit; width: inherit;" /></div>
max-width 及
max-height 設為 100px ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="
height: 400px; width: 400px;max-width:100px;max-height:100px;" />
height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="
height: 50%; width: 50%;" /></div>
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。
<img style="
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://xxx.jpg" width="200px" />
#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>
#HTML#img 圖片標籤#html img#HTML 圖片標籤