如何在css中設置頁眉和頁腳？

圖片：

索引頁代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
     <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
      <title>Home</title> 
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
      <link href="custom.css" rel="stylesheet" type="text/css"> 
     </head> 

     <body class="bodyy"> 

      <div class="container-fluid form"> 
       <div class="row"> 
       <div class="col-md-12 llg"> 
       <img src="image/my-site-planner-logo.png" class="logo" /> 
       </div> 
      </div> 
      </div> <!--container ends--> 

      <div class="container"> 
       <div class="row"> 
       <div class="col-md-3"> 
       </div> 
        <div class="col-md-6"> 
         <form method="post" action="" class="formt"> 
          <div class="form-group"> 
           <input class="form-control" required="required" placeholder="Enter Email" id="name" name="name" type="email"/> 
          <br /> 
        <input class="form-control" id="email" required="required" placeholder="Enter Password" name="password" type="password"/> 
         <br /> 
           <button class="btn btn-primary bbt" name="submit-" type="submit"> 
           Sign Me In 
          </button> 
         <p class="text-center ttr"> 
         Want to Register a New User ? 
         </p> 
        <button class="btn btn-primary bbt" name="submit-" type="submit"> 
           <a href="sign-up.html" class="tbb"> 
         Create Account 
         </a> 
          </button> 
        </div> 
         </form> 
        </div> 
       <div class="col-md-3"> 
       </div> 
      </div> <!--row ends--> 
      </div> <!--container ends--> 

      <div class="footer form"> 
       <h4> 
        &copy; 2016 My Site Planner | All Rights Reserve 
       </h4> 
       </div> 
      </div> 
      </div> <!--container ends--> 


      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

      <script src="js/bootstrap.min.js"></script> 
      <body oncontextmenu="return false"> 
     </body> 
     </html>

CSS代碼：

body{ 
    margin: 0 auto; 
    background-image: url("white-background-1.jpg"); 
    background-size: 100px 100px, 
    background-repeat: no-repeat; 
} 
.ul{ 

list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 


} 
.container{ 
    width: 400px; 
    height: 400px; 
    text-align: center; 
    background-color: rgba(0, 255, 255, 0.5); 
    border-radius: 4px; 
    margin: 0 auto; 
    margin-top: 150px; 

} 



.footer .form { 
     margin-top: 100px; 
} 



table { 
    font-family: arial, sans-serif; 
    border-collapse: collapse; 
    width: 100%; 
} 

td, th { 
    border: 1px solid #dddddd; 
    text-align: left; 
    padding: 8px; 
} 

tr:nth-child(even) { 
    background-color: #dddddd; 
}

我試圖通過.footer .FORM作爲絕對位置和頭改變代碼被滾動。請有人可以幫我嗎？

來源

2016-11-15 Warda

[如何使這個頁眉/內容/頁腳佈局使用CSS？]（http://stackoverflow.com/questions/7123138/how-to-make-this-header-content-footer-layout- using-css）and http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height –

I認爲你使用bootstrap的方式是錯誤的，特別是給bootstrap的容器類賦予寬度。它會在後期階段搞亂你的設計。 – Aslam

是的，@ hunzaboy。這是下載項目，我的老闆給了我們一個項目來完成它。我該怎麼做。我的思想翻了翻。 :( – Warda

.footer .form { 
     margin-top: 100px; 
     position:fixed; 
     bottom:0px; 
}

替換這個代碼來解決您的頁腳

來源

2016-11-15 11:39:42

它沒有幫助我 – Warda

@沃達我已經做了一些修改，請檢查它 –

，我可以看到你使用的引導，你可以使用它的模板之一。

看看這個：

http://getbootstrap.com/examples/sticky-footer-navbar/

你的代碼還有一點，它不是suposed是因爲它的一個基本自舉一個很好的做法直接修改容器類。

希望這有助於

問候

來源

2016-11-15 11:42:30

是的，我對我的財產所做的任何更改，沒有更改佈局。 – Warda

我不是專家，但你可以嘗試使用：

Position: fixed;

或者

Position: bottom;

希望這有助於！

來源

2016-11-15 11:47:49 Yoshirou

如何在css中設置頁眉和頁腳？

回答

相關問題