第一關：HTML+CSS 網頁排版(課程)

一、網頁編輯器、HTML基礎教學

1 認識網頁編輯器Sublime Text3

2 六角學院線上問答會

3 認識HTML標籤,設計具有語意化的網頁結構

4 建立HTML結構,賦予網頁新生命

5 HTML環境程式碼

6 插入圖片,了解圖片路徑與HTML屬性

7 加上連結,讓網頁具有互動性https://codepen.io/TANGJANE/pen/ZaBJBj
   -command+R : 重新整理
   -另開新視窗＆超連結插入圖片

8 認識ul、li清單標籤https://codepen.io/TANGJANE/pen/zPoMNd
   -ol li以「1、2、3」為排列順序
  -ul li以「列表」為排列順序

9 作業https://codepen.io/TANGJANE/pen/bYBOyL

二、CSS常用語法

10 CSS標籤選擇器https://codepen.io/TANGJANE/pen/dZOaNv
     選擇器{
     屬性：設定值 ;
     屬性：設定值 ;
     }

11 套用第一個Sublime Pluginhttps://drive.google.com/open?id=1RX7scjaqKH222DHQ2GhRhVYEtMls3unq

12 CSS類別選擇器https://codepen.io/TANGJANE/pen/Rjozxd

13 CSS擬態選擇器https://codepen.io/TANGJANE/pen/WXoqgw
    a:active 是滑鼠點擊調色
    a:hover 是擬態選擇器

14 使用CSS設定優化文字排版https://codepen.io/TANGJANE/pen/WXoqVo

15 在HTML標籤上加上線條borderhttps://codepen.io/TANGJANE/pen/ZaBgbr
     border: 大小 樣式 顏色 
     //樣式可分solid dashed dotted

16 作業2https://codepen.io/TANGJANE/pen/LObwaV

三、使用CSS變更HTML標籤特性
17 CSS Reset , 讓所有瀏覽器都長得一致
18 行內元素＆區塊元素的差異
     display:block;   //區塊元素
     display:inline;   //行內元素
19 DIV 與 SPAN、CSS後代選擇器https://codepen.io/TANGJANE/pen/jaywvr
     span ＆ div : 沒有任何語義化,純粹網頁排版用.
     div區塊元素
     span行內元素
20 使用margin、padding 來回推擠距離https://codepen.io/TANGJANE/pen/pddbBO
21 Box Modelhttps://codepen.io/TANGJANE/pen/aVVZxe
22 使用margin:auto讓版型置中https://codepen.io/TANGJANE/pen/mqqEYR
23 作業https://codepen.io/TANGJANE/pen/VrrjRe
24 補充教材：不想算模型盒推擠？試試CSS box-sizinghttps://codepen.io/TANGJANE/pen/MOOeLP
     box-sizing: content-box;(original,CSS2 )
     box-sizing: border-box;(new,CSS3 )
25 codepen

四、網頁排版技巧
26 Float浮動定位技巧https://codepen.io/TANGJANE/pen/jaaMVQ
27 使用clear清除浮動https://codepen.io/TANGJANE/pen/gXXwXv
28 兩欄式、三欄式版面定位技巧https://codepen.io/TANGJANE/pen/pddNQR
29 設計並排式選單https://codepen.io/TANGJANE/pen/LOOdxa
30 LOGO與選單並排設計技巧https://codepen.io/TANGJANE/pen/yPPKMP
31 作業
32 其他常見clear清除浮動效果
     before:https://codepen.io/liao/pen/QGodqQ
     after:https://codepen.io/liao/pen/pNYRWK