css 進階實戰專案
阿新 • • 發佈：2022-03-26
1. html 結構
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="./css/menu.css"> </head> <body> <div class="menu-wrap"> <input type="checkbox" class="toggler"> <div class="hamburger"><div></div></div> <div class="menu"> <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Serices</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> <header id="showcase"> <div class="container showcase-container"> <h1>歡迎來到鑠洋線上</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime eveniet modi nihil non, ea suscipit neque dolorem officia similique amet quidem dolores optio veritatis excepturi veniam, unde expedita asperiores tempora.</p> <a href="#" class="btn">閱讀更多</a> </div> </header> </body> </html>
2. css 樣式
:root { --primary--color: rgba(13, 110, 139, 0.75); --secondary-color: rgba(229, 148, 0, 0.9); --onerlay-color: rgba(24, 39, 51, 0.85); --menu-speed: 1s; } /* reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } .container { max-width: 960; margin: 0 auto; overflow: hidden; padding: 0 3rem; } #showcase { background-color: var(--primary--color); color: #fff; height: 100vh; position: relative; } #showcase:before { content: ''; background: url('../img/1.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; color: #fff; padding: 0.75rem 1.5rem; margin-top: 1rem; transition: opacity 1s ease-in-out; } .btn:hover{ opacity: 0.7; }