[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探 (no replies)

1. 範例說明

http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面，並且嘗試CSS3的設定

請延續上個主題的內容，將之完成，作為期中作業

2. 內頁實作篇-連結頁面

僅供參考，內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

新增之CSS部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt

---

3. CSS3語法初探

參考講義：
[CSS3/IE filter] 漸層背景 Gradient Background
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

1. 邊框圓角語法

可自行調整數值
-moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px;

---

2. 漸層語法

radial為放射式漸層
linear為線性漸層
可自行調整數值，但須注意整體畫面質感
background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))

---

3. 邊框陰影語法

請自行調整數值
請注意，勿誇張
-moz-box-shadow: 1px 0px 7px #333333; -webkit-box-shadow: 1px 0px 7px #333333; box-shadow: 1px 0px 7px #333333;

---

4. 文字陰影語法

請自行調整數值
請注意，勿誇張
text-shadow:1px 2px 1px #000000;