1. 首頁
  2. 問答
  3. 標題中的徽標

標題中的徽標

2017-04-26 75 views
1

我目前正試圖讓徽標與我的標題並排顯示，但我可以將徽標背景定位爲正確，但是當我嘗試更改標題顏色時，它不允許我使用。我已經嘗試改變浮球左右中間，中心對我個人來說是最好的。任何想法，爲什麼我可以更改標題顏色？我發佈了下面的代碼。標題中的徽標

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Title</title> 
    <div class="header"> 
    <img src="logo.png" alt="logo"/> 
</div> 
    <style type="text/css"> 

     body { 
      min-width: 630px; 
     } 

     #container { 
      padding-left: 200px; 
      padding-right: 190px; 
     } 

     #container .column { 
      position: relative; 
      float: left; 
     } 

     #center { 
      padding: 10px 20px; 
      width: 100%; 
     } 

     #left { 
      width: 180px; 
      padding: 0 10px; 
      right: 240px; 
      margin-left: -100%; 
     } 

     #right { 
      width: 130px; 
      padding: 0 10px; 
      margin-right: -100%; 
     } 

     #footer { 
      clear: both; 
     } 

     * html #left { 
      left: 150px; 
     } 

     #container { 
      overflow: hidden; 
     } 

     #container .column { 
      padding-bottom: 1001em; 
      margin-bottom: -1000em; 
     } 


     * html body { 
      overflow: hidden; 
     } 

     * html #footer-wrapper { 
      float: left; 
      position: relative; 
      width: 100%; 
      padding-bottom: 10010px; 
      margin-bottom: -10000px; 
      background: #fff; 
     } 


     body { 
      margin: 0; 
      padding: 0; 
      font-family:Sans-serif; 
      line-height: 2.24em; 
     } 

     p { 
      color: #000000 
     } 

     nav ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 

     nav ul a { 
      color: white; 
      text-decoration: none; 
     } 

     #header { 
      font-size: large; 
      padding: 0.3em; 
      background: #000000; 
     } 

     #footer { 
      font-size: large; 
      padding: 0.3em; 
      background: #e4e2e2; 
     } 

     #left { 
      background: #d3d2d2; 
     } 

     #right { 
      background: #d3d2d2; 
     } 

     #center { 
      background: #e4e2e2; 
     } 

     #container .column { 
      padding-top: 1em; 
     } 
    .header img { 
    width: 250px; 
    height: 80px; 
    float: center; 
    background: #ffffff; 
} 

    .header h1 { 
    position: relative; 
    top: 18px; 
    left: 10px; 
} 

    </style>

來源

2017-04-26 Tacoma

回答

1

這裏是我的必須做得到正確的結果。 @freginold和@ edomingo1都幫助解決了這個問題。我必須將div和img從head移到body，然後必須添加id="header"以及我的div，這允許我做出適當的更改。感謝所有的反饋欣賞它:)！

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Title</title> 
     <style type="text/css"> 

      body { 
       min-width: 630px; 
      } 

      #container { 
       padding-left: 200px; 
       padding-right: 190px; 
      } 

      #container .column { 
       position: relative; 
       float: left; 
      } 

      #center { 
       padding: 10px 20px; 
       width: 100%; 
      } 

      #left { 
       width: 180px; 
       padding: 0 10px; 
       right: 240px; 
       margin-left: -100%; 
      } 

      #right { 
       width: 130px; 
       padding: 0 10px; 
       margin-right: -100%; 
      } 

      #footer { 
       clear: both; 
      } 

      * html #left { 
       left: 150px; 
      } 

      #container { 
       overflow: hidden; 
      } 

      #container .column { 
       padding-bottom: 1001em; 
       margin-bottom: -1000em; 
      } 


      * html body { 
       overflow: hidden; 
      } 

      * html #footer-wrapper { 
       float: left; 
       position: relative; 
       width: 100%; 
       padding-bottom: 10010px; 
       margin-bottom: -10000px; 
       background: #fff; 
      } 


      body { 
       margin: 0; 
       padding: 0; 
       font-family:Sans-serif; 
       line-height: 2.24em; 
      } 

      p { 
       color: #000000 
      } 

      nav ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
      } 

      nav ul a { 
       color: white; 
       text-decoration: none; 
      } 

      #header { 
       font-size: large; 
       padding: 0em; 
       margin: 0em; 
       background: #000000; 
      } 

      #footer { 
       font-size: large; 
       padding: 0.3em; 
       background: #e4e2e2; 
      } 

      #left { 
       background: #d3d2d2; 
      } 

      #right { 
       background: #d3d2d2; 
      } 

      #center { 
       background: #e4e2e2; 
      } 

      #container .column { 
       padding-top: 1em; 
      } 
     .header img { 
     width: 250px; 
     height: 80px; 
     float: top; 
     background: #000000; 
    } 

     .header h1 { 
     position: relative; 
     top: 18px; 
     left: 10px; 
    } 


     </style> 
    </head> 
    <body> 

    <div class="header" id="header"> 
     <img src="logo.png" alt="logo"/> 
    </div>

