<!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>用浏览器执行结果：
本文出自 “Linux” 博客，请务必保留此出处http://zhangshijie.blog.51cto.com/806066/1702626
原文：http://zhangshijie.blog.51cto.com/806066/1702626