html - 如何在不破坏导航栏设计的情况下使此导航栏与横幅重叠，并且在滚动时导航栏必须跟随？-6ren

html - 如何在不破坏导航栏设计的情况下使此导航栏与横幅重叠，并且在滚动时导航栏必须跟随？

转载作者：太空宇宙更新时间：2023-11-04 08:02:07

/*transfonter*/
@font-face {
  font-family: 'fontawesomeregular';
  src: url('.../font/fontawesome/fontawesome-webfont.woff2') format('woff2'),
      url('.../font/fontawesome/fontawesome-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}


@font-face {
  font-family: 'Garamond Premiere Pro';
  src: url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.eot');
  src: url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.eot?#iefix') format('embedded-opentype'),
    url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.woff') format('woff'),
    url('../font/garamond_premier_pro_bold/GaramondPremrPro-Bd.ttf') format('truetype');
    font-weight: bold;
  font-style: normal;
}

/*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
.magenta{color:#ad1a33;}


/*Header by order*/

  /*navbar*/
  #header .navbar{background-color:black;background: rgba(0,0,0,0.6); border:none;min-height:82px;border-radius: 0;position: absolute;left:0;position: fixed;z-index: 2;right:0;}
  #header .nav a{color:white; font-family: 'font-GaramondPremierePro';}
  #header .nav {padding: 1% 15%;}
  #header .navbar-header a{font-size:24px;margin-top: 3%;margin-left: 50%;color: white;}
  /*carousel*/
  #header .header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
  #header .header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; 
    text-align: center; horizontal-align: middle; margin: 14% 15% 9% 15%; bottom: 0%; padding: 4%;} 
  #header .header-banner-graydiv h3{font-size: 50px;}
  #header .header-banner-graydiv h1{font-size:92px;}
  #header .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; display: inline-flex;
      align-items: center;}
  #header .header-banner-graydiv h4::before,.carousel-inner .header-banner-graydiv h4::after{ content: "";width: 76px;height: 4px;background: #ffffff;margin: 5px;}
  #header .header-banner-graydiv p{font-size:20px;}
  /*subscribe*/



/*Content by Order*/

/*Footer by Order*/


/*RESPONSIVENESS*/

  /*MOBILE*/

  @media screen and (max-width: 767px)
  {

  }
  /*TABLET*/
  @media screen (min-width: 768px) and (max-width: 991px)
  {

  }
  /*DESKTOP*/
  @media screen and (min-width: 992px)
  {

  }

  /*Custom*/
  @media screen and (max-width: 1305px)
  {
    #header .nav {margin: auto 0;padding: 0;}
    #header .navbar-header a{margin: auto 0;}
    #header .navbar{padding-top: 15px}
  }

<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<link rel="stylesheet" type="text/css" href="css/custom.css">
	<link rel="stylesheet" href="css/bootstrap.min.css">
  	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  	<meta name="viewport" content="width=device-width initial-scale=1">
  	<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond|EB+Garamond|Great+Vibes" rel="stylesheet">
  	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">	
  	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!--header-->
	<div id="header">

		<nav class="navbar navbar-inverse">
			  <div class="container-fluid">
				    <div class="navbar-header">
					      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>
						        <span class="icon-bar"></span>                        
					      </button>
					      <a class="navbar-brand font-GreatVibes" href="#">Your Company Name</a>
					</div>
					<div class="collapse navbar-collapse" id="myNavbar">
					      <ul class="nav navbar-nav navbar-right">
						        <li><a href="/">HOME</a></li>
								<li><a href="/">ABOUT</a></li>
								<li><a href="/">SERVICES</a></li>
								<li><a href="/">BLOG</a></li>
								<li><a href="/">CONTACT</a></li>
								<li><a href="/"><i class="fa fa-search" title="fafa"></i></a></li>
					      </ul>
				    </div>
			  </div>
		</nav>

		<div id="myCarousel" class="carousel slide" data-ride="carousel">
				  <!-- Indicators -->
				  <ol class="carousel-indicators">
				    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				    <li data-target="#myCarousel" data-slide-to="1"></li>
				    <li data-target="#myCarousel" data-slide-to="2"></li>
				  </ol>
				 <!-- Wrapper for slides -->
	  			<div class="carousel-inner">
					<div class="item active">
						<img src="https://images.alphacoders.com/469/46961.jpg" class="header-banner" >
						<div class="header-banner-graydiv">
							 <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
							 <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
							 <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
							 <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
						</div>
					</div>
					<div class="item">
				        <img src="https://images4.alphacoders.com/769/76996.jpg" class="header-banner" >
						<div class="header-banner-graydiv">
							 <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
							 <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
							 <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
							 <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
						</div>
				    </div>

				    <div class="item">
				      	  <img src="https://images.alphacoders.com/469/46961.jpg" class="header-banner" >
							<div class="header-banner-graydiv">
								 <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
								 <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
								 <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
								 <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
							</div>
				    </div>
				</div>
				  <!-- Left and right controls -->
						  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
						    <span class="glyphicon glyphicon-chevron-left"></span>
						    <span class="sr-only">Previous</span>
						  </a>
						  <a class="right carousel-control" href="#myCarousel" data-slide="next">
						    <span class="glyphicon glyphicon-chevron-right"></span>
						    <span class="sr-only">Next</span>
						  </a>
			</div>
	</div>
