Question

我必须在学校使用HTML和CSS做一个项目，到目前为止，所有我想要做的是页面布局，无论出于什么原因，当我将页脚放到我的网页时，它会弹出页面顶部而不是最底层，我在尝试调整大小以修复整个页面时遇到了一些麻烦。

    #wrapper {
      width: 1024px;
      height: 768px;
      background-color: #E1E0E0;
    }
    #banner {
      width: 1024px;
      height: 220px;
      background-color: #6E6A6A;
    }
    #menuTop {
      width: 1024px;
      height: 35px;
      background-color: #ACAAAA;
    }
    #columnLeft {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: left;
    }
    #columnRight {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: right;
    }
    #content {
      width: 584;
      height: 438;
      background-color: #E1E0E0;
      margin-left: 220px;
    }
    #footer {
      width: 1024px;
      height: 75px;
      background-color: #6E6A6A;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="FinalHTML.css">
  <title></title>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
    </div>
    <div id="menuTop">
    </div>
    <div id="columnLeft">
    </div>
    <div id="columnRight">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>

</html>

Answer 1

height和width必须有一个单位，例如px，dpi等。

＆＃13;

#wrapper {
      width: 1024px;
      height: 768px;
      background-color: #E1E0E0;
    }
    #banner {
      width: 1024px;
      height: 220px;
      background-color: #6E6A6A;
    }
    #menuTop {
      width: 1024px;
      height: 35px;
      background-color: #ACAAAA;
    }
    #columnLeft {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: left;
    }
    #columnRight {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: right;
    }
    #content {
      width: 584px; // here you frogot the unit (px in this case)
      height: 438px;
      background-color: #E1E0E0;
      margin-left: 220px;
    }
    #footer {
      width: 1024px;
      height: 75px;
      background-color: #6E6A6A;
    }

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="FinalHTML.css">
  <title></title>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
    </div>
    <div id="menuTop">
    </div>
    <div id="columnLeft">
    </div>
    <div id="columnRight">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

您忘记在内容div上的高度和宽度后面输入px。

width: 584;
height: 438;

应该是

width: 584px;
height: 438px;

Answer 3

#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}

你忘记了＆＃34; px＆＃34;

HTML和CSS学校项目

3 个答案: