JDX01(2017):Travel World(1)

範例結果

 


各頁內容:

  • P1:【#top】 區
    • 【#logo】、【nav】基本CSS整合應用、及【before及after】結合
    • 【#social】:Awsome應用
  • P2:
    • 各頁【section】、【gotop】加入及【animate.css】應用
    • 【section1】其他icon font 網站 的應用
  • P3:【section2】、【#view】背景加入
  •  P4:【section3】
    • figure圖說加入
    • Flex介紹
  • P5:各頁Section頁面有斜邊效果

 


一、【#top】中設定

(1)認識Emmet 外掛【本網連結

課程【id=”top”】html結構

html結構

pug結構

 

(2) CSS基本屬性介紹

  1. 行內樣式(display: inline)區塊樣式(display:block)區隔:【本網連結參考
  2. 物件置中的方法:
    • 文字置中:【text-align: center】
    • 利用【position】物件定位
  3. SEO 文字不顯示於網頁方法:
    • 方法1:text-indent: -9999px;
    • 方法2:text-indent: 100%; white-space: nowrap; overflow: hidden;
  4. CSS3 基本屬性介紹
    • 陰影:box-shadow、text-shadow
    • 2D轉換變形:transform
    • 過渡:transition

CSS初步美化,待後續再行修改

SCSS結構【初始設定】

 

(3) web font 應用

本網參考連結:【web font與icon font應用】、【icon font 與 before、after結合】、【】、【】

【id=”social”】美化

Awesom  CSS CND 連結【連結至】、【Awesome官網

【id=”social”】美化

CSS美化【#social區】

SCSS美化【#social區】

(4) 運用【:before】及【:after】結合


最後:SCSS結構【nav 結構】