<!DOCTYPE html>  #文档类型,不写有时候浏览器会乱码
<html lang="en">  #文档语言
<head>  #头部
    <meta charset="UTF-8">  #编码
    <title>我的框架</title>  #打开后在浏览器上方显示标题
<style type="text/css">  #类型为Css

    html,body {  /*注释,是一个标签选择器,给html和body标签添加元素效果*/
       height: 100%;  #高为满屏
        margin: 0;  /*边界线为0 */
    }

    .container{   /*类选择器,给外层部分设置元素效果*/
        height: 100%;
    }

    .header{  /*注释,类名的定义必须要加点,在下面引用的时候不需要加点*/
        height: 30px;
        background: oldlace;  /*定义背景色*/
    }

    .content{   /*给主体部分设置元素效果*/
        border: 1px dotted;  #定义边界线的样式和宽度
        height: 100%;
    }

    .left_content{
        background: #265a88;
        width: 15%;
        height: 100%;
        float: left; /* 浮动效果,会占满其width+height部分*/
    }
    .right_content {
        width: 85%;
        height: 100%;
        background: #adadad;
        float: left;
    }

    .end{
        background: red;
        height: 10px dotted;
    }
</style>
</head>
<body>

<div class="container"> <!--外层开始,调用类container填充自己-->
    <div class="header">   <!--头部开始,调用类header-->
         <h3>头部</h3>
    </div>  <!--头部结束-->

    <div class="content">  <!--主体开始,调用类content-->
        <div class="left_content"> <!-- 左侧开始,调用类left_content-->
            <h3>左侧</h3>
        </div>  <!-- 左侧结束 -->

        <div class="right_content"> <!-- 右侧开始调用类right_content -->
            <h3>右侧</h3>
        </div> <!--右侧结束 -->
    </div>  <!-- 主体结束 -->

    <div class="end"> <!-- 底部开始,调用类end-->
            <h3>底部</h3>
    </div> <!-- 底部结束 -->

</div> <!-- 外层结束 -->
</body>
</html>


用浏览器执行结果:

wKiom1Yc5VOgY6s4AAD89OpfKCg820.jpg