提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery网页 实现 使用 换肤 个人简历
2023-06-13 09:14:50 时间
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<styletype="text/css">
body{font-size:13px;}
#divFrame{border:1pxsolid#666;height:1450px;width:750px;margin:auto;}
#divFrame.divHead{background-color:#eee;padding-top:30px;padding-left:125px;height:28px;}
#divFrame.divHeadh2{padding-left:200px}
#divFrame.divHeadh4{position:absolute;top:10px;left:730px}
#divFrame.divPhoto{padding-top:60px;padding-left:20px;width:100px;border:0pxsolidred;}
#divFrame.divContent{padding-left:200px;position:absolute;top:140px;border:0pxsolidblue;width:300px}
#divFrame.divContentul{list-style-type:none;margin:0px;}
#divFrame.divContentulli{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>
<scriptsrc="jquery-1.9.1.js"type="text/javascript"></script>
<scripttype="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>
<divid="divFrame"title="zi">
<divclass="divHead"><h2>个人简历</h2></div>
<!--个人信息-->
<divclass="Content"title="zi">
<divclass="divPhoto"><imgalt=""src="images/嘿嘿.jpg"width="150px"height="150px"/></div>
<divclass="divContent">
<h3style="padding-bottom:2px"><ahref="#">王静静</a></h3>
<h4style="position:absolute;top:0px;left:660px;width:80px;text-decoration:none"><ahref="#">切换皮肤</a></h4>
<ul>
<li><imgalt=""src="images/left.jpg"border="0">我的剧本，我导演</li>
<li>希望能加入互联网公司，与一群热爱互联网的伙伴一起用产品改善生活。<imgalt=""src="images/right.jpg"border="0"></li>
<li><fontcolor="#999999">学校：河北软件职业技术学院软件开发（.net）</font></li>
</ul>
</div>
<!--基本信息-->
<!--个人简历的信息-->
<divclass="jianjie"title="zi">
<h3>基本信息：</h3>
<tableid="tbStu"cellpadding="0"cellspacing="0"border="1pxsolidred">
<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><tdcolspan="5">适应能力比较强，能够较快的融入一个新的环境；能够很好地处理好与他人的关系，有较强的
团队合作能力和抗压能力</td></tr>
</table>
</div>
<!--主修课程-->
<divclass="subject"title="zi">
<tableid="tbSub"cellpadding="0"cellspacing="0"title="zi">
<tr><tdcolspan="2"><h3>主修课程：</h3></td></tr>
<tr><td></td><tdcolspan="5">Javascript课程、Html课程、C#课程、SQLServer、Css、ASP.net、ADO课程、ASP.NET高级、
Xmal基础、Flash制作</td></tr>
</table>
</div>
<!--项目经验-->
<divclass="experience"title="zi">
<tableid="tbEce"cellpadding="0"cellspacing="0">
<tr><tdcolspan="2"><h3>项目实战：</h3></td></tr>
<tr><td></td><tdcolspan="5">在校期间，多次参加项目实战，模拟京东商城网站、CSDN学习大本营、保百大楼、CSDN博客、学院图书管理系统、扫雷游戏等。<br/>
具体项目开发内容如下：<br/>
项目名称：CSDN学习大本营<br/>
开发规模：4人<br/>
开发环境：windows7<br/>
开发工具：VisualStudio2010、SQLsever2008<br/>
开发时间：一周<br/>
责任描述：此次项目是模拟制作CSDN学习大本营网站，本人在该项目中，主要负责实现网站的
登陆、注册、教师作业的投放、学生提交作业等功能。<br/>
项目收获：通过该项目，已能够熟练的对数据库进行操作</td></tr>
</table>
</div>
<!--掌握技能-->
<divclass="jineng"title="zi">
<tableid="Table1"cellpadding="0"cellspacing="0">
<tr><tdcolspan="2"><h3>掌握技能：</h3></td></tr>
<tr><td></td><tdcolspan="5">ADO技能、SQLServer技术、ASP.NET技术、Win8应用开发</td></tr>
</table>
</div>
<!--求职意向-->
<divclass="yixiang"title="zi">
<tableid="Table2"cellpadding="0"cellspacing="0">
<tr><tdcolspan="2"><h3>求职意向：</h3></td></tr>
<tr><td></td><tdcolspan="5">软件开发工程师、数据库管理员、网站美编</td></tr>
</table>
</div>
<divclass="zhushi"title="zi">
<tableid="Table3"cellpadding="0"cellspacing="0">
<tr><tdcolspan="2"><h3>信息提示：</h3></td></tr>
<tr><td></td><tdcolspan="5">点击王静静会显示全部信息，点击更换皮肤，会改变背景色和字体大小</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>

实现以下效果：
 
注：点击姓名王静静会显示她的基本详细信息，点击切换皮肤，会更改皮肤和字体大小

相关文章