來源

2017-04-26 16:26:18 Tacoma

0

什麼是你想要在它自己的花括號上的顏色，看着色彩的花括號。

來源

2017-04-26 15:53:32

0

您在HTML標記中使用類選擇器，但在CSS中使用了ID選擇器。嘗試用div id =「header」替換div class =「header」以查看預期結果。

來源

2017-04-26 15:55:14 edomingo1

+0

您的解決方案是分辨率感謝你！我也必須將div移動到身體。 – Tacoma

0

您已將div和img包含在文檔的head中，而不是body。看下面的例子。我將標題移動到body，並將顏色更改爲黃色以表明它可以作爲目標。 （顯然，圖像不會加載在這裏。）

.header { 
 
    color: yellow; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Title</title> 
 
    <style type="text/css"> 
 

 
     body { 
 
      min-width: 630px; 
 
     } 
 

 
     #container { 
 
      padding-left: 200px; 
 
      padding-right: 190px; 
 
     } 
 

 
     #container .column { 
 
      position: relative; 
 
      float: left; 
 
     } 
 

 
     #center { 
 
      padding: 10px 20px; 
 
      width: 100%; 
 
     } 
 

 
     #left { 
 
      width: 180px; 
 
      padding: 0 10px; 
 
      right: 240px; 
 
      margin-left: -100%; 
 
     } 
 

 
     #right { 
 
      width: 130px; 
 
      padding: 0 10px; 
 
      margin-right: -100%; 
 
     } 
 

 
     #footer { 
 
      clear: both; 
 
     } 
 

 
     * html #left { 
 
      left: 150px; 
 
     } 
 

 
     #container { 
 
      overflow: hidden; 
 
     } 
 

 
     #container .column { 
 
      padding-bottom: 1001em; 
 
      margin-bottom: -1000em; 
 
     } 
 

 

 
     * html body { 
 
      overflow: hidden; 
 
     } 
 

 
     * html #footer-wrapper { 
 
      float: left; 
 
      position: relative; 
 
      width: 100%; 
 
      padding-bottom: 10010px; 
 
      margin-bottom: -10000px; 
 
      background: #fff; 
 
     } 
 

 

 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      font-family:Sans-serif; 
 
      line-height: 2.24em; 
 
     } 
 

 
     p { 
 
      color: #000000 
 
     } 
 

 
     nav ul { 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 

 
     nav ul a { 
 
      color: white; 
 
      text-decoration: none; 
 
     } 
 

 
     #header { 
 
      font-size: large; 
 
      padding: 0.3em; 
 
      background: #000000; 
 
     } 
 

 
     #footer { 
 
      font-size: large; 
 
      padding: 0.3em; 
 
      background: #e4e2e2; 
 
     } 
 

 
     #left { 
 
      background: #d3d2d2; 
 
     } 
 

 
     #right { 
 
      background: #d3d2d2; 
 
     } 
 

 
     #center { 
 
      background: #e4e2e2; 
 
     } 
 

 
     #container .column { 
 
      padding-top: 1em; 
 
     } 
 
    .header img { 
 
    width: 250px; 
 
    height: 80px; 
 
    float: center; 
 
    background: #ffffff; 
 
} 
 

 
    .header h1 { 
 
    position: relative; 
 
    top: 18px; 
 
    left: 10px; 
 
} 
 

 
    </style> 
 
</head> 
 
    
 
<body> 
 

 
<div class="header"> 
 
    <img src="logo.png" alt="logo"/> 
 
</div> 
 

 
</body> 
 
</html>

來源

2017-04-26 15:56:25 freginold

+1

我想通了，我不得不像你建議的那樣將div和img移動到body上，不過我只需要添加一個id =「header」，就像@ edomingo1建議的那樣。 – Tacoma

0

U可以不使用中心float。如果你想並排排序，你使用float。但是你必須用align或text-align來放置中心。添加以下代碼：

.header{ 
text-align: center; 
}

如果你想添加其他標誌或文字，你想他們沒有看到這一點，你可以使用DIV，並使用此代碼：

.logo{ 
width: 250px; 
height: 80px; 
text-align: center; 
background: #ffffff; 
} 
</style> 
</head> 
<body> 
<div class="logo"> 
    <img src="logo.png"/> 
</div>

來源

2017-04-26 16:18:33 mymiracl

相關問題

 相關問題