制作左边有logo、右边有导航的页眉可以通过以下步骤实现:
<header>
<div class="logo">
<img src="logo.png" alt="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>
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f2f2f2;
}
.logo img {
height: 40px;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-left: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
display: flex
将页眉的内容水平排列,并使用justify-content: space-between
使logo和导航分别靠左和靠右对齐。align-items: center
使logo和导航在垂直方向上居中对齐。padding
和background-color
来美化页眉的样式。<img>
标签来插入logo图片,并设置合适的高度。<ul>
和列表项<li>
来创建导航菜单,并使用<a>
标签添加链接。请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求和项目要求进行。
领取专属 10元无门槛券
手把手带您无忧上云