header部分的布局
时间: 2023-08-27 13:05:44 浏览: 41
实现header部分的布局,可以使用CSS中的position和flex布局。
使用position布局:
HTML代码:
```
<header>
<div class="logo">Logo</div>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</nav>
</header>
```
CSS代码:
```
header {
height: 60px;
position: relative;
background-color: #fff;
box-shadow: 0px 2px 2px #ccc;
}
.logo {
position: absolute;
top: 50%;
left: 50px;
transform: translateY(-50%);
font-size: 24px;
font-weight: bold;
}
nav {
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li:first-child {
margin-left: 0;
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}
```
使用flex布局:
HTML代码:
```
<header>
<div class="logo">Logo</div>
<nav>
<ul>
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</nav>
</header>
```
CSS代码:
```
header {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
box-shadow: 0px 2px 2px #ccc;
}
.logo {
font-size: 24px;
font-weight: bold;
margin-left: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li:first-child {
margin-left: 0;
}
nav ul li a {
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}
```