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 外掛【本網連結

縮寫:
#top>a#logo[href="#"]{Travel world}+nav>a[href="#"]{item$}*4

結果:

<div id="top">
        <a href="#" id="logo">Travel world</a>
        <nav>
            <a href="#">item1</a>
            <a href="#">item2</a>
            <a href="#">item3</a>
            <a href="#">item4</a>
        </nav>
</div>

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

html結構

  <div id="top">
    <a href="#" id="logo"></a>
    <nav>
      <a href="#">1.介紹</a>
      <a href="#">2.背景說明</a>
      <a href="#">3.景點</a>
      <a href="#">4.動畫</a>
    </nav>
    <div id="social">
      <a href="#"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-google-plus-square  fa-3x" aria-hidden="true"></i></a>
      <a href="#"><i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i></a>
    </div>
  </div>

pug結構

    #top
      a#logo(href="#") Travel world
      nav
        a(href="#sec1") 1.介紹
        a(href="#sec2") 2.背景說明
        a(href="#sec3") 3.景點
        a(href="#sec4") 4.動畫
      #social
        a(href="#")
          i.fa.fa-facebook-square.fa-3x
        a(href="#")
          i.fa.fa-twitter-square.fa-3x
        a(href="#")
          i.fa.fa-google-plus-square.fa-3x
        a(href="#")
          i.fa.fa-linkedin-square.fa-3x

 

(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初步美化,待後續再行修改

/* 通用設定=================== */
*{padding: 0; margin: 0; }
a{text-decoration: none;}
ul,ol,li{list-style: none;}
body{
  font-family:Verdana,"微軟正黑體", sans-serif ;
  font-size:16px;
  background: #fae9a0;
}
 
/* #top===================== */
#top{
  height: 100px;
  background: #3f422c; 
  position: relative;
}
#logo{
  background: url(../image/logo.svg); width: 300px; height: 150px;
  display: block;
  /*== logo 置中 ==*/
  position: absolute; top: 30px; left: 50%;
      /* margin-left: -150px;  置中後圖片偏移再拉回 圖片寬度一半*/
  transform: translateX(-50%);        /* 利用CSS3 圖形變形 */
  filter: drop-shadow(0 0 2px rgba(0,0,0,1));     /* 利用CSS3 濾鏡 改善 陰影問題 */

  /*== SEO 文字 不顯示於網頁中 ==*/
      /* text-align: -9999px;     影響 行動裝置的效能*/
  text-indent: 300px; white-space: nowrap; overflow: hidden;
}
nav{
  position: absolute; left: 30px; bottom: 20px;
}
nav a { 
  padding: 0 10px 5px;
  color: #FFDE7D; font-size: 20px; font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px 1px rgba(255,255,255,0.4);
  /*== 利用CSS3 hover後加底線 漸變過渡 ==*/
  transition: all 1s;
}
nav a:hover{
  text-shadow: 1px 1px #FFDE7D, -1px -1px  rgba(255,255,255,0.4);
  color:#81FCEB ;
  
  border-bottom: 5px solid #97E6FF;
}

SCSS結構【初始設定】

//變數
$color-green: #3f422c;
$color-blue:#8af8e6;
$color-yellow:#fae9a0;
$color-pink:#fd2586;
@mixin hideText{
  text-indent: 100%; white-space: nowrap; overflow: hidden;
}
@mixin posCenterX{
  position: absolute;  left: 50%; transform: translateX(-50%);
}

/* 通用設定 =====================*/
*{padding: 0; margin: 0;}
a{text-decoration: none;}
ul,ol,li{ list-style: none;}
body{
  font-family:'FontAwesome',Verdana,"微軟正黑體", sans-serif ;
  font-size:16px;
}

 

(3) web font 應用

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

【id=”social”】美化

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

【id=”social”】美化

CSS美化【#social區】

/* #social=============== */
#social {position: absolute; right: 10px; bottom: 20px;}
#social a{
  display:inline-block;width: 40px; height: 41px;
  text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px 1px #FFDE7D;
}
#social a:nth-child(1){color: #3b5999;}
#social a:nth-child(2){color: #55acee;}
#social a:nth-child(3){color: #dd4b39;}
#social a:nth-child(4){color: #0077B5;}

SCSS美化【#social區】

// #social
#social{
  position: absolute; right: 10px; bottom: 20px;

  a{
    display: inline-block; width: 40px; height: 40px; padding: 0 5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,1), -1px -1px 1px #FFDE7D;
    &:nth-child(1){color:#3b5999; }
    &:nth-child(2){color:#55acee; }
    &:nth-child(3){color:#dd4b39; }
    &:nth-child(4){color:#0077B5; }
  }
} //#social end

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

nav a { 
  position: relative;      /* 新增 */
}

nav  a:after{
  content: '';

  /*== 利用border 加入 三角形 ==*/
  border-top:10px solid #FF549E;border-left:10px solid transparent;
  border-right:10px solid transparent;

  /* ==置於按鈕中間下方== */
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -15px;

  /* == CSS3 過渡 漸變 == */
  opacity: 0;    transition: all .5s;
}

nav a:hover:after{
  opacity: 1;
}

最後:SCSS結構【nav 結構】

nav{
  position: absolute; left: 30px; bottom: 20px;

  a{
    padding:0 10px 5px;
    color:#FFDE7D; font-size: 20px; font-weight: bold;
    text-shadow: 1px 1px #FFDE7D, -1px -1px  rgba(255,255,255,0.4);
    //利用CSS3 hover後加底線 漸變過渡
    transition: all .5s;

    position: relative;
    
    &:hover{
      text-shadow: 1px 1px #FFDE7D, -1px -1px  rgba(255,255,255,0.4);
      color:#81FCEB ;

      border-bottom: 5px solid #97E6FF;
      &:after{
        opacity: 1;
      }
    }
    &:after{
      content:"";
      // 利用border 加入 三角形 
      border-top:10px solid $color-pink;border-left:10px solid transparent;
      border-right:10px solid transparent;

      // 置於按鈕中間下方
      @include posCenterX; 
      bottom: -15px;

      //CSS3 過渡 漸變 
      opacity: 0;    transition: all .5s;
    }
  }
} //nav end