css進階專案2
阿新 • • 發佈：2022-03-27
頁面由導航欄和內容構成。導航欄剛開始是隱藏的，點選左上角的三條槓之後就會在螢幕中間顯示導航欄並有一個過渡的效果。內容部分被放在一個 header 標籤裡，裡面有一個類名為 container 的盒子，它的作用是讓內容居中。導航欄放在一個盒子裡，左上角的三條槓放在一個類名是 hamburger 的盒子裡，剩下的導航欄內容放在 ul 標籤裡。在三條槓之前加一個複選框，它的作用是讓導航欄顯示與隱藏。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <metahttp-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/menu.css"> <title>Document</title> </head> <body> <div class="menu-wrap"> <input type="checkbox" class="toggler"> <div class="hamburger"> <div></div> </div> <div class="menu"> <div> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> <header id="showcase"> <div class="container showcase-container"> <h1>歡迎來到歐青拉少</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Amet ut doloremque praesentium, dignissimos reprehenderit ullam. Tempora, consequuntur ex? Debitis, dolores?</p> <a href="#" class="btn">閱讀更多</a> </div> </header> </body> </html>
首頁的樣式
建立三個顏色的樣式變數。給 container 設定最大寬度 960px，讓溢位的內容隱藏。給首頁新增透明度為 0.75 的藍色，然後新增相對定位。用 #showcase::before 給首頁新增一張背景圖，讓 befor 的寬高為百分百，並讓它的 z-index 為 -1。給 showcase-container 盒子設定成彈性佈局，並讓內容水平、垂直居中，然後讓字型居中並設定高度百分百。讓 h1 的字型和 p 的字型分別為 4rem 和 1.3rem。讓閱讀更多的樣式為內邊距 0.75rem 1.5rem，讓它的背景色為淡綠色。
:root{ --primary-color: rgba(13, 110, 139, 0.75); --secondary-color: rgba(229, 148, 0, 0.9); --overlay-color: rgba(24, 39, 51, 0.85); } *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.4; } .container{ max-width: 960px; margin: auto; overflow: hidden; padding: 0 3rem; } /* 首頁 */ #showcase{ background-color: var(--primary-color); color: #FFF; height: 100vh; position: relative; } #showcase::before{ content:''; background: url('../img/pexels-kristina-paukshtite-5429260.jpg') no-repeat center center/cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } #showcase .showcase-container{ display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; } #showcase .showcase-container h1{ font-size: 4rem; } #showcase .showcase-container p{ font-size: 1.3rem; } .btn{ display: inline-block; border: none; text-decoration: none; background: var(--primary-color); color: #FFF; padding: 0.75rem 1.5rem; margin-top: 1rem; transition: opacity 0.4s ease-in-out; } .btn:hover{ opacity: 0.7; }
導航欄樣式
給導航欄的盒子新增絕對定位，讓它的 top 和 left 為 0。給左上角的三條槓的盒子新增絕對定位，讓它顯示在左上角。三條槓的中間一條是一個 div。它的寬為百分百，高為 2px，讓它的背景色為白色。上下兩條用的是 before 和 after 偽元素製作的，分別讓它們的 top 值為 10px 和 -10px 就可以顯示上下兩條。當複選框為選中狀態時讓三條槓旋轉 135度，讓偽元素的 top 為 0，然後讓 rotate 的值為 90deg，這樣就可以變為叉號。給複選框新增 hover，讓它的 rotate 為 225deg，這樣就有了旋轉的效果。先讓背景圖隱藏，然後當複選框為選中狀態時讓背景圖顯示，這期間要加一個過渡效果。
.menu-wrap{ position: fixed; top: 0; left: 0; z-index: 1; } .menu-wrap .toggler{ position: absolute; top: 0; left: 0; z-index: 2; cursor: pointer; width: 50px; height: 50px; opacity: 0; } .menu-wrap .hamburger{ position: absolute; top: 0; left: 0; z-index: 1; width: 60px; height: 60px; padding: 1rem; background: var(--primary-color); display: flex; justify-content: center; align-items: center; } .menu-wrap .hamburger > div{ position: relative; flex: none; width: 100%; height: 2px; background: #FFF; transition: 0.4s; } .menu-wrap .hamburger > div::before, .menu-wrap .hamburger > div::after{ content: ''; position: absolute; z-index: 1; width: 100%; height: 2px; background: #FFF; top: -10px; } .menu-wrap .hamburger > div::after{ top: 10px; } /* 三個橫線旋轉 :checked表示選中 */ .menu-wrap .toggler:checked + .hamburger > div{ transform: rotate(135deg); } /* 橫線變叉號 */ .menu-wrap .toggler:checked + .hamburger > div::before, .menu-wrap .toggler:checked + .hamburger > div::after{ top: 0; transform: rotate(90deg); } .menu-wrap .toggler:checked:hover + .hamburger > div{ transform: rotate(225deg); } /* 導航欄的背景層 */ .menu-wrap .toggler:checked ~ .menu{ visibility: visible; } .menu-wrap .toggler:checked ~ .menu > div{ transform: scale(2); transition: .6s; } .menu-wrap .toggler:checked ~ .menu > div > div{ opacity: 1; transition: .4s .1s; } .menu-wrap .menu{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; /* 是否可見 */ visibility: hidden; } .menu-wrap .menu > div{ background: var(--overlay-color); width: 200vw; height: 200vh; display: flex; float: none; justify-content: center; align-items: center; border-radius: 50%; transform: scale(0); } .menu-wrap .menu > div > div{ text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; } .menu-wrap .menu > div > div li{ list-style: none; color: #FFF; font-size: 0.75rem; padding: 1rem; } .menu-wrap .menu > div > div li > a{ color: #FFF; text-decoration: none; transition: .4s; } .menu-wrap .menu > div > div li > a:hover{ color: var(--secondary-color); }