Question

我是HTML和CSS的新手，所以我尝试使用w3school创建我的网站。我在动画中使用了div，但有一个问题是，当我想为页脚编写代码时，页脚在我的Div后面还是左边。

我的div代码有什么问题？我认为问题出在职位，但我更改了职位并提出了新问题。请帮助我

<?php
include'connect.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>صفحه اصلی  | زود پروژه</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function function_name() {
myFunction();
    })
function d() {
 var data = "";
        $("p").each(function(){
            data += $(this).text();
        });
        alert(data);
    }

function hide() {
  $('#contact').hide();
}
function myFunction() {
  // Get the snackbar DIV
  var x = document.getElementById("snackbar");

  // Add the "show" class to DIV
  x.className = "show";

  // After 3 seconds, remove the show class from DIV
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

</script>


    <style type="text/css">
@font-face {
font-family: "CustomFont";
src: url("iranian.ttf");

}

.parallax { 
  /* The image used */
  background-image: url("http://www.themesindustry.com/html/xeone/images/arrow-slide1.jpg");
position: relative;
  /* Set a specific height */
  height: 600px; 
text-align: center;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}
.flip-card {
  background-color: transparent;
  width: 300px;
  float: right;

margin: 2px 30px 50px 20px;
  height: 155px;
  border: 3px  #000;

}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;

  height: 100%;
  text-align: center;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);


}


/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front
 {

  background-color: #643094;
  color: #ffffff;
}

/* Style the back side */
.flip-card-back
 {
  background-color:  #00bcd4;
  font-size: 12px;
  color: white;
  transform: rotateY(180deg);
}


#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #840DF0; /* Black background color */
  color: #fff; /* White text color */

  text-align: center; /* Centered text */
  font-size: 22px;
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

.topnav {
  overflow: hidden;
  background-color: #1a789a;
  padding-right: 20px;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: right;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the "active" element to highlight the current page */
.topnav a.active {
  background-color: #ff8989;
  color: white;
}

/* Style the search box inside the navigation bar */
.topnav input[type=text] {
  float: right;
  padding: 6px;
  border: none;
  font-size: 17px;
}
#psen{

    font-size: 14px;
    font-weight: bolder;
}
#pbio{
    font-size: 15px;
font-weight: bold;
padding:1px;
}
.contact{
    font-size: 20px;
}
/* When the screen is less than 600px wide, stack the links and the search field vertically instead of horizontally */
@media screen and (max-width: 600px) {
  .topnav a, .topnav input[type=text] {
    float: none;
    display: block;
    text-align: right;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;

  }
}
.caption {
  position: absolute;
  left: 0;
  top: 40%;

  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.border {
  background-color: #423e3e;
  color: #19d3de;
  padding: 15px;
  font-size: 45px;
  letter-spacing: 7px;
}

.caption2 {
  position: absolute;
  left: 0;
  top: 55%;

  width: 100%;
  text-align: center;
  color: #000;
}

.caption2 span.border2 {
  background-color: #19d3de;
  color: #000;
  padding: 15px;
  border-radius: 30px;
  font-size: 20px;

}

footer {
    position:fixed;
    bottom:0;
}

    </style>
</head>
<body>

<div class="topnav" style="font-weight: bold;">
  <a class="active" href="#home">صفحه اصلی</a>
  <a href="#about">حساب من</a>
  <a href="#contact" id="contact">لیست پروژه ها</a>

</div>
 <div class="parallax">

<div class="bgimg-1">
  <div class="caption">
  <span class="border">زود پروژه</span>

  </div>

</div>
<div class="bgimg-1">
  <div class="caption2">
  <span class="border2">آنلاین پروژه بگیرید یا فریلنسر استخدام کنید</span>

  </div>

</div>
 </div>





 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>


 <div id="divv" onclick="d()" class="flip-card" >
  <div class="flip-card-inner">
    <div class="flip-card-front">
<p  style="font-size:20px;padding-top:20px">MyWork</p>
<p  style="font-size:15px;padding-top:10px">MyWork</p>
    </div>
    <div class="flip-card-back">
      <h1 id="pp" onclick="d()" style="font-size:13px;padding-top:5px;">MyWork</h1> 
      <p style="font-size:10px;" id="pbio">'myBio'</p> 
      <p id="psen">سن : 18'</p>
    </div>
  </div>
</div></a>






<!-- The actual snackbar -->
<div id="snackbar"><a href="https://t.me/zoodproject" style="text-decoration: none; color: #fff;" target="_blank">به زودپروژه خوش آمدید</a></div>




 <footer>sdsd
    </footer>
</body>

</html>

Answer 1

在HTML中，您使用的是<footer>元素，但是在CSS中，您是指的是页脚ID。

在CSS中将#footer更改为footer。

Answer 2

编辑

我只会关注您的问题，而忽略其他问题，但是语法在您的代码中非常糟糕。确保您再次仔细阅读了这些教程。

要获得所需的内容，必须将翻盖纸放入div容器中，如下所示：

<div id="container">
  <!-- All your flip-cards in here  -->
</div>

然后在CSS容器中使用clearfix hack，因为您的卡正在使用float：

#container::after {
  content: "";
  clear: both;
  display: table;
}

然后还要执行我在下面写的内容。

HTML中的footer标签没有您要在CSS中引用的ID。

在没有页脚选择器的情况下向页脚或引用添加页脚（＃）在CSS中。

在这种情况下，我在页脚标记中添加了id属性

<footer id="footer">sdsd</footer>

对于CSS，将页脚居中放在页面末尾。仅在用户到达页面末尾时显示：

在您的情况下，只要将文本居中，HTML常规流程就会将页脚一直保留在末尾，只要它是正文中最后显示的元素即可。
```
#footer {
   text-align: center;
}
```

另外，欢迎您使用Stack Overflow！

如何在HTML CSS中使用页脚

2 个答案:

编辑