时间戳

首页 > 解决方案 > 页眉位置不正确

javascript - 页眉位置不正确

问题描述

原谅我的愚蠢。我正在尝试合并两个不同的文件，但它们搞砸了，在考虑解决方案时我出汗了。非常感谢有人花时间查看我的案例 T^T Drive of header video如果你愿意的话。

哦，系统强迫我在帖子中添加更多细节，但我认为这种密集的代码，它必须非常详细......

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Ubuntu+Condensed&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Ubuntu', sans-serif;
}

header {
  z-index: 999;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 200px;
  transition: 0.5s ease;
}

header .brand {
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
}

header .navigation {
  position: relative;
}

header .navigation .navigation-items a {
  position: relative;
  color: #fff;
  font-size: 1em;
  font-weight: 500;
  text-decoration: none;
  margin-left: 30px;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:before {
  content: '';
  position: absolute;
  background: #fff;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 0;
  transition: 0.3s ease;
}

header .navigation .navigation-items a:hover:before {
  width: 100%;
}

section {
  padding: 100px 200px;
}

.home {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #2696E9;
}

.home:before {
  z-index: 777;
  content: '';
  position: absolute;
  background: rgba(3, 94, 251, 0.144);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.home .content {
  z-index: 888;
  color: #fff;
  width: 70%;
  margin-top: 50px;
  display: none;
}

.home .content.active {
  display: block;
}

.home .content h1 {
  font-size: 4em;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 5px;
  line-height: 75px;
  margin-bottom: 40px;
}

.home .content h1 span {
  font-size: 1.2em;
  font-weight: 600;
}

.home .content p {
  margin-bottom: 65px;
}


/* .home .content a{
  background: #fff;
  padding: 15px 35px;
  color: #1680AC;
  font-size: 1.1em;
  font-weight: 500;
  text-decoration: none;
  border-radius: 2px;
} */

.home .media-icons {
  z-index: 888;
  position: absolute;
  right: 30px;
  display: flex;
  flex-direction: column;
  transition: 0.5s ease;
}

.home .media-icons a {
  color: #fff;
  font-size: 1.6em;
  transition: 0.3s ease;
}

.home .media-icons a:not(:last-child) {
  margin-bottom: 20px;
}

.home .media-icons a:hover {
  transform: scale(1.3);
}

.home video {
  z-index: 000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-navigation {
  z-index: 888;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(80px);
  margin-bottom: 12px;
}

.slider-navigation .nav-btn {
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
  transition: 0.3s ease;
}

.slider-navigation .nav-btn.active {
  background: #2696E9;
}

.slider-navigation .nav-btn:not(:last-child) {
  margin-right: 20px;
}

.slider-navigation .nav-btn:hover {
  transform: scale(1.2);
}

.video-slide {
  position: absolute;
  width: 100%;
  clip-path: circle(0% at 0 50%);
}

.video-slide.active {
  clip-path: circle(150% at 0 50%);
  transition: 2s ease;
  transition-property: clip-path;
}

@media (max-width: 1040px) {
  header {
    padding: 12px 20px;
  }
  section {
    padding: 100px 20px;
  }
  .home .media-icons {
    right: 15px;
  }
  header .navigation {
    display: none;
  }
  header .navigation.active {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(1, 1, 1, 0.5);
  }
  header .navigation .navigation-items a {
    color: #222;
    font-size: 1.2em;
    margin: 20px;
  }
  header .navigation .navigation-items a:before {
    background: #222;
    height: 5px;
  }
  header .navigation.active .navigation-items {
    background: #fff;
    width: 600px;
    max-width: 600px;
    margin: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
  }
  .menu-btn {
    background: url(menu.png)no-repeat;
    background-size: 30px;
    background-position: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: 0.3s ease;
  }
  .menu-btn.active {
    z-index: 999;
    background: url(close.png)no-repeat;
    background-size: 25px;
    background-position: center;
    transition: 0.3s ease;
  }
}

@media (max-width: 560px) {
  .home .content h1 {
    font-size: 3em;
    line-height: 60px;
  }
}

body .bod {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #3c2864;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 40px;
}

.card {
  position: relative;
  width: 320px;
  height: 450px;
  margin: 30px;
  background: #287bff;
  border-radius: 20px;
  border-bottom-left-radius: 160px;
  border-bottom-right-radius: 160px;
  box-shadow: 0 15px 0 #fff, inset 0 -15px 0 rgba(255, 255, 255, 0.25), 0 45px 0 rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.card::before {
  content: '';
  position: absolute;
  top: -140px;
  left: -40%;
  width: 100%;
  height: 120%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2));
  transform: rotate(35deg);
  pointer-events: none;
  filter: blur(5px);
}

.card:nth-child(1) {
  background: linear-gradient(to bottom, #24ff72, #9a4eff);
}

.card:nth-child(2) {
  background: linear-gradient(to bottom, #24ff72, #9a4eff);
}

.card:nth-child(3) {
  background: linear-gradient(to bottom, #24ff72, #9a4eff);
}

.icon {
  position: relative;
  width: 140px;
  height: 120px;
  background: #3c2864;
  ;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.1), inset 0 -8px 0 #fff;
  z-index: 1000;
  display: flex;
  justify-content: center;
}

.icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  width: 50px;
  height: 50px;
  background: transparent;
  border-top-right-radius: 50px;
  box-shadow: 15px -15px 0 15px #3c2864;
}

.icon::after {
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  height: 50px;
  background: transparent;
  border-top-left-radius: 50px;
  box-shadow: -15px -15px 0 15px #3c2864;
}

.icon ion-icon {
  color: #fff;
  position: relative;
  font-size: 6em;
  z-index: 10000;
  --ionicon-stroke-width: 10px;
}

.cont {
  position: absolute;
  width: 100%;
  padding: 30px;
  padding-top: 140px;
  text-align: center;
}

.cont h2 {
  font-size: 1.75em;
  color: #fff;
  margin-bottom: 10px;
}

.cont p {
  color: #fff;
  line-height: 1.5em;
}

.cont a {
  color: #000000;
  ;
  line-height: 1.5em;
}

footer {
  background-color: #000000;
  background-position: center;
  color: #fff;
  line-height: 1.5em;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <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>KHXH&NV</title>
  <link rel="stylesheet" href="nthuuyen.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>

<body class="bod">
  <div class="container">
    <div class="card">
      <div class="icon">
        <ion-icon name="star-half-outline"></ion-icon>
      </div>
      <div class="cont">
        <h2>Phạm Thanh Loan</h2>
        <p>Điểm học tập: 9.1 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br>
          <!-- Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br> -->
          Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br>
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
    <div class="card">
      <div class="icon">
        <ion-icon name="star-half-outline"></ion-icon>
      </div>
      <div class="cont">
        <h2>Đỗ Thanh Tây</h2>
        <p>Điểm học tập: 9 <br> Điểm rèn luyện: 90 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
          <!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
    <div class="card">
      <div class="icon">
        <ion-icon name="star-half-outline"></ion-icon>
      </div>
      <div class="cont">
        <h2>Nguyễn Ngọc Phương Uyên</h2>
        <p>Điểm học tập: 8.6 <br> Điểm rèn luyện: 81 <br> Tham gia Chiến dịch Xuân Tình Nguyện, Mùa Hè Xanh. <br> Đạt chứng chỉ ngoại ngữ A. <br> Không vi phạm pháp luật và các quy chế, nội quy của trường, lớp và địa phương cư trú. <br>
          <!-- Là Hội viên Hội sinh viên Việt Nam <br> Đạt danh hiệu "Thanh niên khỏe" <br> Không quay cóp, gian lận trong thi cử, không nợ môn, học phần hoặc tín chỉ trong năm học.<br> -->
          <a href="#">Read more</a>
        </p>
      </div>
    </div>
  </div>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>

<body class="bod">
  <header>
    <a href="#" class="brand">ĐOÀN HỘI SINH VIÊN</a>
    <div class="menu-btn"></div>
    <div class="navigation">
      <div class="navigation-items">
        <a href="#">Trang chủ&lt;/a>
        <a href="#">Giới thiệu</a>
        <a href="#">Hướng dẫn</a>
        <a href="#">Thông báo</a>
        <a href="#">Liên hệ&lt;/a>
      </div>
    </div>
  </header>

  <section class="home">
    <video class="video-slide active" src="head.mp4" autoplay muted loop></video>
    <video class="video-slide" src="head.mp4" autoplay muted loop></video>
    <video class="video-slide" src="head.mp4" autoplay muted loop></video>
    <video class="video-slide" src="head.mp4" autoplay muted loop></video>
    <video class="video-slide" src="hea.mp4" autoplay muted loop></video>
    <div class="content active">
      <h1>ㅤㅤㅤㅤㅤ&lt;br><span>ㅤㅤㅤㅤ</span></h1>
      <p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p>
      <!-- <a href="#">Read More</a> -->
    </div>
    <div class="content">
      <h1>ㅤㅤㅤㅤㅤ&lt;br><span>ㅤㅤㅤㅤ</span></h1>
      <p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p>
      <!-- <a href="#">Read More</a> -->
    </div>
    <div class="content">
      <h1>ㅤㅤㅤㅤㅤ&lt;br><span>ㅤㅤㅤㅤ</span></h1>
      <p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p>
      <!-- <a href="#">Read More</a> -->
    </div>
    <div class="content">
      <h1>ㅤㅤㅤㅤㅤ&lt;br><span>ㅤㅤㅤㅤ</span></h1>
      <p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p>
      <!-- <a href="#">Read More</a> -->
    </div>
    <div class="content">
      <h1>ㅤㅤㅤㅤㅤ&lt;br><span>ㅤㅤㅤㅤ</span></h1>
      <p>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ&lt;/p>
      <!-- <a href="#">Read More</a> -->
    </div>
    <div class="media-icons">
      <a href="#"><i class="fab fa-facebook-f"></i></a>
      <a href="#"><i class="fab fa-instagram"></i></a>
      <a href="#"><i class="fab fa-twitter"></i></a>
    </div>
    <div class="slider-navigation">
      <div class="nav-btn active"></div>
      <div class="nav-btn"></div>
      <div class="nav-btn"></div>
      <div class="nav-btn"></div>
      <div class="nav-btn"></div>
    </div>
  </section>

  <script type="text/javascript">
    //Javacript for responsive navigation menu
    const menuBtn = document.querySelector(".menu-btn");
    const navigation = document.querySelector(".navigation");

    menuBtn.addEventListener("click", () => {
      menuBtn.classList.toggle("active");
      navigation.classList.toggle("active");
    });

    //Javacript for video slider navigation
    const btns = document.querySelectorAll(".nav-btn");
    const slides = document.querySelectorAll(".video-slide");
    const contents = document.querySelectorAll(".content");

    var sliderNav = function(manual) {
      btns.forEach((btn) => {
        btn.classList.remove("active");
      });

      slides.forEach((slide) => {
        slide.classList.remove("active");
      });

      contents.forEach((content) => {
        content.classList.remove("active");
      });

      btns[manual].classList.add("active");
      slides[manual].classList.add("active");
      contents[manual].classList.add("active");
    }

    btns.forEach((btn, i) => {
      btn.addEventListener("click", () => {
        sliderNav(i);
      });
    });
  </script>

</body>
<footer>
  <p>
    Group 3 <br> Phone: 0374040XXX <br> Class:xyz
  </p>
</footer>

</html>

标签： javascripthtmlcss

解决方案

推荐阅读