Web前端课程设计——个人主页 - 好文

　　大三上学期期末总结，嗯，没错，是上学期，写在新学期开始hhh。

　　上学期学了一门HTML5+CSS3的课程，也叫Web前端技术，期末的课程设计是写一个个人主页，能够在浏览器中打开的静态网页。通过一学期的学习，虽然系统学习过一遍，但是综合起来实践还是有些难度的。不过很开心的是在我的不懈努力之下还是基本完成了。下面是设计要求和课程设计获取方式。

《Web前端技术实验》期末作品

——个人网站设计要求

主题：我是大学生

栏目：

自我介绍

我的大学

专业及课程

校园活动

室友

社团经历

获得奖项、证书

课外阅读

推荐的文章

要求：

内容积极向上，页面美观、布局合理，可参照教材第10章，加入部分图片、视频、动画等美化页面。

提交时间：第16周周五之前。

提交内容：以“学号姓名”命名网站文件夹，整体网站文件夹一起提交。

　　首先编写基本的网页框架，导航，头部，中间，尾部。然后根据选择器的命名不同，按照语法编写样式，调整大小和格局。最后使用jQuery插入动画播放照片，增加亮点。

　　百度网盘链接：https://pan.baidu.com/s/1MRKFAbg2TZ_1xbIsMNNsew
<https://pan.baidu.com/s/1MRKFAbg2TZ_1xbIsMNNsew>

　　写在最后，这也是我学期末主要完成的作品，基本是边查边学边写的（作品劣质，大佬轻喷），这种一气呵成，畅快淋漓的感觉真的很爽。

　　网页效果图：

　　

