2016-03-04 92 views
0

我的CSS樣式表頭不起作用。它最適用於內部樣式表或嵌入式樣式表,但在外部樣式表中的代碼時不起作用。只有頭文件類沒有啓動,但其他代碼運行得最好。外部CSS文件無法正常工作

 .header1{ 
      background-color: brown ; 
      padding: 20px; 
      background-image: url("pics/saqib.png"); 
     } 
     #pic{ 
      float: right; 
     } 
     ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
       overflow: hidden; 
      } 

     li { 
       float:left; 
       background-color: #333; 
       border-top-left-radius: 35%; 
       border-top-right-radius: 35%; 
       margin-left:2px; 
      } 

     li a { 
       display: block; 
       color: white; 
       text-align: center; 
       padding: 14px 16px; 
       text-decoration: none; 
      } 
      /* Change the link color to #111 (black) on hover */ 
     li a:hover { 
       background-color: green; 
     } 
     .navbar{ 
      padding: 20px; 
      margin-top: 150px; 
     } 
     /* End nav bar */ 
     .skin{ 
      background-color: lightblue; 
     } 
     .table { 
      margin-top: 0px; 
      width: 100%; 
     } 
     .table .sidebar{ 
      border-right: 2px solid black; 
      width: 20%; 
     } 
     .footer{ 
      background-color: blue; 
      padding: 20px; 
      padding: 100px; 
     } 
     .left{ 
      float: left; 
      display: block; 
      width: 40%; 
      color: gray; 
      border-right: 2px solid white; 
      border-color: gray; 
      padding-right: 70px; 
     } 
     .right{ 
      float: right; 
      display: block; 
      width: 40%; 
      color: gray; 
     } 
     pre a{ 
      font-family: helvatic, sanshrif; 
      font-size: 15px; 
      color: white; 
     } 
     pre a:hover{ 
      color: green; 

     } 
<!DOCTYPE html> 
<html> 
    <head> 
      <title>My Page</title> 
      <link rel="stylesheet" type="text/css" href="mypage.css"/> 
      <meta charset="UTF-8"/> 
    </head> 
    <body> 
      <header class="header"> 
       <div id="pic"> <img src="pics/saqib.png"/></div> 
        <div class="navbar"> 
         <ul> 
          <li><a href="#">Home</a></li> 
          <li><a href="#">Software</a></li> 
          <li><a href="#">Contact Us</a></li> 
          <li><a href="#">About us</a></li> 
         </ul> 
        </div> 
      </header> 
      <div class="skin"> 
       <table class="table"> 
         <tr> 
          <td class="sidebar"> 
            This is sidebar 
          </td> 
          <td style="padding: 50px;"> 
           <h1>My First Website</h1> 
           <p> A collection of all steps to complete a process in known as Transaction. DBMS should support transaction. It must ensure that all steps in a transaction are executed successfully or none of them is executed. It facility ensures that the database is always in consistent state even if a transaction fails due to some problem such as system crash or power failure etc.</p> 
          </td> 
         </tr> 
         <tr> 
          <th colspan="2"> 
           <footer class="footer"> 
            <div class="left"> 
             <pre><a href="#">Home</a> | <a href="#">Software</a> | <a href="#">Contact Us</a> | <a href="#">About us</a></pre> 
            </div> 
            <div class="right"> 
             The most important function of DBMS 
             is data processing. It includes creation, 
             storage and arrangements of data in database. 
            </div> 
           </footer> 
          </th> 
         </tr> 
       </table> 
      </div> 
    <body> 
</html> 

回答

6

樣式表定義.header1類,但你的HTML正在尋找header。使這些相同。

0

它應該是:

.header{ 
      background-color: brown ; 
      padding: 20px; 
      background-image: url("pics/saqib.png"); 
     } 
0

你可以在任何一個地方修改,使其工作:

在HTML:

<header class="header"> 

到:

<header class="header1"> 

或者在CSS中:

.header1 { 
    background-color: brown; 
    padding: 20px; 
    background-image: url("pics/saqib.png"); 
} 

到:

.header { 
    background-color: brown; 
    padding: 20px; 
    background-image: url("pics/saqib.png"); 
}