标题中的徽标

标题中的徽标

问题描述：

我目前正试图让徽标与我的标题并排显示，但我可以将徽标背景定位为正确，但是当我尝试更改标题颜色时，它不允许我使用。我已经尝试改变浮球左右中间，中心对我个人来说是最好的。任何想法，为什么我可以更改标题颜色？我发布了下面的代码。标题中的徽标

<!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>

答

这里是我的必须做得到正确的结果。 @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>

答

什么是你想要在它自己的花括号上的颜色，看着色彩的花括号。

答

您在HTML标记中使用类选择器，但在CSS中使用了ID选择器。尝试用div id =“header”替换div class =“header”以查看预期结果。

您的解决方案是分辨率感谢你！我也必须将div移动到身体。 – Tacoma

答

您已将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>

我想通了，我不得不像你建议的那样将div和img移动到body上，不过我只需要添加一个id =“header”，就像@ edomingo1建议的那样。 – Tacoma

答

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>

相关推荐