使用jQuery實現的網頁版的個人簡歷(可換膚)
編輯：JQuery特效代碼
代碼 代碼如下:
<!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>
實現以下效果：
注：點擊姓名王靜靜會顯示她的基本詳細信息，點擊切換皮膚，會更改皮膚和字體大小
<!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>
實現以下效果：
注：點擊姓名王靜靜會顯示她的基本詳細信息，點擊切換皮膚，會更改皮膚和字體大小
小編推薦
熱門推薦