　　HTML代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type"
content="text/html; charset=utf-8"> 5 <title>个人网站-首页</title> 6 <link rel
="stylesheet" href="css/comm_style.css" type="text/css"> 7 8 <script src
="slide/js/jquery-1.7.2.min.js" type="text/javascript"></script> 9 <script src
="slide/js/imgslide05.js" type="text/javascript"></script> 10 <link rel
="stylesheet" href="slide/css/picslide05.css" type="text/css" /> 11 12 <style
type="text/css"> 13 #left{width: 180px;height: 362px;border: 1px solid #d9d7cb;
margin: 10px; float: left;clear: left;} 14 h4{letter-spacing: 1em;font-size:
15px;background: #e6e4db;height: 24px;border-bottom: 1px solid #d9d7cb;
padding-top: 5px; 15 margin-top:2px; padding-left: 10px;} 16 #left h4{width:
170px;} 17 #left ul{margin: 16px;line-height: 3em;} 18 #left li{width: 150px;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} 19 20 #right_up
{width: 564px;height: 175px;border: 1px solid #d9d7cb;margin-top: 10px;float:
left;} 21 #right_up h4{width: 554px;} 22 #right_up p{width: 500px;height: 90px
;background: #f4f4f0;border: 1px none #999;text-indent: 2em;line-height: 1.5em;
overflow: hidden;} 23 24 #right_down{width: 564px;height: 175px;border: 1px
solid #d9d7cb;margin-top: 10px;float: left;} 25 #right_down h4{width: 554px;}
26 #right_down p{width: 500px;height: 90px;background: #f4f4f0;border: 1px none
#999;text-indent: 2em;line-height: 1.5em;overflow: hidden;} 27 #photo {width:
756px;height: 176px;border: 1px solid #d9d7cb;margin-left: 10px;float: left;}
28 #photo h4{width: 746px;} 29 /*#photo_img{width: 700px;margin-left:
60px;margin-top: 10px;text-align: center;} 30 #photo img{display: block;width:
100px;height: 100px;float: left;margin-right: 30px;border: 1px solid #d9d7cb;}
31 #photo h5{width: 100px;margin-right: 30px;margin-top: 5px;font-size:
12px;float: left;}*/ 32 33 </style> 34 </head> 35 <body> 36 <div id="top">
37 <div id="top_txt"><a href="#" target="_self"> 收藏本页 </a>|<a href
="#" target="_self"> 联系站长</a></div> 38 </div> 39 <div id="vi"> 40 <div
id="tt">没有白走的路<br>每一步都算数<br></div> 41 </div> 42 <div id="nav"> 43 <ul> 44 <
li><a href="#" target="_self">  首页</a></li> 45 <li class="bar">|</li>
46 <li><a href="#" target="_self">自我介绍</a></li> 47 <li class="bar">|</li> 48
<li><a href="#" target="_self">我的大学</a></li> 49 <li class="bar">|</li> 50 <li
><a href="#" target="_self">社团经历</a></li> 51 <li class="bar">|</li> 52 <li><a
href="#" target="_self">最新照片</a></li> 53 <li class="bar">|</li> 54 </ul> 55
</div> 56 <div id="main"> 57 <div id="left"> 58 <h4>|社团经历</h4> 59 <ul> 60 <
li>◆参加各院校举办的新生编程赛</li> 61 <li>◆参加第九届河南省蓝桥杯大赛</li> 62 <li>◆参加第十届河南省蓝桥杯大赛</li>
63 <li>◆组织升达ACM宣讲会和新生培训</li> 64 <li>◆参加第十届河南省ACM大学生程序设计竞赛</li> 65 <li>
◆参加第十一届河南省ACM大学生程序设计竞赛</li> 66 <li>◆参加2018ACM亚洲区域赛青岛站</li> 67 <li>
◆参加2018ACM亚洲区域赛焦作站</li> 68 </ul> 69 </div> 70 71 <div id="right_up"> 72 <h4
>|自我介绍</h4> 73 <p>
我叫温飞飞，来自牡丹花城洛阳，现在是郑州升达经贸管理学院的一名在校大三学生，专业是物联网工程。为人真诚，性格沉稳，踏实肯干。喜欢互联网行业，在校期间热衷算法编程竞赛，如果志同道合，不妨交个朋友吧（hhhh）
</p> 74 </div> 75 <div id="right_down"> 76 <h4>|我的大学</h4> 77 <p>
郑州升达经贸管理学院（Zhengzhou Shengda University Of Economics,Business&
Management，ZSDU）简称“升达学院”，位于河南省新郑市，是豫籍台湾著名教育家王广亚博士捐资创办的一所全日制民办普通本科院校。 78
学校建于1993年，前身为郑州大学升达经贸管理学院，2011年4月更为现名。</p> 79 </div> 80 81 <div id="photo">
82 <h4>|最新照片</h4> 83 <div id="picslide" class="picslide05"> 84 <div class
="slides"> 85 <ul class="frame"> <li></li><li></li><li></li> </ul> 86 </div>
87 <ul class="content" style="display:none;"> 88 <li><a href="#" target="_self"
><img src="slide/img/tu1.png" alt="Happy Bokeh Thursday!" /></a></li> 89 <li><a
href="#" target="_self"><img src="slide/img/tu2.png" alt="Save my love for
loneliness" /></a></li> 90 <li><a href="#" target="_self"><img src
="slide/img/tu3.png" alt="Happy Bokeh raining Day" /></a></li> 91 <li><a href
="#" target="_self"><img src="slide/img/tu4.png" alt="We Eat Light" /></a></li>
92 <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> 93 </ul> 94 <div class="next"></div> 95 <div class="pre"></div> 96 <ul
class="pointer"> 97 <li class="on"></li> 98 <li></li><li></li><li></li><li></
li> 99 </ul> 100 </div> 101 102 <script type="text/javascript"> 103 $(function
() {104 $("#picslide").picslide05(); 105 }); 106 </script> 107 </div> 108 </
div> 109 <div id="bt">© 本网站版权为温飞飞所有</div> 110 </body> 111 </html>
View Code
　　CSS代码：
1 /*公共部分样式*/ 2 *{margin: 0px;padding: 0px;} 3 ul{list-style: none;} 4 body{
background: #d9d7cb url(../img/body_bg.PNG) repeat-y center;font-size: 12px;} 5
#top,#vi,#nav,#main,#bt{width: 779px;margin: 0px auto;} 6 #top,#bt{background:
#000;} 7 8 #top{height: 18px;padding-top: 5px;text-align: right;color: #fff;}
9 #top_txt{margin-right: 5px;} 10 #top_txt a{color: #fff;text-decoration: none
;}11 #top_txt a:visited{color: #fff;} 12 #top_txt a:hover{color: #ddd;} 13 #vi{
height: 110px; 14 background-color: 98a363; 15 background-image:
url(../img/top_bg.PNG); 16 opacity: 0.7; 17 background-repeat: no-repeat; 18
background-size: 779px 130px; 19 } 20 #tt{margin-left: 120px;text-indent:-40px;
line-height: 1.8em;font-size: 14px;font-weight: bold; } 21 22 #nav{height: 35px;
background: e6e4db;} 23 #nav ul{margin-left: 30px;} 24 #nav ul li{float: left;}
25 #nav ul a{display: block;width: 120px;height: 25px;padding-top: 10px;
text-decoration: none;letter-spacing: 8px;text-align: center; 26 color: #000;
font-size: 15px;font-weight: bold; } 27 #nav ul a:visited{color: #000;} 28 #nav
ul a:hover{color: 98a363;background: #fff;} 29 #nav ul li.bar{width: 6px;
padding-top: 12px;} 30 #main{height: 600px;background: #fff;} 31 32 /*主题内容*/ 33
#bt{margin-top: 0px; height: 30px;padding-top: 34px;text-align: center;color:
#fff;} View Code

热门工具换一换