[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video (no replies)

1. 本單元範例下載

✱ 範例下載

學長姐參考範例：
http://mepopedia.com/~jinjin/ex/final-1055445017

---

1. head需修改之項目

請於下列標示部分，替換成自己的設計元素
Image may be NSFW.
Clik here to view.

---

2. skins/css/網頁主色設定

Image may be NSFW.
Clik here to view.

skin / mycolor.css 網頁主色設定
Image may be NSFW.
Clik here to view.

使用搜尋快速鍵Ctrl+F(或搜尋與取代Ctrl+shift+F) 將原來色碼替換成欲取代的色碼
Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

---

3. 等待動畫page-loader

等待動畫，可自行設計gif動畫後替換
Image may be NSFW.
Clik here to view.
<div class="page-loader"> <img alt="" style=";height:auto;;position:inherit !important;" indx="16414643" rank="66" irank="952214683" atitle="[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video (no replies)" data-src="//mepopedia.com/assets/img/loader.gif" data-srcset="" class="rs-article-img-src do-lazy"> </div>

---

4. Toggle navigation行動版導覽列/桌機版logo圖檔

Image may be NSFW.
Clik here to view.

行動版導覽列logo文字及圖示設定
Image may be NSFW.
Clik here to view.

---

5. 導覽列設定/navbar/dropdown

Image may be NSFW.
Clik here to view.

導覽列原始碼位置
Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

---

6. 首頁video影片設定 / videowrap影音區塊 / script

Image may be NSFW.
Clik here to view.

html /script導覽列原始碼位置

Image may be NSFW.
Clik here to view.

---

html 影片代碼位置修改
Image may be NSFW.
Clik here to view.