佈局實戰,導航欄的製作
阿新 • • 發佈：2022-03-25
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"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css"> <link rel="stylesheet" media="screen and(min-width: 1100px)" href="css/widescreen.css"> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.0/css/all.min.css" rel="stylesheet"> <title>鑠洋線上 | 前端線上學習平臺</title> </head> <body> <nav id="navbar"> <h1 class="logo"> <span class="text-primary"> <i class="fas fa-book-open"> 鑠洋線上 </i> </span> </h1> <ul> <li><a>Home</a></li> <li><a>What</a></li> <li><a>Who</a></li> <li><a>Contact</a></li> </ul> </nav> </body> </html>
頁面文件的結構
2. css 的樣式
/* rest */ * { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: 0.75rem 0; } /* utility classes */ .text-primary { color: #32cb52; } /* navbar */ #navbar { display: flex; /* 兩端對齊 */ justify-content: space-between; background: #333; color: #fff; position: sticky; top: 0; z-index: 1; padding: 1rem; } #navbar ul { display: flex; list-style: none; /* 以中心點進行對齊 */ align-items: center; } #navbar ul li a { color: white; padding: 0.75rem; margin: 0 0.25rem; } #navbar ul li a:hover { background: #93cb52; border-radius: 5px; }
3. 重點
去除頁面的基本樣式
* { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; line-height: 1.4; } a { text-decoration: none; } p { margin: 0.75rem 0; }