底层编写需要按照先写 <header>,之后是 <main>,最后 <footer> 的方法。当然其之间也可以添加 <aside>(侧边栏)一类的标签。这三个标签的含义分别对应页眉,正文和页尾。在本框架内,它们一般为 body 元素的子元素,我们不建议您将此类标签插入至任一子元素。
<header>
// 头部内容区(顶部菜单等)
</header>
<main class="container">
// 正文内容区
</main>
<footer>
// 页尾内容区(友情链接等)
</footer>
如要限制正文区的宽度,并需要在页面左右侧保留边距,请添加一个类名为“wrap”的DIV盒子。
<main class="container">
<div class="wrap">
<p>这段文字的宽度将被约束在1200像素</p>
</div>
</main>
PS:上面添加的"container"类可以让其子元素无论如何放大缩小也不会溢出屏幕。
wrap 也提供了多种扩展类,可以使用不同宽度的同时,也可以清除边距。
类名 |
行为 |
wrap |
保留 20px 的边距,宽度限制到 1200px |
wrap min |
保留 20px 的边距,宽度限制到 800px |
wrap mid |
保留 20px 的边距,宽度限制到 1000px |
wrap max |
保留 20px 的边距,宽度限制到 1600px |
wrap full |
保留 20px 的边距,不限制宽度 |
wrap thin |
边距改为 10px |
wrap clear |
清除边距 |