(1)Merry Christmas(桌機header)

【範例結果】

二、Web Font的應用

課程使用網站

1 Flaticon:   http://www.flaticon.com/

2 Awesome:

(1) 網址:  http://fontawesome.io/

(2) Awesome CDN: https://fontawesomecdn.com/

一般設定

* { padding: 0; margin: 0;}
body {
    font-family: verdana, "微軟正黑體", sans-serif;
    font-size: 16px;
}
ul,ol,li { list-style-type: none;}
a { text-decoration: none;}

header、logo區

/*header===============================================*/

header {
  background: #263238;
  height: 100px;
  box-shadow: 0 1px 2px #000;
  
  position: relative;
}

/*#logo=========*/

#logo {
  background: url(image/logo.svg) no-repeat;
  width: 250px;  height: 100%;
  position: absolute;    left: 50%;    margin-left: -125px;

  /* SEO目的,文字隱藏 */
  text-indent: 250px;   white-space: nowrap;   overflow: hidden;
}

#nav 區

/*#nav=========*/
#nav {
  position: absolute;   bottom: 0px;    right: 20px;
}

#nav li {
  float: left;
}

#nav li a {
	color: #fff;  font-size: 20px; vertical-align: middle;
/*  background: #333;   加入目的:了解行內樣式情形*/
  line-height: 50px; display: block;
  padding: 0 5px;
  
  transition: all .5s;
  border-bottom: 10px solid transparent;
  
  position: relative;
}

#nav li a:hover {
    border-bottom: 10px solid #ff6f00;
    filter: drop-shadow(0 0 1px rgba(0,0,0,1));
}

/* #nav li a:before======*/
#nav li a:before {
  padding-right: 4px; font-size: 26px; color: #fff; vertical-align: bottom;
}

#nav li:nth-child(1) a:hover:before {
    content: '\f106'; 
}
#nav li:nth-child(2) a:hover:before { content: "\f104"; }
#nav li:nth-child(3) a:hover:before { content: "\f102"; }
#nav li:nth-child(4) a:hover:before { content: "\f103"; }

/* #nav li a:after=======*/
#nav li a:after {
    content: "";
    border-top: 10px solid #ff6f00;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
    position: absolute;
    left: 50%; bottom: -20px; margin-left: -10px; 
    
    opacity: 0; transition: all .5s;
    /*box-shadow: 1px 1px 2px #000;*/
    
}

#nav li a:hover:after{
 /*   position: absolute;
      left: 50%; bottom: -20px; margin-left: -10px; */
    
    opacity: 1;
}

filter: drop-shadow(0 0 2px rgba(0,0,0,1));  參考連結:【連結1】、【連結2