HTML _ HTML 布局

HTML 布局

先上一个例子，看一看这个例子，但别深究该例子。

Cities

古潼京

一个曾经美女如云的城市

Footer

运行一下

使用<div>进行布局

使用<div>元素进行HTML布局是最朴素实用方便的技巧。强烈推荐以这种方式为主，其他的方式知晓即可，本页教程就是这么极端。

<body>
    <div id="header">
        <h1>专否海选 魅力城市</h1>
    </div>

    <div id="nav">
        古潼京<br>
        成都<br>
        重庆<br>
    </div>

    <div id="section">
        <h1>古潼京</h1>
        <p>一个曾经美女如云的城市</p>
    </div>

    <div id="footer">
        zhuanfou.com
    </div>
</body>

运行一下

CSS代码：

<style>
/* 如不设置好box-sizing，padding的取值则会影响实际width */
div {
    box-sizing: border-box;
}

#header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px;
}

#nav {
    line-height: 30px;
    background-color: #ffd1ca;
    height: 200px;
    width: 30%;
    float: left;
    padding: 20px; 
}

#section {
    width: 70%;
    float: left;
    padding: 10px; 
}

#footer {
    background-color: black;
    color: white;
    clear: both;
    text-align: center;
    padding:5 px; 
}
</style>

使用 HTML5 布局元素

HTML5提供了一些新的布局元素。这些所有的布局元素的实质就是div元素，而之所以换成各种不同的名字，则是在强调暗示该部分元素在整体页面中的地位。

这是一种更科学美好的用法，但从实用角度来说，并非完全强制。是否采用，可酌情而定，个人习惯、团队习惯都是重要影响因素。个人推荐可试着把<header>和<footer>等常用的html5布局标签使用起来，因为这些特定名称的布局标签会有助于开发者自己或开发者合作伙伴对源代码更好的理解。但是更多主体部分的布局，还是推荐以div为容器，因为人的脑容量是有限的，div是万变不离其宗。

布局类语义元素	语境内涵
header	定义网页第一行，即页眉部分
nav	定义导航菜单栏
section	定义文档中的某个章节
article	暗示内部是一篇文章
aside	定义主体内容之外部分，如侧栏
footer	定义网页最下面一行，即页脚
details	定义额外的细节部分
summary	定义某个details元素的标题

把上面的例子改成利用html5布局类语义标签的方式，如下所示：

<body>
    <header>
        <h1>专否海选 魅力城市</h1>
    </header>

    <nav>
        古潼京<br>
        成都<br>
        重庆<br>
    </nav>

    <section>
        <h1>古潼京</h1>
        <p>一个曾经美女如云的城市</p>
    </section>

    <footer>
        zhuanfou.com
    </footer>
</body>

运行一下

CSS代码：

<style>
/* 记得要设置好nav和section的box-sizing */
header {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 5px;
}

nav {
    box-sizing: border-box;
    line-height: 30px;
    background-color: #ffd1ca;
    height: 200px;
    width: 30%;
    float: left;
    padding: 20px;
}

section {
    box-sizing: border-box;
    width: 70%;
    float: left;
    padding: 10px; 
}

footer {
    background-color: black;
    color: white;
    clear: both;
    text-align: center;
    padding:5 px; 
}
</style>

记得要利用好 float 属性

其实上面用到过div的float属性了；比如若干个div需要放在同一行上，设置好div的宽度，把float设置成left取值；当需要另起新的一行，添加一个不会显示出来的div即可，把这个div的clear属性设置成both即可。

看例子吧：

<div style="width:30%;height:20px;float:left;background:#d77e60;"></div>
<div style="width:50%;height:90px;float:left;background:#46acb6;"></div>
<div style="width:20%;height:60px;float:left;background:#d4d854;"></div>
<div style="clear:both;"></div><!-- 只为断行 -->
<div style="width:100%;height:10px;background:#343434;"></div>

运行一下

其他方式概览

人的精力是有限的，尤其编程知识的学习，没必要把方方面面都搞懂，抓主干，去枝节；因为这些枝节不实用、兼容性有问题、未来会被淘汰等。

用table的方式也可以进行布局；利用框架网页也可以进行布局；CSS的Flexbox或Grid亦都可以进行布局。但是这里都不细说。

HTML 布局

推广