个人中心
gpt4 book ai didi

html - 与我的其他元素组合时，我似乎无法让我的页脚位于页面底部

转载 作者：行者123 更新时间：2023-11-28 00:52:46 25 4
gpt4 key购买 nike

我试图让我的页脚留在页面底部，并且一直在浏览一些 youtube 教程。出于某种奇怪的原因，当我单独尝试页脚时它们确实有效，但是当与我的其他元素结合时，我似乎遇到了一些问题，不仅让页脚位于页面底部，而且我也无法获得我的显示:内联 block 运行良好....

我一直在努力学习这个教程:https://www.youtube.com/watch?v=qlCIXXhSX6Y&t=191s 和 https://www.youtube.com/watch?v=FGBsGqn7ac8&lc=z22eihehdzrajv13qacdp4334oiod53pnruzdum2ru1w03c010c.1541183153454115

我有一个单独的 footer.php 并包含在我的 index.php 文件中……我应该在 index.php 页面还是 footer.php 中包含我的 div id？

这是我的页脚代码:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">


    </head>
    <body>

    <section class="content">

    <footer>

      <div class="main-footer">
       <div class="container">
          <div class="row">
             <div class="col-md-12">
                <div class="footer-bg">
                   <div class="footer-address">
                       <h1>Learn Classical Music at <span>PianoCourse101</span></h1>
                       <h2>Location: Australia, Melbourne</h2>
                   </div>
                   <div class="footer-email-phone">
                      <ul>
                         <li><a href="tel:+1234567890"><i class="fa fa-phone"></i>+123-456-7890</a></li>
                         <li><a href="mailto:info@PianoCourse101.com"><i class="fa fa-envelope"></i>info@pianocourse101.com</a></li>
                      </ul>
                   </div>

                      <div class="footer-social-icons">
                         <ul>
                             <li><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></li>
                             <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                             <li><a href="#" target="_blank"><i class="fab fa-google-plus"></i></a></li>
                             <li><a href="#" target="_blank"><i class="fab fa-youtube"></i></a></li>
                             <li><a href="#" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                         </ul>
                      </div>
                </div>
             </div>

            <div class="col-md-12">
               <div class="footer-menu">
                  <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">More Information</a></li>
                     <li><a href="#">Contact Us</a></li>
                  </ul>
               </div>
             </div>
          </div>
       </div>

          <div class="footer-strip">
              <div class="container">
                 <div class="row">
                    <div class="col-md-12">
                       <div class="footer-text">
                           <p>2018 @ All Rights</p>
                       </div>
                    </div>
                 </div>
              </div>
          </div>


    </footer>

    </section>
    </body>
    </html>

This is my index.php page

 <!DOCTYPE html>
   <html>
   <head>
     <title>PianoCourse101</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="style.css">
      <link href="https://fonts.googleapis.com/css?family=Aldrich|Mr+Dafoe" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity=">sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
     <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Monoton|Orbitron" rel="stylesheet">

   </head>
   <body>



   <!DOCTYPE html><html><head><meta charset="utf-8">
  <link
  rel="stylesheet"
  href = "style.css"
  media="screen,projection,tv"
>

<link 
rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

<link
rel="stylesheet"
href = "https://fonts.googleapis.com/css?family=Pacifico"
>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to PianoCourse101</title>

<div id="container">
    <div id="main">
  <header>
<div class="header2_welcome">
<h1>Welcome to PianoCourse101</h1>
</div>
</header>


<section class="content">



     <div class="crotchet">
<p>&#x1D15F</p>
</div>
<div class="minim">
<p>&#x1D15E</p>
</div>
<div class="quaver">
<p>&#x1D160</p>
</div>

     <img class="pc101" src="includes/pictures/pc101.gif" alt="pianocourse101/">
    <div class="music"><i class="fas fa-music fa-8x"></i></div>

    <div class="sharp"><p>&#9839</p></div>
    <div class="natural"><p>&#9838</p></div>
    <div class="flat"><p>&#9837</p></div>



