(3)Merry Christmas(行動裝置)

【範例結果】

二、【手機】美化

HTML結構

  <header>
    <button class="navbtn fa fa-bars"></button>           <!-- 新增 -->
    <h1 id="logo"><a href="#">Merry christmas</a></h1>
    <nav>
      <button class="navClosebtn fa fa-times"></button>    <!-- 新增 -->
      <ul id="nav">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
        <li><a href="#">item4</a></li>
      </ul>
    </nav>
    <div id="social">
      <a href="#"><i class="fa fa-facebook-square"></i></a>
      <a href="#"><i class="fa fa-google-plus-square"></i></a>
      <a href="#"><i class="fa fa-twitter-square"></i></a>
      <a href="#"><i class="fa fa-linkedin-square"></i></a>
    </div>
  </header>

 

CSS 一般美化

/* S1:header 區 logo 調整 */
header{height: 50px;}
#logo {
    background-repeat: no-repeat;
    width: 150px; height: 50px; 
    background-size: contain;
}

/* S2:將indexM.css 複製至 indexS.css  調整*/
#social{display: none;}
#banner{ background: url(image/banner02.jpg) center center fixed;}
#nav li a,#nav li a:hover {  border: none; height: 40px;}
#nav li a:hover{ color: #ff9900}
#nav li a:hover:before,#nav li a:after{display: none;}
#note{display: none}

section:nth-child(1){ flex-direction: column; }
section:nth-child(2){justify-content: center;}
figure{ width: 90%;}