<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box {
width: 1000px;
height: 2000px;
border: 1px solid red;
margin: auto;
position: relative;
}
#top {
width: 60px;
height: 60px;
border: 2px solid #e2e2e2;
background-color: #c1c1c1;
color: white;
font: bold 32px Africa, 黑体;
text-align: center;
line-height: 60px;
/*
固定定位
position: fixed;
right: 20px;
bottom: 20px;
*/
/* 决对定位 */
position: absolute;
right: 0px;
bottom: 0px;
}
#box img {
width: 100px;
height: 100px;
}
#box img:nth-child(2){
/* 相对定位 */
position: relative;
top:50px;
}
#box img:nth-child(3){
/* 绝对定位 */
position: absolute;
right: -100px;
top: 200px;
}
</style>
</head>
<body>
<div id="box">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
<div id="top">TOP</div>
</div>
</body>
</html>
根据大家的作业情况，强调几点在设计中要注意的事项：
1、尺寸计算要精准，否则会影响到整个页面中所有内容的布局，本此作业中，中间内容区域的尺寸大多数同学都没有按要求去设计，原因是设置width和height时将内边距计算在内了。左侧块应设置为530340，右侧块内没内边距要求，按0算，所以右侧块的尺寸为200400
2、使用html标签时要注意标签的语义，干什么要用什么标签，div通常就是用来组织内容的，不要所有的地方都用div，例如右上角的导航要用ul实现，左侧内容文字可以使用p标签。
3、显示图片时，有两种做法，可以使用img标签插入图片，也可以使用背景显示图片，通常约定网页的内容（重要的）要用img标签插入，装饰或辅助（不重要的）要用背景图片，例如左侧块中文字左侧的学校图片要用img插入，而标题右侧的小图片是装饰，用背景实现。
4、标题下方可以使用边框实现，也可以使用hr标签实现，hr标签的语义主要是分隔，但不便于控制和标题间的距离，此处使用下边框更好一些。
5、定位时，left、right、top、bottom可以使用px为单位，也可以使用%，还可以配合margin调整位置。
[ 布局综合实例： ](url)
