10、HTML布局

HTML布局

我们在网页的日常开发中，我们从设计师手上拿过设计稿之后，我们一般会把网页按功能划分成很多个小块，把这些小块又按设计稿排列起来，排列成设计稿的样子，尽可能的还原成设计稿的样子，最后把具体的内容填充到小块里面去。

布局：把功能划分成小块，并把它排列好。

我们拿一个具体的网站做例子：

我们把网站的上部根据功能分成了三个小块，分别是导航栏（红）、菜单栏（黄）、广告栏（蓝）

在html中，我们实现划分小块的标签是< div >

< div >标签——容器（用来装东西的玩意）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器</title>
</head>
<body>
    <div style="background: yellow;">
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
    </div>
</body>
</html>

效果：

容器有一个基本概念：如果你什么都不去设置，容器就会自适应，自动的去适配

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器</title>
</head>
<body>
    <div style="background: yellow;">
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
    </div>
</body>
</html>

效果：

不设置其他属性时，div根据内容的多少，自动适配容器大小。

容器设置：自定义容器大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器</title>
</head>
<body>
    <div style="background: yellow;width: 300px;"><!--指定容器的宽-->
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
        这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div这是个div
    </div>
</body>
</html>

效果：

容器内什么东西都能放，比如：文字、图片、列表、表格、表单…

容器内放表单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器</title>
</head>
<body>
    <div style="background: yellow;width: 300px;"><!--指定容器的宽-->
        <form action="" method="post">
            <!--文本-->
            用户名：<input type="text" name="user"><br>
            <!--密码-->
            密码：<input type="password" name="pwd"><br>

            <!--单选框-->
            性别：<input type="radio" name="sex" value="male">男
                 <input type="radio" name="sex" value="female">女
            <br>

            <!--复选框-->
            兴趣：<input type="checkbox" name="ckb" value="kanshu">看书
            <input type="checkbox" name="ckb" value="chifan">吃饭
            <input type="checkbox" name="ckb" value="daqiu">打球
            <br>

            <!--下拉框-->
            城市：<select name="city">
                    <option value="sh">上海</option>
                    <option value="bj">北京</option>
                </select>
            <br>
            <input type="submit" value="提交">
        </form>
    </div>
</body>
</html>

效果：

当容器的大小设置得小于容器内控件的大小的时候，控件会独立超出容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>容器</title>
</head>
<body>
<div style="background: yellow;width: 100px;"><!--指定容器的宽小于控件的宽-->
    <form action="" method="post">
        <!--文本-->
        用户名：<input type="text" name="user"><br>
        <!--密码-->
        密码：<input type="password" name="pwd"><br>

        <!--单选框-->
        性别：<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
        <br>

        <!--复选框-->
        兴趣：<input type="checkbox" name="ckb" value="kanshu">看书
        <input type="checkbox" name="ckb" value="chifan">吃饭
        <input type="checkbox" name="ckb" value="daqiu">打球
        <br>

        <!--下拉框-->
        城市：<select name="city">
        <option value="sh">上海</option>
        <option value="bj">北京</option>
    </select>
        <br>
        <input type="submit" value="提交">
    </form>
</div>
</body>
</html>

效果：

布局方式：div、table、iframe

div：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
</head>
<body>
    <div style="background: yellow;height: 100px;">导航</div>
    <!--float属性是css布局中的常用属性，这里只是为了初步了解html布局,具体使用在学习css时会细讲-->
    <div style="background: green;width: 20%;height: 300px;float: left">菜单</div>
    <div style="background: blue;width: 80%;height: 300px;float: left">内容</div>
</body>
</html>

效果：

iframe——在页面中嵌套页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
</head>
<body>
    <div style="background: yellow;height: 100px;">导航</div>
    <!--float属性是css布局中的常用属性，这里只是为了初步了解html布局,具体使用在学习css时会细讲-->
    <div style="background: green;width: 20%;height: 300px;float: left">菜单</div>
    <div style="background: blue;width: 80%;height: 300px;float: left">内容</div>

    <!--iframe——在页面中嵌套页面-->
    百度搜索：<iframe src="http://www.baidu.com" frameborder="0" width="100%"></iframe>
    腾   讯：<iframe src="http://www.qq.com" frameborder="0" width="100%"></iframe>
</body>
</html>

效果：