HTML 4

Question

我是网页设计的新手。我有一条规则，一切都应该灵活。我不明白为什么px在网页设计中被广泛使用而不是百分比，也许我错了我一直在寻找基本html布局，如下图所示很长一段时间，但只找到一些例子，其中使用了一些神奇的负边距/填充和PX 我想创建这样的布局，但使用百分比没有任何px属性。

我不确定我是否正确，但我讨厌一切依赖。所有的例子对我来说似乎都不灵活，当然我可以使用媒体查询，但我需要使用百分比或任何不紧密的屏幕尺寸来获得这样的结果。

https://cdn.tutsplus.com/net/uploads/legacy/543_html5/2_Column_Layout.png

请有人提供这样的示例HTML + CSS（HTML 4而不是5）。

Answer 1

尝试此操作并更改/编辑您想要的内容

HTML 5

<header>HEADER</header>
<nav>NAV</nav><main>MAIN</main>
<footer>FOOTER</footer>

<强> CSS

header {
    width: 100%;
    height: 10%;
    box-sizing: border-box;
    background-color: teal;
}
nav {
    width: 20%;
    height: 80%;
    background-color: olive;
    display: inline-block;
    box-sizing: border-box;
}
main {
    width: 80%;
    height: 80%;
    background-color: yellow;
    display: inline-block;
    box-sizing: border-box;
}
footer {
    width: 100%;
    height: 10%;
    background-color: orange;
    box-sizing: border-box;
}

Answer 2

这个非常经典，浮动和东西：

http://codepen.io/denns/pen/LpBXBa

HTML 4

<div class="header">header</div>
<div class="nav">navi</div>
<div class="main">main</div>
<div class="footer">footer</div>

CSS

.header {
  background-color: coral;
  height: 100px;
}

.nav {
  background-color: grey;
  height: 400px;
  width: 25%;
  float: left;
}

.main {
  background-color: hotpink;
  height: 400px;
  width: 75%;
  float: left;
}

.footer {
  clear : both;
  background-color: #0ff;
  height: 100px;
}

但这并不能解决您通常遇到的问题。喜欢＆＃34;导航栏应该具有与内容相同的高度＆＃34;。它不使用额外的clearfix变体等等......

我猜px的使用范围更广，因为如果你从一个代理商那里得到一个设计，它最有可能针对特殊的px宽度进行优化。特别是内部填充和字体。

使用div百分比的HTML页面基本布局（HTML 4）

2 个答案:

HTML 4

CSS