大三上学期期末总结，嗯，没错，是上学期，写在新学期开始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">&nbsp;收藏本页&nbsp;</a>|<a href="#" target="_self">&nbsp;联系站长</a></div>

 </div>

 <div id="vi">

     <div id="tt">没有白走的路<br>每一步都算数<br></div>

 </div>

 <div id="nav">

     <ul>

         <li><a href="#" target="_self">&nbsp;&nbsp;首页</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>&nbsp;&nbsp;我叫温飞飞，来自牡丹花城洛阳，现在是郑州升达经贸管理学院的一名在校大三学生，专业是物联网工程。为人真诚，性格沉稳，踏实肯干。喜欢互联网行业，在校期间热衷算法编程竞赛，如果志同道合，不妨交个朋友吧（hhhh）</p>

     </div>

     <div id="right_down">

         <h4>|我的大学</h4>

         <p>&nbsp;&nbsp;郑州升达经贸管理学院（Zhengzhou Shengda University Of Economics,Business &amp 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="&ldquo;I must go down to the sea again, to the lonely sea and the sky...&rdquo;" /></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">&copy;&nbsp;本网站版权为温飞飞所有</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;}

Web前端课程设计——个人主页的更多相关文章

  1. 前后端分离之Web前端架构设计

    架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...

  2. 大型 web 前端架构设计-面向抽象编程入门

    https://mp.weixin.qq.com/s/GG6AtBz6KgNwplpaNXfggQ 大型 web 前端架构设计-面向抽象编程入门 曾探 腾讯技术工程 2021-01-04   依赖反转 ...

  3. 架构设计：前后端分离之Web前端架构设计

    在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分离的一种具体实现方案,该方案和我原来设想有 ...

  4. 前端开发工程师：网易web前端课程，价值1499元【无水印版】

    这套网上的朋友购买分享给我的,特此分享~ 让大家都受益 早日成为强大的web前端开发工程师!!赶紧回复下载吧 下载地址:http://fu83.cn/thread-172-1-1.html

  5. web前端页面设计小笔记

    input总是在点击的时候出现蓝色边框,这是input的默认属性,就算设置了border:none:也没有用! #解决方法:outline:none; 设置input框里的placeholder值得字 ...

  6. web前端 -- 页面设计小技巧

    1:进入网页时淡入淡出的效果. <meta http-equiv=”Page-Exit”; content=”blendTrans(Duration=1.0)”> 在头部head之间加入此 ...

  7. Web前端开发工程师课程大纲

    PHP程序员雷雪松整理出来的一套独一无二的Web前端开发课程.本套Web前端开发课程专门为想励志成为优秀web前端工程师的学习者而总结归纳的,本套Web前端课程舍弃了一些不常用的即将废弃的HTML标签 ...

  8. 范仁义web前端介绍课程---1、课程意义

    范仁义web前端介绍课程---1.课程意义 一.总结 一句话总结: 提供的这一整套学习方法和资源,配合艾宾浩斯遗忘曲线等各种复习.学习算法和后续会有的娱乐化学习方式,能否真正做到让学过的东西不再忘记. ...

  9. “设计型web前端与开发型web前端”有哪些区别？

    学web前端,你弄懂开发型web前端和设计型web前端的区别了吗?今天给大家梳理一下设计型web前端做什么?都要学习什么? 想必大家也会遇到这种情况,要做一个项目,产品经理说产品原型图已经画好了,让我 ...

随机推荐

  1. while read line 查找指定日期的文件夹

    #!/bin/bash dir=/root/tmp targetdir=/root/tmp/tmp filenametxt=/tmp/filename.txt commandtxt=/tmp/comm ...

  2. Android从入门到进阶——布局

    一.组件 1.UI组件 (Android.view.View的子类或者间接子类) 2.容器组件(Android.view.ViewGroup子类或者间接子类) 二.UI组件:TextView,Spin ...

  3. Prometheus Alert Rules with Some Metrics

    Using Prometheus as a monitor system, it is quite efficent. The most important one is that alert tem ...

  4. 在 npm 中使用 ES6 module

    node 从 v8.5.0起 支持了 ES6 module. 只需保存文件名为 .mjs ,并通过一个option 可以开启执行,如 node --experimental-modules index ...

  5. _ZNote_Window_技巧_删除开机启动项

    win + R 输入msconfig 可以打开

  6. jquery向Django后台发送数组

    在$.ajax中加入 traditional:true, //加上此项可以传数组 后端用 array = request.POST.getlist('ids') #django接收数组 来接收数组

  7. 安装xgboost

    http://blog.csdn.net/xizero00/article/details/73008330,python2.7 和python3.5 都可以安装成功.

  8. 26.HashCode

      在前面三篇博文中讲解了(HashMap.HashSet.HashTable),在其中不断地讲解他们的put和get方法,在这两个方法中计算key的hashCode应该是最重要也是最精华的部分,所以 ...

  9. js操作bom和dom

    Bom 概念 BOM : Browser Object Model 浏览器对象模型,描述与浏览器进行交互的方法和接 口, ECMAscript是javascript的核心,但如果要在web中使用jav ...

  10. [转] 如何用kaldi训练好的模型做特定任务的在线识别

    转自:http://blog.csdn.net/inger_h/article/details/52789339 在已经训练好模型的情况下,需要针对一个新任务做在线识别应该怎么做呢? 一种情况是,用已 ...