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

最新推荐文章于 2024-08-09 17:24:43 发布

OnMy22

最新推荐文章于 2024-08-09 17:24:43 发布

阅读量636

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_38654336/article/details/80151036

版权

本文介绍了HTML布局的两种方法，包括div布局和使用table布局，并详细讲解了HTML框架的运用，如frameset、noresize、cols、rows等属性。重点讨论了内联框架Iframe的使用，包括边框设置、嵌套以及target属性在页面跳转中的作用。

摘要由CSDN通过智能技术生成

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">内容