gpt4 book ai didi

php -
之间的差距

转载 作者:行者123 更新时间:2023-11-28 04:50:15 24 4
gpt4 key购买 nike

我尝试搜索并使用在它建议放置的其他地方找到的代码:

margin:0px;

,但它仍然没有解决我的文件 divs 之间创建的 GAP 问题。这是代码:[第一个是 Jquery,第二个是 CSS,最后一个是主体。]

jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;

jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());

jQuery(window).scroll(function(){

var scrollPos = jQuery(window).scrollTop();

if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>

<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink"><a href="{{ route('beverage_main') }}">Home</a></li>
<li class="navlink"><a href="{{ route('beverage_foods') }}"> Foods </a></li>
<li class="navlink"><a href="#"> Beverages </a></li>
</ul>
</ul>
</div>

<!-- Here's where the gap appears -->

<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>


<div class="parallax1"></div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>

最佳答案

几个原因:

  1. p 元素有边距。
  2. .nav-placeholder 类有 margin-bottom: 40px;
  3. ul.header(应该是div.header)显示为inline-block 并插入其父级高度 - 保留其默认值显示为 block 。

关于php - <div> 之间的差距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40755351/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com