爲什麼CSS不工作？

我有一個奇怪的問題，我的CSS文件清除不起作用。我還使用了clearfix代碼，但仍位於標題部分的頁腳。（我已閱讀所有這類的計算器問題，但沒有得到解決。）爲什麼CSS不工作？

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
/*top navigation*/ 
 

 
/*logo image div*/ 
 

 
#wrapper { 
 
    float: left; 
 
    width: 100%; 
 
    height: 78px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    position: fixed; 
 
} 
 
.logo { 
 
    float: left; 
 
    width: 15%; 
 
} 
 
.logo img { 
 
    width: 100%; 
 
    height: 78px; 
 
} 
 
/*================================================================*/ 
 

 
/*menu div*/ 
 

 
.navigation { 
 
    text-align: center; 
 
    width: 85%; 
 
} 
 
nav li { 
 
    list-style-type: none; 
 
    float: left; 
 
} 
 
.navigation > li { 
 
    position: relative; 
 
} 
 
.navigation li ul { 
 
    position: absolute; 
 
} 
 
.navigation li ul li { 
 
    width: 100%; 
 
} 
 
div.navigation a { 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    background-color: transparent; 
 
    color: blue; 
 
    display: block; 
 
} 
 
div.navigation a:HOVER { 
 
    background: rgba(255, 0, 0, .6); 
 
    color: white; 
 
} 
 
nav > ul > li:FIRST-CHILD { 
 
    margin-left: 300px; 
 
} 
 
/*sub navigation menu*/ 
 

 
nav li ul { 
 
    display: none; 
 
} 
 
nav li:HOVER ul { 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 
/*================================================================*/ 
 

 
/*div footer*/ 
 

 
div.footer { 
 
    clear: both; 
 
    border: thin solid red; 
 
} 
 
.clearfix:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
}

<div id="wrapper"> 
 
    <div class="logo"> 
 
    <img alt="logo image" src="../images/logo.png"> 
 
    </div> 
 

 
    <div class="navigation"> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="#">ABOUT</a> 
 
      <ul> 
 
      <li><a href="#">Item 1a</a> 
 
      </li> 
 
      <li><a href="#">Item 1b</a> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">MENU</a> 
 
     </li> 
 
     <li><a href="#">ORDER</a> 
 
     </li> 
 
     <li><a href="#">NEWS</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div> 
 

 
<div class="clearfix">class clear fix</div> 
 
<div class="footer">this is footer section</div> 
 
<p>this is para. footer section</p>

來源

2016-08-23 Ratin

從字面上有你「PHP代碼」沒有PHP。刪除標籤。 –

我只發佈了HTML部分 – Ratin

我的問題是頁腳部分不在頁眉部分下方，它只是位於頁眉上。 – Ratin

試試這個

#wrapper { 
/* float: left; comment this line */ 
    width: 100%; 
    height: 78px; 
    background: rgba(0, 0, 0, 0.5); 
/* position: fixed; comment this line */ 
}

@CHARSET "ISO-8859-1"; 
 

 
* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
/*top navigation*/ 
 
/*logo image div*/ 
 
#wrapper { 
 
/* float: left; */ 
 
    width: 100%; 
 
    height: 78px; 
 
    background: rgba(0, 0, 0, 0.5); 
 
/* position: fixed; */ 
 
} 
 

 
.logo { 
 
    float: left; 
 
    width: 15%; 
 

 
} 
 

 
.logo img { 
 
    width: 100%; 
 
    height: 78px; 
 

 
} 
 

 
/*================================================================*/ 
 

 
/*menu div*/ 
 

 
.navigation { 
 

 
    text-align: center; 
 
    width: 85%; 
 
} 
 

 
nav li { 
 
    list-style-type: none; 
 
    float: left; 
 

 
} 
 

 
.navigation > li { 
 
    position: relative; 
 

 
} 
 

 
.navigation li ul { 
 
    position: absolute; 
 

 
} 
 

 
.navigation li ul li { 
 
    width: 100%; 
 
} 
 

 
div.navigation a { 
 
    text-decoration: none; 
 
    padding: 30px; 
 
    background-color: transparent; 
 
    color: blue; 
 
    display: block; 
 

 
} 
 

 
div.navigation a:HOVER { 
 
    background: rgba(255, 0, 0, .6); 
 
    color: white; 
 
} 
 

 

 

 
nav > ul > li:FIRST-CHILD { 
 
    margin-left: 300px; 
 

 
} 
 

 
/*sub navigation menu*/ 
 
nav li ul { 
 
    display: none; 
 
} 
 

 
nav li:HOVER ul { 
 
    display: block; 
 
    background: rgba(0, 0, 0, 0.5); 
 

 
} 
 

 
/*================================================================*/ 
 

 
/*div footer*/ 
 
div.footer { 
 
    clear: both; 
 
    border: thin solid red; 
 
} 
 

 
.clearfix:after { 
 
    content: "."; 
 
    visibility: hidden; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="logo"> 
 
     <img alt="logo image" src="../images/logo.png" > 
 
    </div> 
 

 
    <div class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li><a href="#">ABOUT</a> 
 
        <ul> 
 
         <li><a href="#">Item 1a</a></li> 
 
         <li><a href="#">Item 1b</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">MENU</a></li> 
 
       <li><a href="#">ORDER</a></li> 
 
       <li><a href="#">NEWS</a></li> 
 
       <li><a href="#">CONTACT</a></li>     
 
      </ul> 
 
     </nav> 
 
    </div> 
 
</div> 
 

 
<div class="clearfix">class clear fix</div> 
 
<div class="footer">this is footer section</div> 
 
<p>this is para. footer section</p>

來源

2016-08-23 08:45:31

使用此CS S代表您的頁腳類：

.footer{ 
position: absolute; 
bottom: 0; 
left: 0; 
right: 0; 
height:100px; 
background:#ccc;

}

希望這將有助於，乾杯！

來源

2016-08-23 08:51:11

只需打開包裝取出選擇和position: fixedfloat: left：

#wrapper { 
    /*float: left;*/ 
    width: 100%; 
    height: 78px; 
    background: rgba(0, 0, 0, 0.5); 
    /*position: fixed;*/ 
}

來源

2016-08-23 09:01:38

爲什麼CSS不工作？

回答

相關問題