大三上学期期末总结，嗯，没错，是上学期，写在新学期开始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. AIX X11卡顿严重

    在AIX上安装数据库,使用xshell开启dbca,发现卡顿严重,数据包也时断时续,排除掉网络问题,发现字符集采用的是中文,发现ftp服务业异常,将字符集修改成英语,重启机器,问题解决: 修改如下: ...

  2. 工程无法正常调试运行unknown failure at android.os.Binder.execTransact

    同事正常使用的工程,放到另电脑上,开后可以正常编译,但是无法安装调试到手机上,始终提示错误 新建一个工程正常. 最后通过把开发工具升级到最新版本解决.

  3. VS Code 之 smarty 扩展

    VS Code 中的 Smarty 扩展: https://github.com/imperez/vscode-smarty 目前(v0.2.0)不支持定制定界符.可以通过 trick 的方式篡改. ...

  4. C# WebAPI系列(2)

    上篇中简单介绍了一下WebApi,本章主要介绍一下Controller相关的知识. 在实际应用中,Controller是WebAPI的链接服务器和客户端的窗口.Controller的好坏影响整个系统的 ...

  5. JavaScript复习笔记——数据类型

    1.undefined 使用var声明但未对其进行初始化时,这个变量的值就是undefined. 对未被初始化的值使用typeof会返回undefined值,而对未声明的变量执行typeof操作同样也 ...

  6. 解决weblogic 部署环境后出现的乱码问题

    1.在startWebloci.cmd 中 set CLASSPATH=%SAVE_CLASSPATH% 下增加一行 JAVA_OPTIONS="${JAVA_OPTIONS} -Dfile ...

  7. 剑指offer面试题23：从上到下打印二叉树（树的层序遍历）

    题目:从上往下打印出二叉树的每个节点,同一层的结点按照从左往右的顺序打印. 解题思路:二叉树的层序遍历,在打印一个节点的时候,要把他的子节点保存起来打印第一层要把第二层的节点保存起来, 打印第二层要把 ...

  8. C 线性表的链式存储实现及插入、删除等操作示例

    一.链式存储的优势 线性表的存储可以通过顺序存储或链式存储实现,其中顺序存储基于数组实现(见本人上一篇博客),在进行插入删除等操作时,需对表内某一部分元素逐个移动,效率较低.而链式结构不依赖于地址连续 ...

  9. Mybatis框架六：关联查询

    这里搞一个测试场景: 用户和订单,一位用户可以有多个订单,而每个订单只属于一位用户 以用户为中心,相对于订单:一对多 以订单为中心,当对于用户:一对一 两张表结构: 订单表: 用户表: 对应的POJO ...

  10. Kubernetes 笔记 03 扫清概念

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...