範例:Wild Life(行動裝置)

【範例結果】

二、【平版】美化

HTML結構

<header>
   <button class="navbtn fa fa-bars"></button>
   <h1 id="logo">Wild Life</h1>
    <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>
    <nav>
           <button class="navClosebtn fa fa-times"></button>
          <ul id="nav">
            <li><a href="#">回到首頁</a></li>
            <li><a href="#">服務項目</a></li>
            <li><a href="#">關於我們</a></li>
            <li><a href="#">聯絡我們</a></li>
        </ul>
    </nav>
</header>

 

CSS 一般美化

header{height: 50px;}
#logo {
    width: 150px; height: 50px; margin-left:-75px;
    background-size: contain;
}

#social { display: none;}

#nav li a{border-bottom: none; }
#nav li a:hover{ border-bottom:none; color: #fae754;}
#nav li a:before{  padding-right: 0px; font-size: 20px;}
#nav li:nth-child(1) a:hover:before{content: ""; }
#nav li:nth-child(2) a:hover:before{content: ""; }
#nav li:nth-child(3) a:hover:before{content: ""; }
#nav li:nth-child(4) a:hover:before{content: ""; }
#nav li a:after{ border: none;}


#banner { height: 300px;}
#note{ display: none;}

section:nth-child(1){flex-direction:column;}
#sec2 { display: block;}

figure{ width:80%;}