<!--end of header-->

<!--content-->
<!--end of content-->

<!--footer-->
<!--end of footer-->


	
</body>
</html>

导航栏和横幅必须都在顶部，但导航栏必须与横幅重叠。当用户滚动时，导航栏也必须跟随。如果你能在这方面帮助我:如何使横幅和横幅内的灰色 div 在屏幕调整大小时都响应？

我的导航栏是自举的，很难修复与其他元素的响应。

html代码:

<!--header-->
    <div id="header">

        <nav class="navbar navbar-inverse">
              <div class="container-fluid">
                    <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>                        
                          </button>
                          <a class="navbar-brand font-GreatVibes" href="#">Your Company Name</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                          <ul class="nav navbar-nav navbar-right">
                                <li><a href="/">HOME</a></li>
                                <li><a href="/">ABOUT</a></li>
                                <li><a href="/">SERVICES</a></li>
                                <li><a href="/">BLOG</a></li>
                                <li><a href="/">CONTACT</a></li>
                                <li><a href="/"><i class="fa fa-search" title="fafa"></i></a></li>
                          </ul>
                    </div>
              </div>
        </nav>

        <div id="myCarousel" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                  </ol>
                 <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="img/head_banner.jpg" class="header-banner" >
                        <div class="header-banner-graydiv">
                             <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
                             <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
                             <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
                             <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/sample_carousel1.jpg" class="header-banner" >
                        <div class="header-banner-graydiv">
                             <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
                             <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
                             <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
                             <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
                        </div>
                    </div>

                    <div class="item">
                          <img src="img/sample_carousel2.jpg" class="header-banner" >
                            <div class="header-banner-graydiv">
                                 <h3 class="font-GaramondPremierePro white">WELCOME TO</h3>
                                 <h1 class="font-GreatVibes white">Your Restaurant Name</h1>
                                 <h4 class="font-GaramondPremierePro white">FOOD &amp RESTAURANT</h4>
                                 <p class="font-CormorantGaramond white">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br> tempor incididunt ut labore et dolore magna. aliqua. Ut enim ad minim </p>
                            </div>
                    </div>
                </div>
                  <!-- Left and right controls -->
                          <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                          </a>
                          <a class="right carousel-control" href="#myCarousel" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                          </a>
            </div>
    </div>
<!--end of header-->

CSS:

*general*/
.font-Awesome{font-family: 'fontawesomeregular';}
.font-GaramondPremierePro{font-family: 'Garamond Premiere Pro';}
.font-CormorantGaramond{font-family: 'Cormorant Garamond', serif;}
.font-GreatVibes{font-family: 'Great Vibes', cursive;}
.white{color: #ffffff;}
.magenta{color:#ad1a33;}


/*Header by order*/

  /*navbar*/
  #header .navbar{background-color:black;background: rgba(0,0,0,0.6); border:none;min-height:82px;border-radius: 0;}
  #header .nav a{color:white; font-family: 'font-GaramondPremierePro';}
  #header .nav {padding: 1% 15%;}
  #header .navbar-header a{font-size:24px;margin-top: 3%;margin-left: 50%;color: white;}
  /*carousel*/
  #header .header-banner{ width:100%; height:663.31px; padding:0px !important; top:0; }
  #header .header-banner-graydiv{background-color: black; background: rgba(0,0,0,0.5); position: absolute; top: 0%; left: 0; right: 0; vertical-align: middle; 
    text-align: center; horizontal-align: middle; margin: 14% 15% 5% 15%; bottom: 0%; padding: 4%;} 
  #header .header-banner-graydiv h3{font-size: 50px;}
  #header .header-banner-graydiv h1{font-size:92px;}
  #header .header-banner-graydiv h4{font-size: 39px;margin-top: -2%;margin-bottom:4%; display: inline-flex;
      align-items: center;}
  #header .header-banner-graydiv h4::before,.carousel-inner .header-banner-graydiv h4::after{ content: "";width: 76px;height: 4px;background: #ffffff;margin: 5px;}
  #header .header-banner-graydiv p{font-size:20px;}

我的导航栏是这样的:

但它应该是这样的:

最佳答案

没有工作示例很难回答，但您尝试过吗:

#header .navbar {
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}

这会将导航栏定位在内容上方并将背景设置为半透明的深灰色/黑色。

关于html - 如何在不破坏导航栏设计的情况下使此导航栏与横幅重叠，并且在滚动时导航栏必须跟随？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46930374/

文章推荐： c - K&R C 书中的基本 getchar() 相关函数不起作用？

文章推荐： c - 如何将字符串文字用作其他左值？

文章推荐：检查 `isalpha` 的返回值

