Question

我正在尝试将标识与我的标题并排显示，我可以很好地定位徽标背景但是当我尝试更改标题颜色时它不允许我这样做。我试过把浮子改成左右中心，中心对我个人来说是最好的。知道为什么我可以改变标题颜色吗？我发布了以下代码。

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

Answer 1

以下是我必须做的才能获得正确的结果。 @freginold和@ edomingo1都帮助解决了这个问题。我必须将div和img移至body的{{1}}，然后我必须在head添加id="header"这让我做出了适当的改变。感谢所有的反馈，感谢它:)！

div

Answer 2

你想把它的颜色放在自己的大括号里，看看颜色的大括号。

Answer 3

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

Answer 4

您已将div和img添加到文档的head，而不是body。请参阅下面的示例。我将标题移到body，并将颜色更改为黄色，以表明它可以定位。（显然，图像不会在这里加载。）

＆＃13;

.header {
  color: yellow;
}

＆＃13;

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

＆＃13;

Answer 5

你不能用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>

标题中的标志

5 个答案: