有没有办法在导航栏的顶部添加一个框?

2022-01-28 12:59:43 标签 htmlcssnavbar

我的HTML/CSS入门课程要求我们在导航栏中放置一个框:它应该有一个通用的框,在导航栏的右侧有一个黑色的背景色的标志。它应该是80像素* 80像素,并触及导航的右侧。

然而,我一直无法找到任何方法在导航栏顶部放置东西。我尝试添加div到导航,但然后框被隐藏在导航栏下。任何建议吗?

HTML(我知道这不是创建导航条的最好方式,但它是目前为止显示:

nav {
    height: 80px;
    width: 100%;
    background-color: white;
    border-bottom: 4px solid green;
    box-shadow: 10px 10px 10px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
}
.box1 {
    height: 80px;
    width: 80px;
    background-color: red;
    border: 3px green;
    background-color: black;
}
<nav>
        <p class="p1">Home</p>
        <p class="p2">About</p>
        <p class="p3">Contact</p>
        <div class="box1"></div>
</nav>

# # #你可以使用position:absolute on the box with <盒子上有top and leftleft

# # #

nav {
  height: 80px;
  width: 100%;
  background-color: white;
  border-bottom: 4px solid green;
  box-shadow: 10px 10px 10px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
}
.box1 {
  height: 80px;
  width: 80px;
  background-color: red;
  border: 3px green;
  background-color: black;
  position: absolute;
  top: 0;
  right:0;
}
<nav>
  <p class="p1">Home</p>
  <p class="p2">About</p>
  <p class="p3">Contact</p>
  <div class="box1"></div>
</nav>

# # #我们

nav {
  height: 80px;
  width: 100%;
  background-color: white;
  border-bottom: 4px solid green;
  box-shadow: 10px 10px 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  position: absolute;
  top: 100px;
  left: 0;
}
.box1 {
  height: 80px;
  width: 100%;
  position: relative;
  z-index: 1;
  top: 0;
  bottom: 20px;
  background-color: red;
}
<div class="box1"></div>
<nav>
  <p class="p1">Home</p>
  <p class="p2">About</p>
  <p class="p3">Contact</p>
</nav>

在文本框向右移动flex: 1; on textb

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码