user-interface - 交互设计、视觉设计、网页设计、UX 设计、UI 设计、UI 开发之间有什么区别？
关闭。这个问题需要更多focused .它目前不接受答案。想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
wpf - 仅适用于 VS 设计 View 的 Blend 中的 UnresolvedAssemblyException - 在 VS 设计 View 中工作正常
.NET 框架:4.5.1 我在 Blend for visual studio 2015 中遇到一个奇怪的错误，我找不到它的来源。如果我在 VS 中打开我的 WPF 解决方案，它会加载并运行良好。
web-services - RESTful URL 设计 : public vs private API, 层次结构 API 设计模式，URI 与 URL 设计？
我经常遇到这样的问题，与 Hierarchical RESTful URL design 非常相似假设该服务仅提供用户上传文档。 POST, GET /accounts PUT, DELETE /a
设计，无法登出
在 Rails 应用程序中，我使用 devise 来管理我的用户，而我用来销毁 session 的链接不再有效。它正在工作，现在我添加了事件管理员，但没有。我的链接是 :delete, :clas
设计:更改密码
我已经坚持了超过 24 小时，试图按照此处发布的其他解决方案进行操作，但我无法使其正常工作。我是 Rails 新手，需要帮助! 我想让我的/users/edit 页面正常工作，以便我可以简单地更改用户
设计 - 超时不起作用
Devise 在以下情况下不会使用户超时: 用户登录，关闭选项卡，然后在超时 + X 分钟内重新访问该 URL。用户仍处于登录状态。如果选项卡已打开并且稍后刷新/单击，则超时可以正常工作。这意味着
WPF slider 设计
我想使用这样的 slider 我希望该 slider 根据提供给它的值进行相应调整。到目前为止，我只能应用具有渐变效果的背景，但无法获得这种效果。请通过提供样式代码来帮助我。
WCF 设计 - 一个请求和响应对象还是多个？
您应该为每种方法创建一个请求/响应对象，还是应该为每个服务创建一个？如果我在所有方法中使用它，我的服务请求对象中将只有 5 个不同的东西，因为我对几乎所有方法使用相同的输入。响应对象将只有一个字典
RESTful 设计 - 如何为实体的附件建模
我正在尝试在 REST 中对实体的附件进行建模。假设一个缺陷实体可以附加多个附件。每个附件都有描述和一些其他属性(上次修改时间、文件大小...)。附件本身是任何格式的文件(jpeg、doc ...)
sql - 设计——第六范式
我有以下表格: Blogs { BlogName } BlogPosts { BlogName, PostTitle } 博客文章同时建模一个实体和一个关系，根据 6nf(根据第三个宣言)这是无效的。
OOP 设计 - 许多对象每个都与其他对象的有限子集具有独特的交互
如果 A 类与 B、C 和 D 类中的每一个都有唯一的交互，那么交互的代码应该在 A 中还是在 B、C 和 D 中？我正在编写一个小游戏，其中许多对象可以与其他对象进行独特的交互。例如，EMP点击
设计 + Omniauth + remember_me
关于如何记住我与 Omniauth 一起工作似乎有些困惑。根据这个wiki ，您需要在 OmniauthCallbacksController 中包含以下内容: remember_me(user)
multithreading - 将非线程安全组件与多线程组件一起使用(设计)
设计问题: 使用非线程安全组件(集合，API，...)在/带有多线程成分 ... 例子 : 组件 1 :多线程套接字服务器谁向消息处理程序发送消息... 组件 2 :非线程安全消息处理程序谁
XML 设计 - 如何？
我们目前正在设计一个 RESTful 应用程序。我们决定使用 XML 作为我们的基本表示。我有以下关于在 XML 中设计/建模应用程序数据的问题。在 XML 中进行数据建模的方法有哪些？从头开始然
XSD 设计 - 一个或多个规则
我正在设计一个新的 XSD 来从业务合作伙伴那里获取积分信息。对于每笔交易，合作伙伴必须提供至少一种积分类型的积分值。我有以下几点:
API 设计 - 最佳实践以及如何支持多个版本
设计支持多个版本的 API 的最佳方法是什么。我如何确保即使我的数据架构发生更改(微小更改)，我的 api 的使用者也不会受到影响？任何引用架构、指南都非常有用。最佳答案 Mark Nottingh
文件上传的 REST 设计
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 4 年前。 Improv
PHP 文件布局/设计
我想用 php 创建一个网站，其工作方式与 https://www.bitcoins.lc/ 相同。确实，就每个页面上具有相同布局但内容会随着您更改链接/页面而改变而言，我如何在 php 中使用lay
Java Swing 设计
我有一个关于编写 Swing UI 的问题。如果我想制作一个带有某些选项的软件，例如在第一个框架上，我有三个按钮(新建、选项、退出)。现在，如果用户单击新按钮，我想将框架中的整个内容更改为其他内容。
docker - Kubernetes建筑/设计/？
我正在尝试找出并学习将应用程序拥有的一堆Docker容器移至Kubernetes的模式和最佳实践。诸如Pod设计，服务，部署之类的东西。例如，我可以创建一个其中包含单个Web和应用程序容器的Pod，但

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在不破坏导航栏设计的情况下使此导航栏与横幅重叠，并且在滚动时导航栏必须跟随？