JDX-01練習說明:網站設計整合

JDX-01練習-網站設計整合

(一)#top:web font應用

(A)html結構

<div id="top">
   <a href="#" id="logo"><img src="images/logo.svg" alt="fashion" height="200px" width="auto"></a>
   <nav>
        <a href="#">Home</a>
        <a href="#">Gallery</a>
        <a href="#">Categories</a>
        <a href="#">Pages</a>
   </nav>
   <div id="social">
        <a href="#"><i class="fa fa-facebook-square fa-3x" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-twitter-square fa-3x" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-google-plus-square  fa-3x" aria-hidden="true"></i></a>
        <a href="#"><i class="fa fa-linkedin-square fa-3x" aria-hidden="true"></i></a>
    </div>
</div>
<header>header</header>
<section> 
    <h1>section01</h1>
</section>
<section>
    <h1>section02</h1>
</section>

(B)CSS美化

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

/*#top============================================================*/
#top{background:#ebebbf; height: 100px; position: relative;}
#logo { position: absolute; left: 50%; margin-left:-100px;}
nav{ position: absolute; top: 43px; left: 33px;}
nav a { color: #6c085d; font-size: 24px;  padding: 0 10px;font-weight: bold;}
nav a:hover{color: #de98be; text-shadow: 1px 1px #760f46; }

#social {position: absolute; right: 10px; bottom: 10px;}
#social a{ display:inline-block;width: 40px; height: 41px; }
#social a:nth-child(1){color: #3b5999;}
#social a:nth-child(2){color: #55acee;}
#social a:nth-child(3){color: #dd4b39;}
#social a:nth-child(4){color: #0077B5;}

(C) Icon font 應用

Note:Web Font使用

A. Google字體:英https://fonts.google.com/ 中:https://fonts.google.com/earlyaccess

B.圖示字體

1 Flaticonhttp://www.flaticon.com/

2 Awesome:

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

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

(D)【:before】與【:after】應用

練習1:利用Flaticon Icon圖示來結合

<link rel="stylesheet" href="my-icons/font/flaticon.css">

 

nav a:hover:before { content: "\f100"; font-family: "Flaticon";
                    font-size: 50px; color: #ff0000; vertical-align: middle;}

 

練習2:before應用

/* 練習2:before應用*/

/* 補加 position 父子之間對應*/
nav a{ position: relative; }

/*新增*/
nav a:before{ content: ''; width: 50px; height: 50px;
                background: url(my-icons/png/003-sale.png); 
                background-size: cover;
                position: absolute; top: -50px; left: -25px; 
                transform: rotate(-10deg);
                opacity: 0; transition: all .5s;}
nav a:hover:before{ opacity: 1;}

說明:transition 過渡概念