重要知识点：HTML布局与框架

HTML布局

例子：

1.div布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#container{    /*这里的div可以选择删掉，效果一样*/
            width: 100%;
            height: 950px;
            background-color: aquamarine;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: chocolate;
        }
        div#content_menu{
            width: 30%;
            height: 80%;
            background-color: darkgreen;
            float: left;   /*浮动从左到右*/
        }
        div#content_body{
            width: 70%;
            height: 80%;
            background-color: antiquewhite;
            float: left        /*浮动从左到右*/
        }
        div#footing{
            width: 100%;
            height: 10%;
            background-color: brown;
            clear: both;   /*清除浮动*/
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>
    </div>
</body>
</html>

效果:

2.使用table进行布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
    <table width="100%" heigh="1000px" style="background-color: brown">
        <tr>
            <td colspan="3" width="100%" height="10%" style="background-color: aqua">这是头部</td>
        </tr>
        <tr>
            <td width="20%" height="80%" style="background-color: red">
                <ul>
                    <li>苹果</li>
                    <li>梨子</li>
                    <li>芒果</li>
                </ul>
            </td>
            <td width="60%" height="80%" style="background-color: darkgreen">内容主体</td>
            <td width="20%" height="80%" style="background-color: blueviolet">右菜单</td>
        </tr>
        <tr>
            <td width="100%" height="10%" colspan="3" style="background-color: blue">这是底部</td>
        </tr>
    </table>
</body>
</html>

效果：

HTML框架

1. 框架标签(frame):

框架对于页面的设计有着很大的作用

2. 框架集标签(<frameset>)：

框架集标签定义如何将窗口分割为框架

每一个frameset定义一系列行或列

rows/cols的值规定了每行或每列占据屏幕的面积

3. 常用标签

noresize：固定框架大小

cols:列

rows:行

4. 内联框架

Iframe

这里主要用iframe内联框架，frame已经不用

<iframe src="frameA.html" frameborder="0" width="500px" height="400px"></iframe>

frameborder属性是定义边框的宽度

效果：

同时内联框架也可以进行嵌套使用

在frameA.html文件中

<body bgcolor="#8a2be2">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>

效果：

可以看出，是可以上下拉动的

（重要）Iframe的嵌套打开页面的使用：

在主页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架</title>
</head>
<body bgcolor="#8a2be2">
    <iframe src="frameB.html" frameborder="0" width="800px" height="800px">

    </iframe>
</body>
</html>

嵌套了B页面

FrameB.html中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body bgcolor="blue">
    <a href="http://www.baidu.com" target="_self">百度</a>
</body>
</html>

FrameB.html的target属性当中，_self是在自己的页面打开，_parent则是在上一层页面中打开，_top则是在最外层页面中打开

结果（点击打开了B页面中的链接）：

重要知识点：HTML布局与框架

猜你喜欢