使用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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
Sep 24 Javascript
JavaScript学习笔记之数组求和方法
Mar 23 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
简易的JS计算器实现代码
Oct 18 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
兼容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
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
ThinkPHP分页类使用详解
2014/03/05 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
javascript事件模型介绍
2016/05/31 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
基于webpack-hot-middleware热加载相关错误的解决方法
2018/02/22 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
Python中join和split用法实例
2015/04/14 Python
Python多进程机制实例详解
2015/07/02 Python
详解用python实现简单的遗传算法
2018/01/02 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python3中的json模块使用详解
2018/05/05 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
python模拟鼠标点击和键盘输入的操作
2019/08/04 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
测试工程师职业规划书
2014/02/06 职场文书
学校清明节活动总结
2014/07/04 职场文书
物理学专业求职信
2014/07/04 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
2014会计年终工作总结
2014/12/20 职场文书
大学生年度个人总结
2015/02/15 职场文书
财务年终工作总结大全
2019/06/20 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Python开发五子棋小游戏
2022/04/28 Python