css 页脚未出现 _大数据知识库

我试图创建一个网站的页脚，但页脚只是不会出现无论我做什么，我已经检查了一切，我知道这可能会导致问题的发生，但它仍然是一样的。我只是想页脚出现，只是一个简单的页脚在页面的末尾，对不起，如果代码没有正确嵌入，我还不熟悉这个平台

.main {
  width: 100%;
  height: 100vh;
}

.background img {
  width: 100%;
  height: auto;
  position: fixed;
  object-fit: contain;
  z-index: -1;
}

/*----------------------------------------------------------Header Content-------------------------------------------------*/

.header_neon {
  position: absolute;
  left: 5%;
  width: 90%;
  height: 2%;
  background-color: rgb(216, 36, 223);
  z-index: 1;
  border-radius: 25%;
}

.header_cont {
  position: fixed;
  width: 100%;
  height: 15%;
  background: linear-gradient(to bottom, rgb(104, 15, 107)0%, rgba(0, 0, 0, 0)75%);
  z-index: 1;
  display: flex;
}

.header_icon img {
  width: 70px;
  height: auto;
  margin: 25px 50px 0 50px;
}

.header_title {
  color: #fcee0a;
  font-family: 'Cyberpunk';
  font-size: 40px;
  display: flex;
  align-items: center;
}

.menu_container {
  margin-left: 30%;
  margin-top: 40px;
  width: 40%;
  height: 40%;
}

.menu_list {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #fcee0a;
  height: 100%;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
}

.menu_item {
  width: 25%;
  color: white;
  font-family: 'Blender';
  display: flex;
  align-items: center;
  text-align: center;
  font-size: 22px;
  position: relative;
  padding-left: 65px;
}

.menu_sub_list {
  margin-left: -65px;
  padding: 0;
  top: 100%;
  align-items: center;
  width: 100%;
  height: auto;
  text-align: center;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #fcee0a;
  display: none;
  position: absolute;
}

.menu_sub_list a {
  display: flex;
  text-align: center;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  display: block;
  color: #fff;
  font-size: 20px;
}

.menu_item:hover .menu_sub_list {
  display: block;
}

.menu_item:hover {
  background-color: #fcee0a;
  color: black;
}

.menu_sub_list a:hover {
  background-color: #fcee0a;
  color: black;
}

@font-face {
  font-family: 'Cyberpunk';
  src: url("font/Cyberpunk.otf") format('opentype'), url("font/Cyberpunk.ttf") format('truetype');
}

@font-face {
  font-family: 'Blender';
  src: url("../font/Blender-Pro-Book.otf") format('opentype');
}

/*----------------------------------------------------------------Bdoy Content-------------------------------------------------------*/

.body_cont {
  width: 100%;
  height: 100vh;
}

.media_container video {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 10px solid #fcee0a;
}

.body_txt_container {
  display: flex;
  flex-direction: column;
  border: 1px solid #fcee0a;
  background: rgba(0, 0, 0, 0.6);
  width: 80%;
  margin: 100px 10% 0 10%;
  height: auto;
  align-items: center;
}

.body_cont h2 {
  margin-top: 10%;
  margin-bottom: 5%;
  color: #fcee0a;
  text-align: center;
  font-family: 'Blender';
  font-size: 50px;
  text-transform: uppercase;
}

.body_cont h4 {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
  font-family: 'Blender';
  font-size: 30px;
  color: #fff;
  text-align: justify;
}

.body_txt_container img {
  margin-top: 100px;
  margin-bottom: 100px;
  width: 300px;
  height: auto;
}

.deco_sides1::before {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 20px;
  height: 100%;
  content: " ";
  background: #fcee0a;
  display: block;
}

.deco_sides2::before {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 20px;
  height: 100%;
  content: " ";
  background: #fcee0a;
  display: block;
}

.more {
  width: 600px;
  height: auto;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-family: 'Blender';
  margin-bottom: 100px;
  font-size: 20px;
  padding: 20px;
  border-radius: 50px;
}

