解决这个问题的方法如下：
1、新建一个html文件，命名为test.html，用于讲解div+css布局的基本流程。
2、在test.html文件内，对body进行样式初始化，设置外边距margin为0，内边距padding为0，同时使用text-align设置文字居中。
3、在test.html文件内，为了讲解方便，设置所有的div高度为200px，内容的颜色为红色。
4、在test.html文件内，使用div创建网页的头部，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为灰色。
5、在test.html文件内，使用div创建网页的中部，使用margin:0 auto设置div居中，同时设置其宽度为800px。
6、在test.html文件内，在网页的中部，创建两个div，用于将中部为两部分，每一个部分宽度为50%，左部分使用float:left设置左浮动，右部分使用float:right设置右浮动。
7、在test.html文件内，使用div创建网页的底部，使用clear:both清除上面div的浮动，避免影响底部的布局。同时，使用margin:0 auto设置div居中，同时设置其宽度为800px，背景颜色为#000fff。
8、在浏览器打开test.html文件，查看实现的效果，这样问题就解决了。
第一部分 两列式页面布局一、两列定宽布局
二、两列自适应布局
三、单列定宽单列自适应布局
四、两列等高布局
第二部分 三列或多列布局
一、两列定宽中间自适应布局
二、三列自适应布局和三列等高布局
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Document</title>
<style>
*{ padding: 0margin: 0}
.clearfix:after{clear: bothcontent: "."display: blockheight: 0visibility: hidden}
.clearfix{display: block*zoom:1}
body{ background: #ccc}
/* 右上导航 */
#all{ width: 100%height: 100%}
.Top_right{ width: 100%padding-top: 1%}
.Top_right span{margin:10px}
.right{ float: right}
/* 输入框 */
.Import{ margin: 0 autowidth: 50%padding-top: 15%}
.Img{ text-align: center}
.box{ text-align: center}
/* 底部版权 */
.Bottom{ width: 30%margin: 0 auto}
.copy{text-align: centerpadding-top: 20%}
</style>
</head>
<body>
<div id="all">
<div class="Top_right clearfix">
<div>
<span>导航1</span>
<span>导航2</span>
<span>导航3</span>
<span>导航4</span>
<span>导航5</span>
</div>
</div>
<div>
<div>
<img src="" alt="图片地址">
</div>
<div>
<textarea name="box1" rows="2" cols="100"></textarea>
</div>
</div>
<div>
<div>
<img src="" alt="二维码">
</div>
<div>{版权}</div>
</div>
</div>
</body>
</html>
