JDX01(2017):Travel World(1)

範例結果

五、背景加入

(1)【section2:背景】設定

Html結構

    <section id="sec2">
      <h2>section2:背景說明</h2>
      <h3>旅遊小叮嚀</h3>
      <ul>
        <li>旅遊之一般餐食安排為西式餐三道式;中式餐六菜一湯。皆不包含飲料。餐廳內免費提供之飲用水皆為自來水,其餘飲料皆須另外付費!</li>
        <li>素食:各地風俗民情不同,國外之素食習慣大多是可以食用蔥、薑、蒜、蛋、奶等,無法如國內之素食烹調標準般嚴謹。除華僑開設的中華料理餐廳外,多數僅能以蔬菜、豆腐等食材料理為主;若為飯店內用餐或一般餐廳使用自助餐,亦多數以蔬菜、漬物、水果等佐以白飯或麵食類。故,海外團體素食餐之安排,無法如同在台灣般豐富且多變化,請素食貴賓諒察!如無法接受,請勿報名此團體。如可以入境隨俗,建議自行準備符合口味及方便攜帶的副食品或點心備用,如餅乾、泡麵..等,以備不時之需。</li>
        <li>團體旅行中安排在中國餐廳用餐時,因各大城市之中國餐廳,受限於材料來源、當地飲食民情及廚師素質,實無法與國內相比較。</li>
        <li>大多數國家人民均習慣生飲自來水,因此旅館房間少有熱水提供,若有需要,請自備變壓器及容器等或自購礦泉水飲用。&nbsp;</li>
        <li>住宿飯店等級說明:國人往往習慣以星級多寡評鑑旅館等級,然而世界各國評鑑旅館標準不一,莫衷一是,實不應將不同地區之旅館,作同一標準性比較。以東南亞、北美地區地廣人稀的特性而言,較適合大型旅館發展,故旅館之豪華程度,往往令人咋舌!</li>
        <li>各國,為保護其歷史建築之原有風貌,而限制旅館經營規模,至今仍有一些飯店並未裝設冷氣空調(寒冷地區則在冬季供應暖氣空調)。</li>
        <li>飯店內不主動提供牙刷、牙膏,吹風機亦不是每家飯店都有,並另請自備拖鞋。(衛生用品如必須,可以在飯店內需求,惟需要自行支付服務小費或相關費用!)&nbsp;</li>
      </ul>
    </section>

Pug 結構

      section#sec2
        h2 section2.背景說明
        h3 旅遊小叮嚀
        ul
          li 旅遊之一般餐食安排為西式餐三道式;中式餐六菜一湯。皆不包含飲料。餐廳內免費提供之飲用水皆為自來水,其餘飲料皆須另外付費!
          li 素食:各地風俗民情不同,國外之素食習慣大多是可以食用蔥、薑、蒜、蛋、奶等,無法如國內之素食烹調標準般嚴謹。除華僑開設的中華料理餐廳外,多數僅能以蔬菜、豆腐等食材料理為主;若為飯店內用餐或一般餐廳使用自助餐,亦多數以蔬菜、漬物、水果等佐以白飯或麵食類。故,海外團體素食餐之安排,無法如同在台灣般豐富且多變化,請素食貴賓諒察!如無法接受,請勿報名此團體。如可以入境隨俗,建議自行準備符合口味及方便攜帶的副食品或點心備用,如餅乾、泡麵..等,以備不時之需。
          li 團體旅行中安排在中國餐廳用餐時,因各大城市之中國餐廳,受限於材料來源、當地飲食民情及廚師素質,實無法與國內相比較。
          li 大多數國家人民均習慣生飲自來水,因此旅館房間少有熱水提供,若有需要,請自備變壓器及容器等或自購礦泉水飲用。 
          li 住宿飯店等級說明:國人往往習慣以星級多寡評鑑旅館等級,然而世界各國評鑑旅館標準不一,莫衷一是,實不應將不同地區之旅館,作同一標準性比較。以東南亞、北美地區地廣人稀的特性而言,較適合大型旅館發展,故旅館之豪華程度,往往令人咋舌!
          li 各國,為保護其歷史建築之原有風貌,而限制旅館經營規模,至今仍有一些飯店並未裝設冷氣空調(寒冷地區則在冬季供應暖氣空調)。
          li 飯店內不主動提供牙刷、牙膏,吹風機亦不是每家飯店都有,並另請自備拖鞋。(衛生用品如必須,可以在飯店內需求,惟需要自行支付服務小費或相關費用!)

 

CSS美化【#sec2】

