个人中心
gpt4 book ai didi

html - 由于位置限制而出现空白？

转载 作者：太空宇宙 更新时间：2023-11-04 14:03:47 25 4
gpt4 key购买 nike

我正在建立一个网站，但我仍处于学习阶段，我会说这是我最复杂的布局。基本上我的页面顶部有一个不寻常的横幅，我认为这是导致我出现问题的原因。在我页面的页脚上方有一个大的空白区域。我认为这是由我不得不使用 top:-200px; 之类的脸造成的。在我的一些 div 上，以便它们位于正确的位置。

如果有经验丰富的人来检查一下会很有帮助。

这是网站 -www.redchevron.co.uk

这是 html -

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/home_stylesheet.css">
<title>Red Chevron | Graphic Design</title>
<META NAME="description" CONTENT="At Red Chevron, we strive to bring you crisp, quality designs to suit your needs.  Digital Graphics | Corporate Identity | Promotional Material">
<META NAME="keywords" CONTENT="graphics, rob, jeffrey, graphic, design, photoshop, logo, business, card, leaflet, flyer, freelance, red, chevron, redchevron, designer, digital, quality, media">
<script>
  $(“body”).Scrollbar();
  </script>
</head>

<body>



<div class="banner">
<div class="navigation">

        <ul>
          <li><a class="nav" href="index.html">Home</a></li>
          <li><a class="nav" href="#">Portfolio</a></li>
          <li><a class="nav"></a></li>
          <li><a class="nav" href="#">About me</a></li>
          <li><a class="nav" href="#">Contact</a></li>


        </ul>

      </div>
</div>

<div class="headround">

</div>

<div class="headlogo">
<img src="images/head_logo.png">
</div>

<!-- stop here for header -->


<div class="maincont">
<div class="mainfeat">
<img src="images/feat_flag.png">
<div class="maininfo"><!--feature-->

</div>
</div>
  </div>


<div class="maincont">
<div class="mainfeat">
<img src="images/news_flag.png">
<div class="maininfo"><!--news-->
  <h2> Coming Soon </h2>
Thank you for visiting Red Chevron.<br><br>
My name is Rob Jeffrey, founder of Red Chevron. I offer quality, affordable graphic design services to suit your needs. 
Whether you need a new Corporate Identity, promotional material, or anything in between, I am here to make your ideas a reality.<br><br>

I have spent over 6 years refining and polishing my Digital Design skills in order to give my clients the very best results.<br><br>
Unfortunately this site is currently under construction.<br>
If you would like to contact me, please use the details below:<br><br>
Rob Jeffrey<br>
<b>Call:</b> 07925 870385<br>
  <b>Email:</b> rob.jeffrey@redchevron.co.uk 
</div>
</div>
  </div>


<div class="maincont">
<div class="mainfeat">
<img src="images/pipe_flag.png">
<div class="maininfo"><!--pipeline-->

</div>
</div>

    <div class="footer">
&copy; 2014 Red Chevron  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; All Rights Reserved
  </div>
  </div>

  <!-- Start of footer -->




</body>

</html>

还有CSS——

标题 -

*{
margin:0px;
  padding:0px;

}

body{
  overflow-x:hidden;
}


.banner{
width:100%;
height:80px;
position:relative;
z-index:10;
background-color:white;
box-shadow: 0px 2px 15px  rgba(0, 0, 0, 0.6);
  overflow:hidden;

}

.headround{
background: #fff;
  position:relative;
  float: center;
    margin:auto;
  height: 76px;
  width: 164px;
  z-index:100;
 -webkit-border-radius: 0px 0px 76px 76px;
    -moz-border-radius: 0px 0px 76px 76px;
    border-radius: 0px 0px 76px 76px;
  box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
}

.headlogo{
position:relative;
z-index:101;
width:124px;
margin:auto;
float:center;
top:-144px;
}

.navigation
{
  width: 1300px;
  overflow:auto;
  margin:25px auto 0px auto;
  padding:0px;
  float:center;



}


ul {
  list-style-type:none;
  margin:auto;
  padding:0;
text-align:center;

}


li {
  display:inline-block;
  float:center;
  text-align:center;
  font-size:34px;
font-family:walkway;
}

.nav {
  display:inline-block;
  width:250px;
  height:30px;
  color:black;
  text-decoration:none;
text-align:center;
  padding:2px;
  float:center;


}


::-webkit-scrollbar {
 width: 10px;
 height: 10px;

}

::-webkit-scrollbar-track {
 background-color: rgba(235,235,235,1);
 -webkit-border-radius: 0px;

}
 ::-webkit-scrollbar-thumb:vertical {
 background-color: rgba(231,52,39,1);
 -webkit-border-radius: 0px;
 }
 ::-webkit-scrollbar-thumb:vertical:hover,
 ::-webkit-scrollbar-thumb:horizontal:hover {
 background: rgba(231,52,39,1);

}
 ::-webkit-scrollbar-thumb:horizontal {
 background-color: rgba(231,52,39,1);
 -webkit-border-radius: 0px;
 }

首页样式表-

*{
margin:0px;
padding:0px;
}

body{
  overflow-y:hidden;
}

.maincont{
  margin:0 auto;
  float:center;
  width:1350px;
  padding-left:1px;
  height:auto;
  z-index:1;
  position:relative;
  top:-220px;
  color:white;
  font-family:verdana;
  font-size:11pt;
}

.mainfeat{
  width:450px;
  height:auto;
  text-align:center;
  float:left;
  margin:auto;

}



.maininfo{
  height:428px;
  width:378px;
  top:-56px;
  z-index:-1;
  position:relative;
  background:#303030;
  margin:0px 30px;
  padding:61px 5px 5px 5px;
}

h2{
  color:#e73427;
}

和页脚-

.footer{
  width:100%;
  height:auto;
  text-align:center;
  color:#b4b4b4;
  font-family:verdana;
  clear:both;
  padding:10px;
  bottom:-100px;
  vertical-align:bottom;
}

就像我说的，我是初学者，所以如果有更合乎逻辑的方法来构建我的横幅并摆脱空白，请告诉我。

非常感谢各位

最佳答案

正如您所说，罪魁祸首似乎是您对位置 CSS 的使用。如果我从您的 maincont div 中禁用 top: -220px;，则间隙将被消除。

至于解决方案...？我不太确定，真的。从我在您的页面源代码中看到的内容，有很多更简洁的方法可以使用不同的方法对您尝试执行的操作进行编码。

也许其他人可能会建议您修复它的方法，但从我的 Angular 来看，我会或多或少地重做所有事情，因为其他问题，例如我们在关于 overflow-y 的评论中讨论的问题。另外，页面的宽度和您的 overflow-x 基本上会阻止用户在较小的屏幕/浏览器宽度/分辨率上看到您网站右侧的大部分内容。

关于html - 由于位置限制而出现空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21292264/

25 4 0
文章推荐： html - 在 div 上以不同方式显示文本
文章推荐： java - 如何在单击另一个 Jbutton 时更改 Jbutton 的功能？
文章推荐： c++ - 二维 vector 的运行时错误
文章推荐： javascript - 我如何制作这种悬停效果(悬停 1 按钮以更改元素的 ID，然后在悬停时它会变回其原始 ID？)[jquery，css3]
太空宇宙
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com