範例:Wild Life(桌機header)

【範例結果】

三、Web Font的練習

social區

html結構

<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>

CSS美化

/*#social=========*/

#social {
    position: absolute; top: 5px; right: 10px;
}

#social a {
    color: #fff; font-size: 30px; 
    
    transition: all .5s;                    /*增加滑順感*/
    width: 40px; display: inline-block;     /*增加滑順感,未有初始漸變設定*/
    white-space: nowrap; overflow: hidden;  /*滑鼠hover 不換行*/
}

#social a:hover { width: 130px; }


#social a:after{ font-size: 18px; }
#social a:nth-child(1):hover:after { content:'Facebook'; }
#social a:nth-child(2):hover:after { content: 'Google'; }
#social a:nth-child(3):hover:after { content: 'Twitter'; }
#social a:nth-child(4):hover:after { content: ' Message'; }