.enroll_container {
  position: relative;
  width: 80%;
  margin: 0 10% 0 10%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.enroll_container img {
  margin: 100px 0 0 0px;
  width: 400px;
  height: auto;
}

.enrollment_form {
  position: relative;
  content: "";
  width: 600px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px 0 30px 0;
  overflow: hidden;
}

.deco_form {
  position: absolute;
  width: 500px;
  height: 1000px;
  transform: rotateZ(45deg);
  background-color: #fcee0a;
  border-right: 5px solid black;
  content: "";
  z-index: -1;
}

.etiqueta {
  background-color: #fcee0a;
  font-family: 'Blender';
  font-weight: bold;
  font-size: 20px;
}

.campo_txt {
  margin: 20px;
  width: 250px;
  background: #fff98b;
}

.register {
  margin: 20px;
  font-family: 'Cyberpunk';
  width: 30%;
  height: 15%;
  background: black;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.5s ease;
}

.terms a {
  font-family: 'Blender';
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.register:hover {
  transform: scale(1.1);
}

/*-------------------------------------------------------------------------Footer--------------------------------------------------------*/

.foot_cont {
  width: 100%;
  height: 30%;
}

.foot_txt_container {
  display: flex;
  flex-direction: column;
  border: 1px solid #fcee0a;
  background: rgba(0, 0, 0, 0.6);
  width: 80%;
  margin: 100px 10% 0 10%;
  height: auto;
  align-items: center;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.content {
  padding: 20px;
}

.footer {
  background-color: #333;
  color: #fff;
  padding: 20px 0;
}

.footer-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-content p {
  margin: 0;
}

.footer-content ul {
  list-style: none;
  padding: 0;
}

.footer-content ul li {
  display: inline;
  margin-right: 20px;
}

.footer-content ul li:last-child {
  margin-right: 0;
}

.footer-content a {
  text-decoration: none;
  color: #fff;
}

<body style="margin:0">
  <div class="main">
    <div class="background">
      <img src="images/background.jpg">
    </div>
    <div class="header_cont">
      <div class="header_neon"></div>
      <a href="index_final.html">
        <div class="header_icon"><img src="images/samurai.png"></div>
      </a>
      <div class="header_title">Humanisick</div>
      <div class="menu_container">
        <ul class="menu_list">
          <li class="menu_item">
            Juegos
            <ul class="menu_sub_list">
              <a href="#">Catalogo</a>
              <a href="#">Carrito</a>
            </ul>
          </li>
          <li class="menu_item">
            Personajes
            <ul class="menu_sub_list">
              <a href="#">El asesino</a>
              <a href="#">La encantadora</a>
              <a href="#">El luchador</a>
            </ul>
          </li>
          <li class="menu_item">
            Chatbot
          </li>
          <li class="menu_item">
            Idioma
            <ul class="menu_sub_list">
              <a href="#">Inglés</a>
              <a href="#">Español</a>
            </ul>
          </li>
        </ul>
      </div>
    </div>

    <div class="body_cont">
      <div class="media_container">
        <video autoplay loop muted>
                    <source src="video/ghostrunner.mp4">
                </video>
        <audio autoplay loop>
                    <source src="audio/Air.mp3">
                </audio>
      </div>

      <div class="body_txt_container">
        <h2>La era de la inhumanidad ha llegado</h2>
        <h4>Ahora que has sentido el llamado hacia la inhumanidad, te rendirás al mundo digital. Deja todas tus preocupaciones afuera y únete a nosotros. Este es el momento exacto para entregarte al mundo digital y olvidar lo que alguna vez fuiste. Lo único
          que importa de ahora en adelante es quién vas a ser en este mundo. </p> ¿Cómo resolverás tus problemas de ahora en adelante? </p> La vida no será más fácil por ya no ser humano, y eres tú quien decidirá cuál es la mejor manera de vivir tu nueva
          vida de aquí en adelante.</h4>
        <img src="images/samurai.png">
      </div>

      <div class="enroll_container">
        <div class="deco_sides1"></div>
        <img src="images/girl.png">
        <div class="mas_info">
          <div class="more">
            Humanisick es una compañia ficticia que se dedica a la venta de videojuegos bajo la promesa de hacer que sus usuarios se pierdan en el mundo digital olvidando todos sus problemas de la vida real, dandoles un momento de relajacion en donde pueden vivir
            emocionantes historias de ficcion y fantasia.<br> Si quieres conocer más al respecto, dejanos tu informacion y con gusto daremos contigo.
          </div>
          <div class="enrollment_form">
            <form action="procesar_registro.php" method="post">
              <label class="etiqueta" for="nombre">Nombre:</label>
              <input class="campo_txt" type="text" id="nombre" name="nombre" required><br>

              <label class="etiqueta" for="correo">Correo Electrónico:</label>
              <input class="campo_txt" type="email" id="correo" name="correo" required><br>

              <label class="etiqueta" for="contrasena">Contraseña:</label>
              <input class="campo_txt" type="password" id="contrasena" name="contrasena" required><br>

              <button class="register" type="submit">Registrarse</button>
            </form>
            <div class="terms">
              <a href="#">Terminos y condiciones</a>
            </div>
            <div class="deco_form"></div>

          </div>
        </div>

        <div class="deco_sides2"></div>
      </div>
    </div>
    <footer class="footer">
      <div class="footer-content">
        <p>&copy; 2023 Mi Sitio Web</p>
        <ul>
          <li><a href="#">Inicio</a></li>
          <li><a href="#">Acerca de</a></li>
          <li><a href="#">Contacto</a></li>
        </ul>
      </div>
    </footer>
  </div>

</body>

</html>

我试着检查HTML中的标签，CSS中的类，但似乎没有什么工作

css 页脚未出现

1条答案

相关问题

热门标签

最新问答