大三上学期期末总结，嗯，没错，是上学期，写在新学期开始hhh。
上学期学了一门HTML5+CSS3的课程，也叫Web前端技术，期末的课程设计是写一个个人主页，能够在浏览器中打开的静态网页。通过一学期的学习，虽然系统学习过一遍，但是综合起来实践还是有些难度的。不过很开心的是在我的不懈努力之下还是基本完成了。下面是设计要求和课程设计获取方式。
《Web前端技术实验》期末作品
——个人网站设计要求
主题：我是大学生
栏目：
自我介绍
我的大学
专业及课程
校园活动
室友
社团经历
获得奖项、证书
课外阅读
推荐的文章
要求：
内容积极向上，页面美观、布局合理，可参照教材第10章，加入部分图片、视频、动画等美化页面。
提交时间：第16周周五之前。
提交内容：以“学号姓名”命名网站文件夹，整体网站文件夹一起提交。
首先编写基本的网页框架，导航，头部，中间，尾部。然后根据选择器的命名不同，按照语法编写样式，调整大小和格局。最后使用jQuery插入动画播放照片，增加亮点。
百度网盘链接: https://pan.baidu.com/s/1NEYUhMivV41YBviKrrhd-g 提取码: jw3v
写在最后，这也是我学期末主要完成的作品，基本是边查边学边写的（作品劣质，大佬轻喷），这种一气呵成，畅快淋漓的感觉真的很爽。
网页效果图：
HTML代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>个人网站-首页</title>
<link rel="stylesheet" href="css/comm_style.css" type="text/css"> <script src="slide/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="slide/js/imgslide05.js" type="text/javascript"></script>
<link rel="stylesheet" href="slide/css/picslide05.css" type="text/css" /> <style type="text/css">
#left{width: 180px;height: 362px;border: 1px solid #d9d7cb;margin: 10px; float: left;clear: left;}
h4{letter-spacing: 1em;font-size: 15px;background: #e6e4db;height: 24px;border-bottom: 1px solid #d9d7cb;padding-top: 5px;
margin-top:2px; padding-left: 10px;}
#left h4{width: 170px;}
#left ul{margin: 16px;line-height: 3em;}
#left li{width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} #right_up{width: 564px;height: 175px;border: 1px solid #d9d7cb;margin-top: 10px;float: left;}
#right_up h4{width: 554px;}
#right_up p{width: 500px;height: 90px;background: #f4f4f0;border: 1px none #999;text-indent: 2em;line-height: 1.5em; overflow: hidden;} #right_down{width: 564px;height: 175px;border: 1px solid #d9d7cb;margin-top: 10px;float: left;}
#right_down h4{width: 554px;}
#right_down p{width: 500px;height: 90px;background: #f4f4f0;border: 1px none #999;text-indent: 2em;line-height: 1.5em;overflow: hidden;}
#photo {width: 756px;height: 176px;border: 1px solid #d9d7cb;margin-left: 10px;float: left;}
#photo h4{width: 746px;}
/*#photo_img{width: 700px;margin-left: 60px;margin-top: 10px;text-align: center;}
#photo img{display: block;width: 100px;height: 100px;float: left;margin-right: 30px;border: 1px solid #d9d7cb;}
#photo h5{width: 100px;margin-right: 30px;margin-top: 5px;font-size: 12px;float: left;}*/ </style>
</head>
<body>
<div id="top">
<div id="top_txt"><a href="#" target="_self"> 收藏本页 </a>|<a href="#" target="_self"> 联系站长</a></div>
</div>
<div id="vi">
<div id="tt">没有白走的路<br>每一步都算数<br></div>
</div>
<div id="nav">
<ul>
<li><a href="#" target="_self"> 首页</a></li>
<li class="bar">|</li>
<li><a href="#" target="_self">自我介绍</a></li>
<li class="bar">|</li>
<li><a href="#" target="_self">我的大学</a></li>
<li class="bar">|</li>
<li><a href="#" target="_self">社团经历</a></li>
<li class="bar">|</li>
<li><a href="#" target="_self">最新照片</a></li>
<li class="bar">|</li>
</ul>
</div>
<div id="main">
<div id="left">
<h4>|社团经历</h4>
<ul>
<li>◆参加各院校举办的新生编程赛</li>
<li>◆参加第九届河南省蓝桥杯大赛</li>
<li>◆参加第十届河南省蓝桥杯大赛</li>
<li>◆组织升达ACM宣讲会和新生培训</li>
<li>◆参加第十届河南省ACM大学生程序设计竞赛</li>
<li>◆参加第十一届河南省ACM大学生程序设计竞赛</li>
<li>◆参加2018ACM亚洲区域赛青岛站</li>
<li>◆参加2018ACM亚洲区域赛焦作站</li>
</ul>
</div> <div id="right_up">
<h4>|自我介绍</h4>
<p> 我叫温飞飞，来自牡丹花城洛阳，现在是郑州升达经贸管理学院的一名在校大三学生，专业是物联网工程。为人真诚，性格沉稳，踏实肯干。喜欢互联网行业，在校期间热衷算法编程竞赛，如果志同道合，不妨交个朋友吧（hhhh）</p>
</div>
<div id="right_down">
<h4>|我的大学</h4>
<p> 郑州升达经贸管理学院（Zhengzhou Shengda University Of Economics,Business & Management，ZSDU）简称“升达学院”，位于河南省新郑市，是豫籍*著名教育家王广亚博士捐资创办的一所全日制民办普通本科院校。
学校建于1993年，前身为郑州大学升达经贸管理学院，2011年4月更为现名。</p>
</div> <div id="photo">
<h4>|最新照片</h4>
<div id="picslide" class="picslide05">
<div class="slides">
<ul class="frame"> <li></li><li></li><li></li> </ul>
</div>
<ul class="content" style="display:none;">
<li><a href="#" target="_self"><img src="slide/img/tu1.png" alt="Happy Bokeh Thursday!" /></a></li>
<li><a href="#" target="_self"><img src="slide/img/tu2.png" alt="Save my love for loneliness" /></a></li>
<li><a href="#" target="_self"><img src="slide/img/tu3.png" alt="Happy Bokeh raining Day" /></a></li>
<li><a href="#" target="_self"><img src="slide/img/tu4.png" alt="We Eat Light" /></a></li>
<li><a href="#" target="_self"><img src="slide/img/tu5.png" alt="“I must go down to the sea again, to the lonely sea and the sky...”" /></a></li>
</ul>
<div class="next"></div>
<div class="pre"></div>
<ul class="pointer">
<li class="on"></li>
<li></li><li></li><li></li><li></li>
</ul>
</div> <script type="text/javascript">
$(function () {
$("#picslide").picslide05();
});
</script>
</div>
</div>
<div id="bt">© 本网站版权为温飞飞所有</div>
</body>
</html>
CSS代码：
/*公共部分样式*/
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
body{background: #d9d7cb url(../img/body_bg.PNG) repeat-y center;font-size: 12px;}
#top,#vi,#nav,#main,#bt{width: 779px;margin: 0px auto;}
#top,#bt{background: #000;} #top{height: 18px;padding-top: 5px;text-align: right;color: #fff;}
#top_txt{margin-right: 5px;}
#top_txt a{color: #fff;text-decoration: none;}
#top_txt a:visited{color: #fff;}
#top_txt a:hover{color: #ddd;}
#vi{height: 110px;
background-color: 98a363;
background-image: url(../img/top_bg.PNG);
opacity: 0.7;
background-repeat: no-repeat;
background-size: 779px 130px;
}
#tt{margin-left: 120px;text-indent:-40px;line-height: 1.8em;font-size: 14px;font-weight: bold; } #nav{height: 35px;background: e6e4db;}
#nav ul{margin-left: 30px;}
#nav ul li{float: left;}
#nav ul a{display: block;width: 120px;height: 25px;padding-top: 10px;text-decoration: none;letter-spacing: 8px;text-align: center;
color: #000;font-size: 15px;font-weight: bold; }
#nav ul a:visited{color: #000;}
#nav ul a:hover{color: 98a363;background: #fff;}
#nav ul li.bar{width: 6px;padding-top: 12px;}
#main{height: 600px;background: #fff;} /*主题内容*/
#bt{margin-top: 0px; height: 30px;padding-top: 34px;text-align: center;color: #fff;}