大三上学期期末总结，嗯，没错，是上学期，写在新学期开始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. Day05 (黑客成长日记) 文件操作系列

    文件操作: 1.以什么编码方式输出,就以什么编码方式打开 f = open('d:\文件操作.txt',mode='r',encoding='GB2312') G = f.read() print(G ...

  2. h5的改进:

    新元素画布canvas: HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成音频audio视频video语义性: article,  nav ...

  3. Python3.* 和Python2.*的区别

    许多Python初学者都会问:我应该学习哪个版本的Python.对于这个问题,我的回答通常是“先选择一个最适合你的Python教程,教程中使用哪个版本的Python,你就用那个版本.等学得差不多了,再 ...

  4. MyBatis逆向工程自动生成代码

    MyBatis逆向工程根据数据库表自动生成mapper.xml,entity类,mapper类,简直不要 太方便好嘛 下面贴上关键配置代码,以免以后找不到 generator.xml <?xml ...

  5. ACM计划

    原文 :http://027xbc.blog.163.com/blog/static/128159658201141371343475/ ACM主要是考算法的,主要时间是花在思考算法上,不是花在写程序 ...

  6. MFC对话框和属性表

    对话框主要有两类,分为模式和无模式,它们的功能都被封装在了CDialog中.与对话框相近的是属性表,属性表实际上是具有制表页(TAB 页)的对话框,将对话框中控件更好的组织在一起.借助Cpropert ...

  7. 使用Spring+MySql实现读写分离（二）spring整合多数据库

    紧接着上一章,因为现在做的项目还是以spring为主要的容器管理框架,所以写以下spring如何整合多个数据源. 1. 背景 我们一般应用对数据库而言都是“读多写少”,也就说对数据库读取数据的压力比较 ...

  8. JavaScript 高性能数组去重

    中午和同事吃饭,席间讨论到数组去重这一问题 我立刻就分享了我常用的一个去重方法,随即被老大指出这个方法效率不高 回家后我自己测试了一下,发现那个方法确实很慢 于是就有了这一次的高性能数组去重研究 一. ...

  9. TX-LCN分布式事务Demo实战

    1. TX-LCN分布式事务Demo实战 1.1. 原理介绍 1.1.1. 事务控制原理 TX-LCN由两大模块组成, TxClient.TxManager,TxClient作为模块的依赖框架,提供T ...

  10. VS Code 快捷键大全

    前言 VSCode的快捷键继承了一些IDE风格,有VS的身影,也有Emacs的身影..简言之,内置快捷键玩熟了,效率提高不是一点两点. VsCode 快捷键有五种组合方式(科普) 通用快捷键 基础编辑 ...