好久之前做了这个作业，今天才讲，素材里包括源文件，代码供上：
<html>
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<style>
body{
margin: 0;
}
#nav{
background-color: white;
width: 100%;
box-shadow: 0px 1px 1px #999;
/*1 x方向的偏移度
2 Y方向的偏移度
3 阴影的模糊程度
4 阴影的大小
5 阴影的颜色*/
/*固定位置*/
position: fixed;
top: 0;
z-index: 1000;
}
#nav div{
width: 960px;
margin: 0 auto;
padding: 10px 0;
}
#nav img{
width: auto;
height: 40px;
}
#nav span{
float: right;
line-height: 40px;
}
#nav a{
/*去掉a标签的默认样式*/
text-decoration: none;
color: #142458;
/*font-size: 20px;*/
margin-left: 25px;
}
#nav a:hover{
color: #c57226;
}
#header img{
width: 100%;
margin-top: 60px;
}
p{
width: 960px;
margin: 20px auto 40px auto;
color: #66668f;
font-weight: normal;
/*设置行高*/
line-height: 150%;
text-align: left;
}
p::before{
content: '“';
font-size: 32px;
font-family: 宋体;
position: relative;
top: 10px;
}
p::after{
content: '”';
font-size: 32px;
font-family: 宋体;
position: relative;
top: 10px;
}
h1{
width: 960px;
margin: 18px auto;
color: #c57226;
font-size: 24px;
}
h1::before{
content: '\258A';
}
.section{
text-align: center;
}
.section img{
width: 960px;
}
.classMates{
width: 960px;
background-image: url(classmates.jpg);
height: 520px;
margin: 0 auto;
position: relative;
}
.classMates img{
border: 3px solid white;
}
.classMates img:nth-child(1){
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
top: 20px;
left: 50px;
}
.classMates img:nth-child(2){
width: 350px;
height: 350px;
border-radius: 50%;
position: absolute;
top: 130px;
left: 300px;
}
.classMates img:nth-child(3){
width: 150px;
height: 150px;
border-radius: 50%;
position: absolute;
top: 50px;
left:750px;
}
hr{
width: 960px;
color: #f9f9f9;
}
footer div{
width: 960px;
color: #999;
margin: 30px auto 60px;
}
</style>
</head>
<body>
<div id="nav">
<div>
<img src="logo.png" alt="">
<span>
<a href="#">首页</a>
<a href="#HTML5">HTML5</a>
<a href="#classMates">我的同学</a>
<a href="#hometown">我的家乡</a>
<a href="#myschool">我的学校</a>
<a href="#footer">关于我</a>
</span>
</div>
</div>
<div id="header">
<img src="header.jpg" alt="好美">
<p>学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。如果能够子啊使用它的过程中体会到乐趣，就是学习的最佳状态。希望大家在学习HTML5的过程中多多练习，多敲代码一定会有回报，意想不到的收获都会在使用的过程中迸发出来。</p>
</div>
<h1 id="HTML5">HTML5</h1>
<div class="section">
<img src="html5.jpg" alt="">
<p>从小就喜欢学习，感觉自己的自学能力超强，也喜欢把自己学会的知识分享给大家。我希望自己能够成为一个好老师，把每一个同学都教好，让他们能够有所成就。我认为一个好老师不仅要有较好的技术，也要对学生严格要求。放任不管只有部分同学能安心学习，严格要求才能保证绝大多数同学都能稳下心来好好学习。</p>
</div>
<h1 id="classMates">我的同学</h1>
<div>
<div class="classMates">
<img src="wf.png" alt="">
<img src="lry.jpg" alt="">
<img src="ldh.jpg" alt="">
</div>
<p>王菲、刘若英、刘德华：很高兴和你们一起学习HTML5，感谢在这个美好的季节遇见你们！</p>
</div>
<h1 id="hometown">我的家乡</h1>
<div class="section">
<img src="hometown.JPG" alt="">
<p>我的家乡在南阳市方城县。这是离我家最近的风景区----七峰山森林公园，这里是中国第一大石川。石川就是在巨大的岩石上流动的溪水，七峰山整个山脉都是由一块巨大的花岗岩构成，再加上山顶湖泊常年蓄积雨水就形成了一年四季溪流不断的美丽景观。</p>
</div>
<h1 id="myschool">我的学校</h1>
<div class="section">
<img src="lzu.jpg" alt="">
<p>我的大学----兰州大学。在这里度过了我人生中最难忘的四年时光。那里的风光，在那里的人，那里的图书馆，还有那里蓝蓝的天和金黄的秋天，每每回想想来总是让心中久久不能平复。</p>
</div>
<hr>
<footer id="footer">
<div>
©2016 智游教育 版权所有 0359-12345678 厦门市湖里区万翔商务国际中心
</div>
</footer>
</body>
</html>素材下载：2017-04-05 gerenzhuye.zip