<article>

      <div class="first">
       <h2>At PianoCourse101, your child can now learn how to play Classical music right from the comfort of your own home! We understand that as a busy mum, you might not have the time to take your child for piano lessons and also, it is a daunting process to find a good quality teacher. Put all of those thoughts aside because PianoCourse101 offers a complete course from the beginning to the advanced levels. It is based on "The Bastien Piano Basics Series" for children and for a limited time, students can watch the Primer Level lessons for <span class="first_free">free!</span> If you would like to continue your lessons beyond Primer Level, you can opt to purchase our Level 1, Level 2, or Level 3 course.<br></br>Currently, the lessons are aimed primarily for children but there will be lessons for adults in the near future. We would appreciate if you could donate to our website if you are enjoying your learning experience with us. This will assist us in maintaining our website and to be able to upload more videos.<br></br> Mr Lee has over ten years of piano teaching experience and also has completed an educational degree and obtained a 4th year in psychology degree. We understand that learning the piano can be boring and hence, we are trying our best to make piano learning a fun and interactive experience for you and your child.<br></br>PianoCourse101 is located in Australia, Melbourne and all fees are in the AUD currency. Student will receive an invoice upon the completion of purchasing a course.</h2>
     </div>
</article>

    <div class="form">
    <form class="signup-form" action="newsletters.php" method="POST">
      <div class="newsletters">
       <label>Enter your E-mail Address</label>
     </div>
       <br></br>
       <div class="index_form"><center><input type="text" name='email' placeholder="Enter E-mail Address"></center>
       <br></br>
       <center><button type="submit" name="submit">Subscribe to PianoCourse101!</button></center>
       <br></br>
    </div>
    </form>
    </div>


    <img class="snoopy" src="includes/pictures/snoopy.jpg" alt="snoopy playing the piano" />



   <div class="services_heading">Services</div>
      <div class="services">
         <div class="service1">
           <h1>Level 1</h1>
           <a href="signup.php"><p id="piano">&#127929</p></a>
           <p>Purchase the Level 1 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $100<br>Yearly fee: $800</p>
          </div>

            <div class="service1">
             <h1>Level 2</h1>
            <a href="signup.php"><p id="violin">&#127931</p></a>
            <p>Purchase the Level 2 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $150<br>Yearly fee: $1300</p>

          </div>
          <div class="service1">
            <h1>Level 3</h1>
            <a href="signup.php"><p id="sax">&#127927</p></a>
            <p>Purchase the Level 3 Subscriptionplan!<br>Learn how to play the piano right from the comfort of your own home!<br>Monthly fee: $200<br>Yearly fee: $1800</p>
         </div>
      </div>


<span class="index_views">There are <span class="views"><?php echo "&nbsp",htmlspecialchars($views); ?></span><?php echo "&nbsp"; ?>visitors who have visited this page!</span>

 </section>

<footer id="footer">

<?php include_once 'footer.php'; ?>

</footer>
</div>
</div>         
</body>
</html>

这是我的页脚 CSS:

.main-footer {

   width: 100%;

   height: auto;
   background-image: url(includes/pictures/piano.jpg);
   -webkit-background-size: cover;
   -ms-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   background-attachment: scroll;
   background-position: center;
   padding: 20px 0px;
}

.footer-bg {

  width: 100%;
  height: auto;
  margin: auto;
  padding: 30px;
  background-color: #fff;
  text-align: center;
  border: 4px solid #ff6a00;
}

.footer-address {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top:5px;
}

.footer-address h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 1.5;
}

.footer-address h1 span {
  color: #ff6a00;
}

.footer-address h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1.5;
}

.footer-email-phone {
   width: 100%;
   height: auto;
   margin: auto;
   margin-top: 5px;
}

.footer-email-phone ul {
  margin: 0px;
  padding: 0px;
  text-align: center;

}

.footer-email-phone ul li {
  display: inline-block;
}

.footer-email-phone ul li a {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 13px;
  padding-left: 20px;
}

.footer-email-phone ul li a i {
  color: #ff6a00;
  padding-right: 5px;
}

.footer-email-phone ul li a:hover {
  color: #ff6a00;
}

.footer-email-phone ul li a:hover i {
  color: #333;
}

.footer-social-icons {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 5px;

}

