使用jQuery实现的网页版的个人简历(可换肤)


Posted in Javascript onApril 19, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
body{ font-size:13px;} 
#divFrame{ border:1px solid #666; height:1450px; width:750px; margin:auto;} 
#divFrame .divHead{ background-color:#eee; padding-top:30px; padding-left:125px; height:28px;} 
#divFrame .divHead h2{ padding-left:200px} 
#divFrame .divHead h4{ position:absolute;top:10px; left:730px} 
#divFrame .divPhoto{ padding-top:60px; padding-left:20px; width:100px; border:0px solid red;} 
#divFrame .divContent{ padding-left:200px; position:absolute; top:140px; border:0px solid blue ; width:300px} 
#divFrame .divContent ul { list-style-type:none; margin:0px;} 
#divFrame .divContent ul li{list-style-type:none;padding-top:5px; padding-bottom:5px } 
#divFrame .jianjie{ margin-top:150px; font-size:13px; display:none;} 
#divFrame .experience{ margin-top:30px; font-size:13px;} 
#divFrame .subject{ margin-top:30px; font-size:13px;} 
#divFrame .jineng{ margin-top:30px; font-size:13px;} 
#divFrame .yixiang{ margin-top:30px; font-size:13px;} 
#divFrame . zhushi{ margin-top:90px; font-size:13px;} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('.divContent>h3').click(function () { 
$('.jianjie').show(3000); 
}); 
$('.divContent>h4').click(function () { 
$('#divFrame').css('background-color', '#666'); 
$('div[title=zi]').css('font-size', '16px') 
}); 
}) 
</script> 
</head> 
<body> 
<div id="divFrame" title="zi"> 
<div class="divHead"><h2>个人简历</h2></div> 
<!--个人信息--> 
<div class="Content" title="zi"> 
<div class="divPhoto"><img alt="" src="images/嘿嘿.jpg" width="150px" height="150px"/></div> 
<div class="divContent"> 
<h3 style="padding-bottom:2px"><a href="#">王静静</a></h3> 
<h4 style=" position:absolute;top:0px; left:660px; width:80px; text-decoration:none"><a href="#">切换皮肤</a></h4> 
<ul> 
<li><img alt="" src="images/left.jpg" border="0">我的剧本,我导演</li> 
<li>希望能加入互联网公司,与一群热爱互联网的伙伴一起用产品改善生活。<img alt="" src="images/right.jpg" border="0"></li> 
<li><font color="#999999">学校:河北软件职业技术学院 软件开发 (.net)</font></li> 
</ul> 
</div> 
<!-- 基本信息--> 
<!-- 个人简历的信息--> 
<div class="jianjie" title="zi"> 
<h3>基本信息:</h3> 
<table id="tbStu" cellpadding="0" cellspacing="0" border="1px solid red" > 
<tr><td>姓名:</td><td>王静静</td><td>性别:</td><td>女</td><td>出生年月:</td><td>1991-12-14</td></tr> 
<tr><td>籍贯:</td><td>河北省河间市尊祖庄乡</td><td>民族:</td><td>汉</td><td>身体状况:</td><td>良好</td></tr> 
<tr><td>政治面貌:</td><td>团员</td><td>学历:</td><td>大专</td><td>外语水平:</td><td>可以进行基本的英语对话</td></tr> 
<tr><td>所学专业:</td><td>软件开发</td><td>兴趣特长:</td><td>读书、唱歌</td><td>家庭住址:</td><td>河北省沧州市</td></tr> 
<tr><td>联系电话:</td><td>15031259715</td><td>邮编:</td><td>071000</td><td>Email:</td><td>elaineJJ123@126.com</td></tr> 
<tr><td>自我评价:</td><td colspan="5">适应能力比较强,能够较快的融入一个新的环境;能够很好地处理好与他人的关系,有较强的 
团队合作能力和抗压能力</td></tr> 
</table> 
</div> 
<!-- 主修课程--> 
<div class="subject" title="zi"> 
<table id="tbSub" cellpadding="0" cellspacing="0" title="zi"> 
<tr><td colspan="2"><h3>主修课程:</h3></td></tr> 
<tr><td></td><td colspan="5">Javascript课程、Html课程、C#课程、SQLServer、Css、ASP.net、ADO课程、ASP.NET高级、 
Xmal基础、Flash制作 </td></tr> 
</table> 
</div> 
<!-- 项目经验--> 
<div class="experience" title="zi"> 
<table id="tbEce" cellpadding="0" cellspacing="0" > 
<tr><td colspan="2"><h3>项目实战:</h3></td></tr> 
<tr><td></td><td colspan="5">在校期间,多次参加项目实战,模拟京东商城网站、CSDN学习大本营、保百大楼、CSDN博客、学院图书管理系统、扫雷游戏等。<br /> 
具体项目开发内容如下:<br /> 
项目名称:CSDN学习大本营<br /> 
开发规模:4人<br /> 
开发环境:windows7<br /> 
开发工具:VisualStudio2010、SQLsever2008<br /> 
开发时间:一周<br /> 
责任描述:此次项目是模拟制作CSDN学习大本营网站,本人在该项目中,主要负责实现网站的 
登陆、注册、教师作业的投放、学生提交作业等功能。<br /> 
项目收获:通过该项目,已能够熟练的对数据库进行操作</td></tr> 
</table> 
</div> 
<!-- 掌握技能--> 
<div class="jineng" title="zi"> 
<table id="Table1" cellpadding="0" cellspacing="0" > 
<tr><td colspan="2"><h3>掌握技能:</h3></td></tr> 
<tr><td></td><td colspan="5">ADO技能、SQL Server技术、ASP.NET技术、Win8应用开发</td></tr> 
</table> 
</div> 
<!-- 求职意向--> 
<div class="yixiang" title="zi"> 
<table id="Table2" cellpadding="0" cellspacing="0" > 
<tr><td colspan="2"><h3>求职意向:</h3></td></tr> 
<tr><td></td><td colspan="5">软件开发工程师、数据库管理员、网站美编</td></tr> 
</table> 
</div> 
<div class="zhushi" title="zi"> 
<table id="Table3" cellpadding="0" cellspacing="0" > 
<tr><td colspan="2"><h3>信息提示:</h3></td></tr> 
<tr><td></td><td colspan="5">点击王静静会显示全部信息,点击更换皮肤,会改变背景色和字体大小</td></tr> 
</table> 
</div> 
</div> 
</div> 
</body> 
</html>

实现以下效果:
使用jQuery实现的网页版的个人简历(可换肤) 
注:点击姓名王静静会显示她的基本详细信息,点击切换皮肤,会更改皮肤和字体大小
Javascript 相关文章推荐
JavaScript的Cookies
Jan 16 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
Sep 10 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 #Javascript
JS实现div内部的文字或图片自动循环滚动代码
Apr 19 #Javascript
Jquery实现页面加载时弹出对话框代码
Apr 19 #Javascript
jQuery阻止同类型事件小结
Apr 19 #Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 #Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 #Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 #Javascript
You might like
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
php zend解密软件绿色版测试可用
2008/04/14 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
自适应高度框架 ----属个人收藏内容
2007/01/22 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
js函数般调用正则
2008/04/08 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
jQuery快速高效制作网页交互特效
2017/02/24 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python绘制简单折线图代码示例
2017/12/19 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python根据服务获取端口号的方法
2019/09/25 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
给护士表扬信
2014/01/19 职场文书
思想品德课教学反思
2014/02/10 职场文书
工厂搬迁方案
2014/05/11 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
通用员工手册范本
2015/05/14 职场文书
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
MySQL事务操作的四大特性以及并发事务问题
2022/04/12 MySQL