header 中的标志

Question

我目前正在尝试让徽标与我的 header 并排显示，我可以很好地定位徽标背景，但是当我尝试更改 header 颜色时它没有允许我这样做。我试过将浮动更改为左右和居中，居中对我个人来说是最好的。知道为什么我可以更改 header 颜色吗？我在下面发布了代码。

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

你想在它自己的牙套上弄什么颜色，看看牙套周围的颜色。

Answer 2

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

Answer 3

您已将 div 和 img 包含在文档的 head 中，而不是 body。请参见下面的示例。我把你的 header 移到 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>

Answer 4

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

Answer 5

为了获得正确的结果，我必须执行以下操作。 @freginold 和@edomingo1 都帮助解决了这个问题。我必须将 div 和 img 从 head 移动到 body，然后还必须向我的 div 添加一个 id="header"这让我可以做出适当的改变。感谢您的所有反馈，非常感谢:)！

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

header 中的标志

Logo in the header

html

css

position

inline

header