.footer-social-icons ul {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.footer-social-icons ul li {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: #fff;
  margin-right: 10px;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
  -moz-box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
  box-shadow: 0px 0px 5px 0px rgba(255,106,0,1);
  text-align: center;
  margin-top: 12px;
}

.footer-social-icons ul li a {
  font-size: 15px;
  color: #ff6a00;
  line-height: 30px;
  display: block;
}

.footer-social-icons ul li:nth-child(1):hover {
  background: #3b5999;
}

.footer-social-icons ul li:nth-child(2):hover {
  background: #55acee;
}

.footer-social-icons ul li:nth-child(3):hover {
  background: #dd4b39;
}

.footer-social-icons ul li:nth-child(4):hover {
  background: #cd201f;
}

.footer-social-icons ul li:nth-child(5):hover {
  background: #0077b5;
}

.footer-social-icons ul li:nth-child(1):hover a{
  color: #fff;
}

.footer-social-icons ul li:nth-child(2):hover a{
  color: #fff;
}

.footer-social-icons ul li:nth-child(3):hover a{
  color: #fff;
}

.footer-social-icons ul li:nth-child(4):hover a{
  color: #fff;
}

.footer-social-icons ul li:nth-child(5):hover a{
 color: #fff;
}

.footer-menu {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 10px;
}

.footer-menu ul {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

.footer-menu ul li {
  display: inline-block;
}


.footer-menu ul li a {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: left;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;

}

.footer-menu ul li:after {
  content: "|";
  font-family: 'FontAwesome';
  color: #fff;
  margin-left: 8px;
  margin-right: 8px;
}

.footer-menu ul li:nth-child(3):after {
  content: "";
}

.footer-menu ul li a:hover {
  color: #ff6a00;
}

.footer-strip {
  width: 100%;
  height: auto;
  margin: auto;
  border-top: 2px solid #fff;
  margin-top: 5px;
}

.footer-text {
  width: 100%;
  height: auto;
  margin: auto;
  margin-top: 5px;
}

.footer-text p {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
}

.footer-text p a {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
}

.footer-text p a:hover {
  color: #ff6a00;
}




 [enter image description here][1]

最佳答案

页脚所需的所有 html 包括:

<div class="main-footer">
   <div class="container">
      <div class="row">
         <div class="col-md-12">
            <div class="footer-bg">
               <div class="footer-address">
                   <h1>Learn Classical Music at <span>PianoCourse101</span></h1>
                   <h2>Location: Australia, Melbourne</h2>
               </div>
               <div class="footer-email-phone">
                  <ul>
                     <li><a href="tel:+1234567890"><i class="fa fa-phone"></i>+123-456-7890</a></li>
                     <li><a href="mailto:info@PianoCourse101.com"><i class="fa fa-envelope"></i>info@pianocourse101.com</a></li>
                  </ul>
               </div>

                  <div class="footer-social-icons">
                     <ul>
                         <li><a href="#" target="_blank"><i class="fab fa-facebook"></i></a></li>
                         <li><a href="#" target="_blank"><i class="fab fa-twitter"></i></a></li>
                         <li><a href="#" target="_blank"><i class="fab fa-google-plus"></i></a></li>
                         <li><a href="#" target="_blank"><i class="fab fa-youtube"></i></a></li>
                         <li><a href="#" target="_blank"><i class="fab fa-linkedin"></i></a></li>
                     </ul>
                  </div>
            </div>
         </div>

        <div class="col-md-12">
           <div class="footer-menu">
              <ul>
                 <li><a href="#">Home</a></li>
                 <li><a href="#">More Information</a></li>
                 <li><a href="#">Contact Us</a></li>
              </ul>
           </div>
         </div>
      </div>
   </div>

      <div class="footer-strip">
          <div class="container">
             <div class="row">
                <div class="col-md-12">
                   <div class="footer-text">
                       <p>2018 @ All Rights</p>
                   </div>
                </div>
             </div>
          </div>
      </div>

关于html - 与我的其他元素组合时，我似乎无法让我的页脚位于页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53129786/

25 4 0
文章推荐： javascript - 在现有
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com