大三上学期期末总结，嗯，没错，是上学期，写在新学期开始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. Stanford CS20学习笔记

    Lecture Note 2 Tensorboard P3 Data Structures P4 Math Operations P6 Data Types P7 tf native &&am ...

  2. gulp使用详解

    前面整理了 gulp使用入门,本节介绍相关的压缩 1.压缩js文件 步骤同基础步骤,相关可以看入门篇 npm install gulp-uglify --save-dev 引入js压缩库 gulpfi ...

  3. 防范 SQL 注入攻击

     防范 SQL 注入攻击 我们执行的 SQL语句中包含变量,执行的时候会直接把变量内容替换进去.而如果攻击者在输入框中输入一些危险的字符(通常包含 SQL 注释符 --,以及其他预先精心设置的内容), ...

  4. 《DevOps软件架构师行动指南》读后感

    从软件架构师视角讲解了引入DevOps实践所需要拥有的技术能力,涵盖运维.部署流水线.监控.安全与审计以及质量关注,这是本书一开始内容简介的开头,本书的作者是伦恩·拜斯(Len Bass).英戈·韦伯 ...

  5. idea jetty 配置

    一.jetty 网址下载地:https://www.eclipse.org/jetty/ 1.如下图红色箭头--> 点击Downloads 下载 2.选择最新版 .ZIP 下载 3.选择安装路径 ...

  6. ie页面数据导入共享版

    为了解决自动输入号码的正确率,原来的版本一直采用鼠标检测的方法.但是这个方法在其他ie平台的使用不太方便.于是直接检测ie的方法.现在的这个版本完全不需要鼠标的检测.方便而且快速精准可靠. 经过作者的 ...

  7. python基础自学 第二天

    注释 分类 单行注释 多行注释 作用 使用自己熟悉的语言,在程序中对某些代码进行标注说明,增强程序可读性 单行注释(行注释) 以 # 开头,#右边所有的东西就被当成说明文字,而不是要执行的程序,只是说 ...

  8. 简单操作django中session和cookie

    cookie 1.会话技术 2.客户端的会话技术( 数据库保存在浏览器上) 3.问题导致原因: 在web应用中,一次网络请求是从request开始,到response结束,跟以后的请求或者跟其他请求没 ...

  9. nodejs常用代码片段

    自动创建目录(多级) 相比起使用递归创建,调用 sheljsl 模块简单得多 const shell = require('shelljs') const fs = require('fs') if ...

  10. 9.视差特效、回弹动画、overScrollBy

    视差特效 * 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹* 功能实现: > 1. 重写overScrollBy > 2. 松手之后执行动画, 类型估值器 .  ...