Question

我现在正在阅读一个教程但由于某些原因我的代码（即使它看起来一样）它将无法正确显示。我希望有人可以解释为什么标题在顶部不显示黑色，图像不会自动调整大小。

<html>
<head>
   <title> Englightenment Web Site </title>
   <style type = "text/css">

    * {margin: 0; padding: 0;}
    body {
     font-family: arial;
     background-color: #ebebeb;
     }
     #header {
        background-color: black;
        height: 100px;
        width: 100px;
     }

    .container {
        width: 960px;
        height: auto;
        margin: 0 auto;

    }

    #logoArea {
        width: 300px;
        height: 100px;
        background-image: url(tree.jpg);
        float: left;
        }

    #navArea
    {
        height: 100px;
        float: right;
    }

    #nav
    {
        list-style: none;
        margin-top: 30px;
    }

    #nav a
    {
        color: white;
        text-decoration: none; /*removes underline*/

    }
    #nav li
    {
        float: left;
        margin-left:30px;
        background-color: #252525;
        padding: 8px;
        bording: 1px solid silver;
        border-radius: 5px;
    }

    #nav li:hover
    {
        background-color: gray;
    }

    .page
    {
        background-color: white;
        padding: 20px;
    }

   </style>

 </head>
 <body>

    <div id = "header">
      <div class = "container">
        <div id = "logoArea"></div>
        <div id = "navArea">
           <ul id = "nav">
              <a href = "#"><li> Home </li></a>
              <a href = "#"><li> Forum </li></a>
              <a href = "#"><li> Enlightener </li></a>
              <a href = "#"><li> Contact </li></a>

           </ul>
           </div>
       </div>
    </div>
    <div id = "mainArea">
        <div class = "container page">
            <h3> One Can't Understand without First Listening </h3>
        </div>
    </div>
 </body>

</html>

Answer 1

因此，我调整了原始图像的大小，以修复徽标的css格式大小。它现在有效。猜猜你最初需要精确的图片大小？看起来有点偏，但是我很好解决。

标题和图片不能正确显示

1 个答案: