<h2>期末範例</h2>
<b>上課期末作業範例線上瀏覽</b>
<a href="http://mepopedia.com/~jinjin/web/final/" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/</b></a>
injin/web/final/about.html" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/about.html</b></a>
in/web/final/about.html</b></a>
[url=http://mepopedia.com/~jinjin/web/final.zip]<b>上課期末範例下載</b>[/url]
<hr>
<h2>網站基本架構</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-02.png" border="0">
<hr>
<h2> 介紹頁面《關於我們》</h2>
一般網站，進入首頁之後，首先選取的通常是介紹頁面，介紹這個網站的簡要介紹，以快速地了解網站大致內容與主題核心。
http://mepopedia.com/~jinjin/web/final/about.html
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-03.jpg" border="0">
<hr>
<h2> 左右雙欄設計</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-04.png" border="0">
<hr>
<h2> 錨點連結</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-05.png" border="0">
<hr>
<h2> 內容圖文左右編排，浮動設定</h2><ol><li>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-06.png" border="0">
<hr>
<h2>編號清單</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-07.png" border="0">
<hr>
<h2>導覽標題CSS設定</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-08.png" border="0">
<hr>
<h2>《頂圖》animation圖片微動畫設定</h2>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-09.png" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-10.png" border="0">
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-11.png" border="0">
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations
<hr>
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/rwd-3-12.png" border="0">
<hr>
