#nav ul li a {web /* background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;" lang="en-US"> #5385ff; */字體 /*float: left;*/動畫 /*a標籤是行內標籤,在一行可顯示多個標籤,其寬度等於內容的大小。要想固定a標籤的寬度,應變爲行內-塊級標籤*/spa display: inline-block;設計 width: 200px;orm
color: white;ip margin: 0px 20px 10px;ci font-size: 30px;it text-align: center;io }
/* 響應式設計:監聽屏幕寬度或高度的變化。*/ /* 當屏幕的寬度或高度達到某個臨界值時,就執行下面的東西 */ @media screen and (max-width: 1210px) { /*改變a標籤的寬度和字體大小*/ #nav ul li a { width: 160px; font-size: 25px; } }
@media screen and (max-width: 1010px) { /*改變a標籤的寬度和字體大小*/ #nav ul li a { width: 120px; font-size: 20px; } }
@media screen and (max-width: 810px) { /*改變a標籤的寬度和字體大小*/ #nav ul li a { width: 80px; font-size: 15px; } } |
#footer .dock ul li { display: inline-block; margin: 0px 5px; /* 設置動畫過渡的時長和效果(有線性、非線性) */ -webkit-transition: 0.2s linear; }
#footer .dock ul li a img { width: 50px; height: 50px; }
/* 過渡形變更畫 */ #footer .dock ul li:hover { /* 參照點(以座標點的位置爲參照點來進行形變:底部中心) */ -webkit-transform-origin: bottomcenter; /* 設置形變(如:移動、放大、縮小等) */ -webkit-transform: scale(1.6); } |