1. 首页
  2. 问题列表
  3. 如何设置左侧的徽标和右侧的导航菜单栏与html图像的背景使用位置（注意：不是css背景图像）
提问者：小点点

如何设置左侧的徽标和右侧的导航菜单栏与html图像的背景使用位置（注意：不是css背景图像）


我有模型

如何在左侧设置logo，在右侧设置导航菜单栏，背景使用位置为HTML图像（注意：不是CSS背景图像）

<div class="container">
    <div class="image-parent clearfix">
        <img src="D:\Navin\Bino\images\header-img.png" class="head-img" alt="">
        <div class="containerbody">
            <div class="image-child clearfix">
                <div class="logo">
                    <img src="D:\Navin\Bino\images\bino-logo.png" alt="">
                </div>
                <div class="menu">
                    <ul>
                        <li>HOME</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

html, body { padding: 0px; margin: 0px; }
* { box-sizing: border-box; margin: 0; }
.container { width: 100%; }
.containerbody { max-width: 1170px; margin: 0 auto; }
.clearfix::after { display: table; clear: both; content: ""; }
.head-img { width: 100%;  }
.image-parent { position: relative; }
.image-child { position: absolute; }
.logo { float: left; width: 20%; }
.menu { float: left; width: 80%; }

共1个答案

匿名用户

为html元素提供以下css类

  • 徽标->徽标类
  • 导航菜单栏->Navbar类
  • 背景图像:->background-imgclass

并使用css类NavMenu将这三个元素包装在html

元素中

然后，将以下CSS样式添加到您的页面：

.navmenu {
position: fixed;
right: 0;
left: 0;
height: 20px;
display: flex;
justify-content: space-between;
}
.logo, .navbar {
  position: relative;
  z-index: 2;
}
.background-img {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  object-fit: cover;
}

和HTML：

<div class="navmenu">
  <img src="D:\Navin\Bino\images\header-img.png" class="background-img" alt="">
  <img class="logo" src="D:\Navin\Bino\images\bino-logo.png" alt="">
  <div class="navbar">
    <ul>
      <li>HOME
      </li>
    </ul>
  </div>
</div>

相关问题