代码之家  ›  专栏  ›  技术社区  ›  MajorSin

不需要的空间导航栏和第一节

  •  0
  • MajorSin  · 技术社区  · 6 年前

    enter image description here

    margin 我的第一节到-4,但这是一个正确的方式吗?

    我还设置了 margin-bottom 将导航栏的 vertical-align 但这对我不起作用。

    我的html代码:

    * {
      padding: 0;
      margin: 0;
    }
    
    html,
    body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    
    
    /*NAVBAR*/
    
    .example3 .navbar-brand {
      height: 59px;
      margin-top: -4px;
    }
    
    .example3 .nav>li>a {
      padding-top: 19.5px;
      padding-bottom: 19.5px;
      font-size: 17px;
    }
    
    .example3 .navbar-toggle {
      padding: 18px;
      margin: 15px 15px 15px 0px;
    }
    
    #nav {
      background-color: rgba(19, 19, 19, 0.91);
      margin: 0 !important;
    }
    
    #navbutton {
      background-color: rgba(19, 19, 19, 0.91);
      color: rgba(240, 231, 232, 1.00);
    }
    
    
    /*LOGO TOEVOEGEN RESPONSIVE*/
    
    
    /*WELKOM & LOGIN*/
    
    #welkomlogin {
      text-align: center;
      color: white;
      background-image: url(public_html/images/HQ.png);
      background: linear-gradient(rgba(49, 49, 49, 0.50), rgba(49, 49, 49, 0.50)), url('public_html/images/HQ.png');
      background-size: 100%;
      background-position: center;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-color: black;
      height: 700px;
    }
    
    #welkom {
      text-align: center;
    }
    
    #login {
      text-align: center;
    }
    
    
    /*BUTTON*/
    
    .buttonwelkom {
      margin: 10px 40px;
      display: inline-block;
      width: 200px;
      padding: 8px;
      color: #fff;
      border: 2px solid #fff;
      text-align: center;
      outline: none;
      text-decoration: none;
      transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
    }
    
    .buttonwelkom:hover,
    .buttonwelkom:active {
      text-decoration: none;
      color: #fff;
      background-color: #fff;
      /* fallback */
      background-color: rgba(255, 255, 255, 0.4);
      border-color: #fff;
      /* fallback */
      border-color: rgba(255, 255, 255, 0.4);
      transition: background-color 0.3s ease-in, border-color 0.3s ease-in;
    }
    <div class="example3">
      <nav class="navbar navbar-inverse navbar-static-top" id="nav">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3">
    							<span class="sr-only">Toggle navigation</span>
    							<span class="icon-bar"></span>
    							<span class="icon-bar"></span>
    							<span class="icon-bar"></span>
    						</button>
            <a class="navbar-brand" href="index.html">
              <img src="public_html/images/afdeling.gif" alt="RC-logo" height="40px">
            </a>
          </div>
          <div id="navbar3" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li class="active"><a href="index.html">Home</a></li>
              <li><a href="#">Over ons</a></li>
              <li><a href="#">Meest gestelde vragen</a></li>
              <li><a href="#">Contact</a></li>
              <li>
                <button id="navbutton" class="btn btn-default navbar-btn" type="button">
    									Inloggen
    								</button>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <!--WELKOM-->
    <section id="welkomlogin">
      <div id="welkom">
        <h1>Head titel</h1>
        <p>beschrijving....</p>
      </div>
      <!--INLOGGEN-->
      <div id="login">
        <a class="buttonwelkom" href="#">Inloggen</a>
        <a class="buttonwelkom" href="#">Over ons</a>
      </div>
    </section>
    2 回复  |  直到 6 年前
        1
  •  0
  •   Johannes    6 年前

    最有可能的是,这是崩溃的顶部边缘的你 h1

    #welkom h1 {
      margin-top: 0;
    }
    
        2
  •  0
  •   arieljuod    6 年前

    我猜 <h1>Head titel</h1> 最高利润率导致了这一点。尝试用css删除它。

    #welkom h1 {
      margin-top: 0px;
    }