css 导航和主体之间的网页顶部的白色条带[重复]

q5iwbnjs  于 2023-07-01  发布在  其他
关注(0)|答案(2)|浏览(153)

此问题已在此处有答案：

Image inside div has extra space below the image（10个答案）
4天前关闭。
导航和主体之间有一条白色，我似乎找不到问题所在。似乎有什么东西把网格稍微向下推，显示出白色的条纹，我也在这个网站上使用JavaScript，它应该不会影响任何东西。

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-3.6.0.js"></script>
    <script src="Javascript/Index.js"></script> 
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Squash Academy</title>
    <link rel="stylesheet" href="Css/Stylesheet.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
    <nav class="nav">
        <div id="name">PNBHS Squash Academy</div>
        <ul id="buttons-nav">
            <li class ='navbutton' id="homebutton"><a href="Index.html">Home</a></li>
            <li class ='navbutton' id="coachbutton"><a href="Coaching.html">Coaching</a></li>
            <li class ='navbutton' id="registerbutton"><a href="Register.html">Register</a></li>
            <li id="contactbutton"><a>Contact</a><img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
            </div> 
        </ul>
        <div id="mySidebar" class="sidebar">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
            <a href="Index.html">Home</a>
            <a href="Coaching.html">Coaching</a>
            <a href="Register.html">Register</a>

      </div>
      <div id="mainish">
          <button class="openbtn" onclick="openNav()">☰</button>  
          </div>
    </nav>
    <main id="main">
        <body>
            <div class="grid-container-index">
                <div class="grid-item-index">
                    <h1 id="titleText">PNBHS</h1>
                    <h3 id="subtitleText">Squash Academy</h3>
                    <div id="contactButtonMain">Contact<img id='contactimg'src="Img/Asset1.png" alt="triangle"></div>
                </div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"><img src="Img/Index image.png" id="indeximg"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"></div>
                <div class="grid-item-index"><h3>Why Squash?</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius lacus a nisi porta eleifend. Etiam augue purus, faucibus sed mauris nec, pulvinar interdum mauris. Praesent sit amet arcu lobortis, cursus augue nec, finibus felis. Integer sit amet justo pharetra, scelerisque magna volutpat, blandit nibh. Vestibulum egestas tincidunt eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed in porta tortor.</p></div>
                <div class="grid-item-index"><h3>About Squash at PNBHS</h3><p>Etiam dictum augue ut lorem varius interdum. Nullam ullamcorper magna sed nunc condimentum fringilla. In cursus tempus dictum. Donec in arcu ut magna feugiat convallis congue sed tortor. Proin lacinia eros ac mi varius dictum. Donec scelerisque consequat turpis, vel ornare quam luctus sit amet. Maecenas pretium vehicula arcu nec auctor. Phasellus et venenatis urna, ac bibendum tellus. Phasellus vitae sem nec eros porta vestibulum. Donec at vulputate lorem, ut convallis velit. Morbi vel euismod sapien. Proin viverra dui in arcu aliquam congue. Maecenas at quam tempor, feugiat diam nec, porta est. Proin congue, nisl sed commodo tincidunt, ipsum diam imperdiet nulla, ut euismod ex elit quis felis.</p></div>
            </div>
        </body>
    </main>
</body>
  
<!--<canvas id="myCanvas" width="900" height="500" style="border:1px solid transparent"></canvas>
-->


</body>
</html>
body{
    margin: 0;
}
/* Nav*/
.nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
}

#name{
    position: absolute;
    color: white;
    font-family: 'Raleway';
    font-size: 2.4vw;
    top: 0.8vw;
    left: 3vw;
    width: 35vw;
    margin: 0;
    padding: 0;
}

nav ul{
    list-style-type: none;
    margin: 0;
    margin-right: 0vw;
    margin-bottom: 0;
    padding: 0;
    float: right;
    width: 45vw;
}

nav li{
    display: inline-block;
    padding: 1.5vw;
    margin: 0;
    width: 5vw;
    text-align: center;
    color: white;
    height: 1.4vw;
    font-family: 'Raleway';
    position:initial;
}
nav ul li:hover {
  color: #000;
}

nav ul li:last-child {
  margin-right: 20px;
}

nav ul li.active {
  color: #000;
}

nav li a{
    color:white;
    padding: 10px 12px;
    text-decoration: none;
  margin: 0;
}
.navbutton{
    border: #0c4eab solid;
    background-color: #0c4eab;
}
#contactbutton{
    background-color: #062857;
    border-radius: 50px;
    width: 6vw;
}

#contactimg{
    width: 10px;
    height: 10px;

}
/*End NAv*/
/*Side Bar*/
#mySidebar {
    height: 30vw;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    border-radius: 0, 20px,0,0;
  }
  .sidebar a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
  }
  .sidebar .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  .openbtn {
    font-size: 20px;
    cursor: pointer;
    background-color: #111;
    color: white;
    padding: 10px 15px;
    border: none;
    position:fixed; top:1vw; right:1vw;
    
  }
  
  .openbtn:hover {
    background-color: #444;
  }
  #mainish {
    display: none;    
}
/*ENd Sidebar*/

