使用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中对对层的控制
Dec 29 Javascript
Prototype使用指南之base.js
Jan 10 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
Aug 19 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
Mar 10 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
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
php 常用算法和时间复杂度
2013/07/01 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
2014/01/02 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
2017/12/14 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
python列表生成式与列表生成器的使用
2018/02/23 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python 伯努利分布详解
2020/02/25 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
python regex库实例用法总结
2021/01/03 Python
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
销售高级职员求职信
2013/10/29 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
主题实践活动总结
2014/05/08 职场文书
项目验收申请报告
2015/05/15 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技