/* sec2 ======================= */
#sec2{
  background: url(../image/bg02.svg);    
  background-size: 20%;
}
#sec2 ul{
  width: 80%; margin: 20px auto;
  height: 100px;
  height: 100px;
}
#sec2 li{
   font-size: 18px;	line-height: 40px; padding-left: 50px;
   background: url(../image/icon01.png) no-repeat 5px 0;
   cursor:pointer; transition: all .5s;
}
#sec2 li:hover{
  color:#FFFFFF; background-color:#8F0016; font-style:italic;
  width:auto; white-space: normal; border-radius: 10px;
}
#sec2 h3{
  text-align: center; line-height: 50px;
  padding-top: 50px;  font-size: 30px;
  text-decoration: underline;
}

SCSS美化【#sec2】

#sec2{
  background: url(../image/bg02.svg);
  background-size: 20%;
  ul{
    width: 80%; margin: 20px auto;
    li{
      font-size: 18px; line-height: 40px; padding-left: 50px;
      background: url(../image/icon01.png) no-repeat 5px 0;
      cursor: pointer; transition: all .5s;
      &:hover{
        color: #fff; background-color: #8F0016;
        font-style:italic; border-radius: 10px; 
      }
    }
  }
  h3{
    text-align: center; line-height: 40px; padding-top: 40px;
    font-size: 30px; text-decoration: underline;
  }
}
// #sec2 end

 

(2)【#view1】設計

在【#main】之外,上方加入html結構框架

html結構

  <header>
    <div id="view1">
      <img src="image/view.png" alt="">
    </div>
  </header>

Pug 結構

    header
      #view1
        img(src="./image/view.svg", alt="")

 

CSS美化【#view1區】

/* #view1 背景加入 ================================== */
#view1{
  height: 500px;  /*暫訂,待JS後刪除*/
  background:url(../image/bg01.svg) repeat-x left 10% fixed 
          ,linear-gradient(to top,#F7EEDA 30%,#3BC5CE 30%, #3BC5CE 48%,#71E4E3 48%,#71E4E3 100%) left top fixed;
  background-size: 50%, auto;

  position: relative;
}
#view1 img{
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 80%;
  filter: drop-shadow(0 0 2px rgba(0,0,0,1));
}

SCSS美化【#view1區】

/* header============================= */
#view1{
  height: 500px;
  background:url(../image/bg01.svg) repeat-x left 10% fixed 
            ,linear-gradient(to top,#F7EEDA 30%,#3BC5CE 30%, #3BC5CE 48%,#71E4E3 48%,#71E4E3 100%) left top fixed;
  background-size: 50%, auto;

  position: relative;

  img{
    //置中
    position: absolute; left: 50%; transform: translateX(-50%);
    bottom: 10px;
    width: 80%;
    filter: drop-shadow(0 0 2px #000000);

  }
} //#view end

(2)【#view2】設計

S1:html結構

  <header>
    <div id="view2">
        <h3>Let's Go!</h3>
    </div>
  </header>

Pug 結構

    header
      #view2
        h3 Let's Go!

SCSS美化【#view2區】

#view2{
  background: url(../image/view2_img03.jpg) fixed;
  background-size: cover;

  h3{
    text-align: center; font-size: 4em; color: rgba(0, 89, 100, 0.87);
    text-shadow: 1px 1px #fff, 1px 1px 3px #000;
  }
} 
//#view2 end

S2:Flex 應用(一般設定)

Flex CSS tools

說明:因h3若置於中央美化上較不易控制,故想法外層加上div

html結構

  <header>
    <div id="view2">
        <div>
          <h3>Let's Go!</h3>
        </div>
    </div>
  </header>

Pug 結構

    header
      #view2
        div
          h3 Let's Go!

SCSS美化【#view2區】

#view2{
  height: 400px;    /* 暫定 */
  background: url(../image/view2_img03.jpg) fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  &>div{
    // background: url(../image/view2_title1.svg) no-repeat center center rgba(255, 255, 255, 0.6);
    background: url(../image/view2_title1.svg) no-repeat center center 
                ,linear-gradient(45deg,rgba(255, 173, 173, 0.705),rgba(251, 255, 2, 0.548),rgba(2, 133, 255, 0.432),rgba(255, 2, 213, 0.384),rgba(1, 139, 8, 0.418));
    background-size: 30%, auto;
    border-radius: 30px;
    box-shadow: 1px 1px #fff,1px 1px 3px #000;
    width: 60%; height: 60%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: all .5s;
    opacity: 1;
    h3{
      text-align: center; font-size: 4em; color: rgba(0, 89, 100, 0.87);
      text-shadow: 1px 1px #fff, 1px 1px 3px #000;
    }
  }
  &:hover div{
    // display: none;
    opacity: 0;
  }
}
// #view2 end