目录
一、前言
1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的变形中的浮动等功能的代码，这也是很多教材的一个典型案例，具体功能是实现一个三栏布局，分别显示头部信息，左侧部分，中间部分，右侧部分的功能实现；
2.本文将讲解涉及到浮动等功能的知识点，其它方面会大致讲一下；
3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；
4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；
5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教；
二、知识点讲解
浮动通常使用float属性进行设置，详见下列表格
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向石浮动 |
| none | 元素不浮动(默认值) |
三、代码段
1.index.html代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>三栏布局页面</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<!--头部信息-->
<div class="header">头部信息</div>
<!--主体部分 -->
<div class="main">
<!--左侧部分 -->
<div class="left">左侧部分</div>
<!--中间部分 -->
<div class="middle">中间部分</div>
<!--右侧部分 -->
<div class="right">右侧部分</div>
</div>
<!--底部信息 -->
<div class="footer">底部信息</div>
</body>
</html>2.style.css代码部分
*{padding: 0;border: 0;margin: 0;}
.header{
width: 100%;
height: 60px;
background-color: #22aa00;
}
.footer{
width: 100%;
height: 60px;
background-color: #22aa33;
}
.main{
width: 1000px;
height: 600px;
background-color: #ff0;
margin: 0px auto 0px auto;
}
.left,.right{
width: 200px;
height: 600px;
background-color: #aaa;
}
.left{
float: left;
}
.right{
float: right;
}
.middle{
width: 600px;
height: 600px;
background-color: deeppink;
float: left;
}
四、实现结果（流程）
1.效果图
这个左侧部分里的内容是我后添加的，与本文能够实现的代码无关，运行本截图是是没有这个部分的；
918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
