使用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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
通过扫描二维码打开app的实现代码
Nov 10 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
React Native 搭建开发环境的方法步骤
Oct 30 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
js单词形式的运算符
2014/05/06 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
几种tab切换详解
2017/02/03 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
微信小程序pinker组件使用实现自动相减日期
2020/05/07 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
Windows上使用Python增加或删除权限的方法
2018/04/24 Python
python组合无重复三位数的实例
2018/11/13 Python
python读写csv文件并增加行列的实例代码
2019/08/01 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Python 获取项目根路径的代码
2019/09/27 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
FLIR美国官网:热成像, 夜视和红外摄像系统
2018/07/13 全球购物
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
报关专员求职信范文
2014/02/22 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
活动总结报告范文
2014/05/04 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js