【前端筆記】? CSS 擴充

標籤：linear   attach   display   line   scale   title   media   網頁   底部   

一、響應式設計

#nav ul li a {     /* 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標籤的寬度，應變為行內-塊級標籤*/     display: inline-block;     width: 200px;       color: white;     margin: 0px 20px 10px;     font-size: 30px;     text-align: center; }   /* 響應式設計：監聽螢幕寬度或高度的變化。*/ /* 當螢幕的寬度或高度達到某個臨界值時，就執行下面的東西 */ @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); }

 

 

 

【前端筆記】? CSS 擴充