时间戳

首页 > 解决方案 > 为什么我的部分标签与我的 div 容器重叠？我正在尝试退出主页下的部分

javascript - 为什么我的部分标签与我的 div 容器重叠？我正在尝试退出主页下的部分

问题描述

我正在尝试创建一个新部分，但标签与我的主页重叠。我尝试添加 div、删除 div 并添加更多部分，但无法找到解决方案。是因为我的样式还是因为我的 HTML？

/* Base Styles -------------------- */

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Body */

body {
  font-family: 'Playfair Display', serif;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
  color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 3rem;
}

h1,
h2 {
  font-weight: 200;
  margin: 0.4rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2rem;
  color: #fff;
}


/* Navigation Styles */

.row {
  float: right;
  list-style: none;
  margin-top: 40px;
  margin-right: 80px;
}

.row li {
  display: inline-block;
  margin-left: 40px;
  text-transform: uppercase;
  font-size: 19px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s;
  padding: 8px 0px;
}

.row li:hover,
.row li:active {
  border-bottom: 2px solid #48a8ce;
}


/* Media queries for home page */

@media(min-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
}

@media(max-width: 800px) {
  .container {
    padding: 0 1rem;
  }
  h1 {
    font-size: 3rem;
  }
}

@media(max-width: 500px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}


/* Cursor for Typewriter */

.txt-type>.txt {
  border-right: 0.2rem solid #777;
}


/* Aspirations Section */


/* .section-head {
      padding-left: 500px;
      padding-top: 0px;
    } */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Carlos Gonzales</title>
</head>

<body>
  <header>
    <nav>
      <div class="row">
        <ul>
          <li>
            <a href="#home"></a>Home</li>
          <li>
            <a href="#aspirations"></a>Aspirations</li>
          <li>
            <a href="#about"></a>About</li>
          <li>
            <a href="#contact"></a>Contact</li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <h1>Carlos Gonzales The
      <span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
    </h1>
    <h2>Welcome to my website !</h2>
  </div>


  <section id="aspirations" class="aspiration-section">

    <h2 class="section-head">Aspirations</h2>
    <p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
      startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
      their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
    </p>
    <a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>

  </section>



  <script src="main.js"></script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Carlos Gonzales</title>
</head>

<body>
  <header>
    <nav>
      <div class="row">
        <ul>
          <li>
            <a href="#home"></a>Home</li>
          <li>
            <a href="#aspirations"></a>Aspirations</li>
          <li>
            <a href="#about"></a>About</li>
          <li>
            <a href="#contact"></a>Contact</li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <h1>Carlos Gonzales The
      <span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
    </h1>
    <h2>Welcome to my website !</h2>
  </div>


  <section id="aspirations" class="aspiration-section">

    <h2 class="section-head">Aspirations</h2>
    <p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
      startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
      their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
    </p>
    <a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>

  </section>



  <script src="main.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

我删除了重复html和body标签。然后我在同一个body. 我还注意到您<a>在导航中的标签之前关闭了标签，也通过</a>在链接标签之后移动来解决这个问题。

我想这就是你想要的？像这样的东西？

/* Base Styles -------------------- */

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Body */

body {
  font-family: 'Playfair Display', serif;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("img/body-image1.jpg") no-repeat center center / cover;
  color: #fff;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 3rem;
}

h1,
h2 {
  font-weight: 200;
  margin: 0.4rem;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2rem;
  color: #fff;
}


/* Navigation Styles */

.row {
  float: right;
  list-style: none;
  margin-top: 40px;
  margin-right: 80px;
}

.row li {
  display: inline-block;
  margin-left: 40px;
  text-transform: uppercase;
  font-size: 19px;
  border-bottom: 2px solid transparent;
  transition: border-bottom 0.2s;
  padding: 8px 0px;
}

.row li:hover,
.row li:active {
  border-bottom: 2px solid #48a8ce;
}


/* Media queries for home page */

@media(min-width: 1200px) {
  h1 {
    font-size: 5rem;
  }
}

@media(max-width: 800px) {
  .container {
    padding: 0 1rem;
  }
  h1 {
    font-size: 3rem;
  }
}

@media(max-width: 500px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}


/* Cursor for Typewriter */

.txt-type>.txt {
  border-right: 0.2rem solid #777;
}


/* Aspirations Section */


/* .section-head {
      padding-left: 500px;
      padding-top: 0px;
    } */
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Carlos Gonzales</title>
</head>

<body>
  <header>
    <nav>
      <div class="row">
        <ul>
          <li>
            <a href="#home">Home</a></li>
          <li>
            <a href="#aspirations">Aspirations</a></li>
          <li>
            <a href="#about">About</a></li>
          <li>
            <a href="#contact">Contact</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <div class="container">
    <h1>Carlos Gonzales The
      <span class="txt-type" data-wait="3000" data-words='["Developer", "Creator", "Entrepreneur"]'></span>
    </h1>
    <h2>Welcome to my website !</h2>
  </div>


  <section id="aspirations" class="aspiration-section">

    <h2 class="section-head">Aspirations</h2>
    <p>My aspiration after becoming a paid developer run far. After getting paid for my code I would like to learn on for about 5 more years and than start working for myself. I will expand my brand by using resources like Youtube and Twitter. Funding my
      startup and owning a successful one for me is a lifetime goal. I would love to teach grade school kids how to code because I believe learning this skill at an early age is really benefiting. I would also like to develop an app people can use on
      their phone to make their nyc public parking experience convenient and free of expense of private parking lot fees.
    </p>
    <a href="Contact" class="btn-aspirations">Help Develop ParkingBud Now</a>

  </section>
  
  
  <section id="about" class="about-section">

    <h2 class="section-head">About</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
    </p>

  </section>
  
  <section id="contact" class="contact-section">

    <h2 class="section-head">Contact</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia feugiat pharetra. Cras gravida lobortis pellentesque. Etiam pellentesque maximus tincidunt. Mauris urna nulla, vestibulum vitae euismod sit amet, consectetur ut ante. Ut molestie, nunc non vehicula ullamcorper, sapien lorem vestibulum est, in pulvinar nibh est et dolor. Morbi at posuere eros. Maecenas ornare risus id felis aliquam, quis lacinia mauris faucibus. Nunc ut sagittis neque. Vivamus imperdiet tristique lorem. Suspendisse tellus massa, iaculis in ultricies in, gravida non ex. Phasellus nec dolor magna.
    </p>

  </section>



  <script src="main.js"></script>
</body>

</html>

推荐阅读