css - HTML 和 CSS 学校元素

标签 css html

我必须在学校做一个使用 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>

最佳答案

heightwidth必须有单位,如px、dpi等。

#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;
    }
<!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>

关于css - HTML 和 CSS 学校元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26813242/

相关文章:

javascript - 如何使用像切换图像这样的 slider 来替换为另一个图像

html - 将 CSS 类添加到 select 的一个选项在 FF5 中不起作用

javascript - 如何使用 css 或 jquery 创建 flex 图像(见图)

html - 由于 MIME 类型而未加载样式表

html - 目标字体大小 = 2 与 css

html - 调整浏览器窗口大小时文本重叠导航栏

html - 无法更改导航栏的背景颜色

html - 无法关闭 Firefox textarea 中的占位符换行

javascript - Vue.js - 在悬停时添加删除按钮并在按下按钮时将其删除

java - 如何在将光标放在 HTML 元素上时获取其属性?