/*Main*/
.main{
    background-color: #030821;
    height: 800px;
}
.grid-container-index{
    display: grid;
    grid-template-columns: 31vw 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto auto; /* Three rows with automatic height */
    gap: 0px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
    font-family: 'Raleway';
}

.grid-item-index {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}

#titleText {
  float: right;
  position: relative;
  top: 200px;
}
#subtitleText {
  float: right;
  position: relative;
  top: 260px;
  left: 150px;
}
#indeximg {
  width: 600px;
  float: right;
}
#contactButtonMain {
  background-color: #0f0982;
  border-radius: 50px;
  width: 6vw;
  text-align: center;
  position: relative;
  top: 340px;
  left: 350px;
}
@media only screen and (max-width: 1535px) {
    nav ul{
        display: none;
    }
    #mainish {
        display: inline-block;
        
    }
}

.grid-container-register{
    display: grid;
    grid-template-columns: 31vw 31vw; /* Two columns with equal width */
    grid-template-rows: auto auto; /* Three rows with automatic height */
    gap: 10px; /* Gap between grid items */
    background-color: #030821;
    height: 1000px;
    position: relative;
}

.grid-item-register {
    background-color: #030821; /* Background color for grid items */
    padding: 20px; /* Padding for grid items */
    color: white;
}
/* Register*/
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
  background-color: #030821;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.message {
  color: rgba(88, 87, 87, 0.822);
  font-size: 14px;
}

.flex {
  display: flex;
  width: 100%;
  gap: 6px;
}

.form label {
  position: relative;
  background-color: #030821;
}
.form input {
    color: #fff;
}
.form textarea {
    color: #fff;
}
.form label .input {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821 ;
}

.form label .input + span {
  position: absolute;
  left: 10px;
  top: 15px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input:placeholder-shown + span {
  top: 15px;
  font-size: 0.9em;
}

.form label .input:focus + span,.form label .input:valid + span {
  top: 30px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input:valid + span {
  color: green;
}

.input01 {
  width: 100%;
  padding: 10px 10px 20px 10px;
  outline: 0;
  border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 5px;
  background-color: #030821;

}

.form label .input01 + span {
  position: absolute;
  left: 10px;
  top: 50px;
  color: #fff;
  font-size: 0.9em;
  cursor: text;
  transition: 0.3s ease;
}

.form label .input01:placeholder-shown + span {
  top: 40px;
  font-size: 0.9em;
}

.form label .input01:focus + span,.form label .input01:valid + span {
  top: 50px;
  font-size: 0.7em;
  font-weight: 600;
}

.form label .input01:valid + span {
  color: green;
}

.fancy {
  background-color: transparent;
  border: 2px solid #cacaca;
  border-radius: 0px;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 390;
  letter-spacing: 2px;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 8px 30px;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
  content: " ";
  width: 1.7rem;
  height: 2px;
  background: #cacaca;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform: translateX(230%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: lowercase;
  text-decoration: none;
  color: #818181;
  transform: translateX(30%);
}

.fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: white;
  transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
  color: white;
  background: #030821;
}

.fancy:hover::before {
  width: 1.5rem;
  background: white;
}

.fancy:hover .text {
  color: white;
  padding-left: 1.5em;
}

.fancy:hover .top-key {
  left: -2px;
  width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
}

我试过改变导航列表项的位置，并添加边距0，但这两个似乎都不起作用。

css

2条答案

按热度按时间
9avjhtql

9avjhtql1#

这是将nav更改为display: inline-block的效果（但我无法确切地找出原因）。

* {
    margin: 0;
    padding: 0;
}

nav {
    display: inline-block;
    width: 100%;
    height: 5vw;
    background-color: #0c4eab;
}

main {
    height: 20vh;
    background-color: dodgerblue;
}
<nav></nav><main id="main"></main>

但是，对于nav元素，应该使用Flexbox，而不是绝对定位。我不会为你做所有的工作，但这将让你开始。

body {
    margin: 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #0c4eab;
    padding: 1em;
}

#name {
    color: white;
    font-size: 2.4vw;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
}

nav li a {
    color:white;
    padding: 10px 12px;
    text-decoration: none;
}

#contactbutton {
    background-color: #062857;
    border-radius: 50px;
}

main {
    height: 90vh;
    background-color: #030821;
}
<nav class="nav">
  <div id="name">PNBHS Squash Academy</div>
  <ul id="buttons-nav">
    <li class ='navbutton' id="homebutton"><a href="Index.html">Home</a></li>
    <li class ='navbutton' id="coachbutton"><a href="Coaching.html">Coaching</a></li>
    <li class ='navbutton' id="registerbutton"><a href="Register.html">Register</a></li>
    <li id="contactbutton"><a>Contact</a><img id='contactimg'src="Img/Asset1.png" alt="triangle"></li>
  </ul>
</nav>

<main id="main"></main>
赞(0）分享  回复(0）举报  2023-07-01
b4lqfgs4

b4lqfgs42#

您的解决方案很简单，在.nav类中。删除display属性。

.nav{
    width: 100%;
    height: 4.8vw;
    background-color: #0c4eab;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}
赞(0）分享  回复(0）举报  2023-07-01
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com