具体步骤如下：
静态网页现阶段主要采用DIV+CSS+Javascript来实现,
第一步:在桌面上创建一个文本文件
第二步:将文本名改为"test.html"(扩展名为.html或者.htm即可,看不见扩展名可以到)
第三步:文件名改好后,右击打开方式,选择记事本
第四步:写代码。
html代码写成下图这样即可:
2.css代码写在下图区域内:
3.javascript代码写在下图区域内:
第五步:在这些代码区域内写上你的代码
第六步:保存该文本文件然后右击打开选择一个浏览器打开如果出现“已限制网页运行脚本。。。”点击允许。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<img src="这里填你的图片名字，例如1.jpg，图片跟html放在同一个文件夹下面就行">
<img src="2.jpg">
<img src="3.jpg">
<p>这里输入你想要输入的文字</p>
</body>
</html>
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style type="text/css">
.big {
width: 500px
height: 250px
position: relative
margin: 50px
border: 2px solid black
}
.small {
width: 200px
position: absolute
right: 0
top: 50px
}
.small .con {
border: 2px solid black
border-right: none
width: 100%
height: 100px
}
.btn {
background: none
border: 2px solid black
margin: 10px 20px 10px 0
}
</style>
</head>
<body>
<div class="big">
<div class="small">
<div class="con"></div>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
</div>
</div>
</body>
</html>
方法很多，这是其中之一，用的定位。除此之外还可以用浮动。
解决这个问题的方法如下：
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文件，查看实现的效果，这样问题就解决了。
