用float，grid，flex，練習簡單導航欄
![在這裏插入圖片描述]()
HTML相同（需要引入reset文件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="nav_flaot_1.css">
</head>
<body>
<div class="navbar">
<a href="#" class="logo">Perry</a>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#service">Service</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</body>
</html>
float：
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
}
.navbar {
width: 100%;
height: 70px;
background-color: sienna;
}
.navbar .logo {
float: left;
margin-left: 10%;
font-size: 35px;
margin-top: 10px;
color: turquoise;
}
.navbar .nav a {
margin-top: 20px;
float: right;
margin-right: 35px;
color: violet;
}
flex：
.navbar {
position: fixed;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: antiquewhite;
width: 100%;
height: 70px;
z-index: 1;
}
.navbar .logo {
flex: 1 1 auto;
text-transform: uppercase;
margin-left: 10%;
font-weight: bold;
letter-spacing: 2px;
font-size: 35px;
color: purple;
}
.navbar .nav {
display: flex;
list-style: none;
margin-right: 15%;
}
a {
margin: 15px;
color: #000000;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
}
html {
scroll-behavior: smooth;//使切換更流暢
}
Grid：
.navbar {
display: grid;
grid-template-columns: repeat(10, 1fr);
background-color: thistle;
grid-template-rows: repeat(1, 70px);
align-items: center;
}
.logo {
margin-left: 10%;
grid-column: 1/6;
text-transform: uppercase; //轉換爲大寫
font-size: 35px;
font-weight: 700;
}
.nav {
display: grid;
grid-column: 6/10;
grid-template-columns: repeat(5, 1fr);
}
.nav li a {
color: #ffffff;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
a {
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
