HTML/CSS； 我如何制作这个导航栏（水蓝色的？左边是.png格式的标志，它是如何突出背景的？

Question

我应该在这个上使用 flexbox 方法，我对如何做整个主体有点困惑，背景图片是歌手。

https://i.stack.imgur.com/X770d.png

Answer 1

要制作该导航栏，您可以从头开始，也可以使用 Bootstrap 来加快该过程。 为了使导航栏类似于您提供的图像中的导航栏，您需要 HTML 和 CSS 的组合。 您可以使用<div></div>创建一个 div 容器，并给它一个 class 例如.navbar然后使用 CSS 您可以为 class 分配background-color: aquablue; . 给 class 一个margin-top: 5%; 左右复制您提供的图像，然后从左侧复制一个边距。 从那里您只需创建一个无序列表<ul></ul>并使用<li></li>标签添加导航栏项目，并使用 CSS 为这些项目提供所需的所有字体和位置。 我假设您提供的图像中导航栏的不透明度大约为 0.7，因此背景仍然可见。 您还可以通过以下链接访问 Bootstrap 文档：https://getbootstrap.com/docs/4.1/getting-started/introduction/ ，以便在您的网站中使用他们的导航栏，并为您准备好他们的自定义 CSS。 至于徽标图像，我会假设它是网页顶部的整个图像的一部分，并且蓝色条已放置在其上，但如果不检查整个徽标是否是超链接，我无法判断与否...希望这会有所帮助！

（您仍然需要为 CSS 等中的导航栏分配宽度和高度属性，但这只是简单的操作方法）