使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷(可換膚)
更新時(shí)間：2013年04月19日 16:52:41 投稿：whsnow
點(diǎn)擊姓名會(huì)顯示她的基本詳細(xì)信息，點(diǎn)擊切換皮膚，會(huì)更改皮膚和字體大小感興趣的朋友可以參考下本文如何使用jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)版的個(gè)人簡(jiǎn)歷
復(fù)制代碼 代碼如下:
<!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>個(gè)人簡(jiǎn)歷</h2></div>
<!--個(gè)人信息-->
<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">我的劇本，我導(dǎo)演</li>
<li>希望能加入互聯(lián)網(wǎng)公司，與一群熱愛(ài)互聯(lián)網(wǎng)的伙伴一起用產(chǎn)品改善生活。<img alt="" src="images/right.jpg" border="0"></li>
<li><font color="#999999">學(xué)校：河北軟件職業(yè)技術(shù)學(xué)院 軟件開(kāi)發(fā) （.net）</font></li>
</ul>
</div>
<!-- 基本信息-->
<!-- 個(gè)人簡(jiǎn)歷的信息-->
<div class="jianjie" title="zi">
團(tuán)隊(duì)合作能力和抗壓能力</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高級(jí)、
Xmal基礎(chǔ)、Flash制作 </td></tr>
</table>
</div>
<!-- 項(xiàng)目經(jīng)驗(yàn)-->
<div class="experience" title="zi">
<table id="tbEce" cellpadding="0" cellspacing="0" >
<tr><td colspan="2"><h3>項(xiàng)目實(shí)戰(zhàn)：</h3></td></tr>
<tr><td></td><td colspan="5">在校期間，多次參加項(xiàng)目實(shí)戰(zhàn)，模擬京東商城網(wǎng)站、CSDN學(xué)習(xí)大本營(yíng)、保百大樓、CSDN博客、學(xué)院圖書(shū)管理系統(tǒng)、掃雷游戲等。<br />
具體項(xiàng)目開(kāi)發(fā)內(nèi)容如下：<br />
項(xiàng)目名稱(chēng)：CSDN學(xué)習(xí)大本營(yíng)<br />
開(kāi)發(fā)規(guī)模：4人<br />
開(kāi)發(fā)環(huán)境：windows7<br />
開(kāi)發(fā)工具：VisualStudio2010、SQLsever2008<br />
開(kāi)發(fā)時(shí)間：一周<br />
責(zé)任描述：此次項(xiàng)目是模擬制作CSDN學(xué)習(xí)大本營(yíng)網(wǎng)站，本人在該項(xiàng)目中，主要負(fù)責(zé)實(shí)現(xiàn)網(wǎng)站的
登陸、注冊(cè)、教師作業(yè)的投放、學(xué)生提交作業(yè)等功能。<br />
項(xiàng)目收獲：通過(guò)該項(xiàng)目，已能夠熟練的對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作</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技術(shù)、ASP.NET技術(shù)、Win8應(yīng)用開(kāi)發(fā)</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">軟件開(kāi)發(fā)工程師、數(shù)據(jù)庫(kù)管理員、網(wǎng)站美編</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">點(diǎn)擊王靜靜會(huì)顯示全部信息，點(diǎn)擊更換皮膚，會(huì)改變背景色和字體大小</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
實(shí)現(xiàn)以下效果：
注：點(diǎn)擊姓名王靜靜會(huì)顯示她的基本詳細(xì)信息，點(diǎn)擊切換皮膚，會(huì)更改皮膚和字體大小
相關(guān)文章
最近做一個(gè)項(xiàng)目，許多功能都是關(guān)于彈出框的，在做的過(guò)程中發(fā)現(xiàn)會(huì)有好多自己考慮不到的問(wèn)題，下面以一個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-08-08
jquery1.4 教程一 便利的設(shè)置函數(shù)
jquery1.4已經(jīng)發(fā)布了，1.4相對(duì)于1.32的改進(jìn)還是非常巨大的，可以說(shuō)是全面性的，性能也全面超越了1.32。這一周，將一一展示jquery1.4的改進(jìn)，同時(shí)也會(huì)放出相應(yīng)的demo。2010-02-02
jQuery的animate函數(shù)學(xué)習(xí)記錄
jQuery.animate的每種動(dòng)畫(huà)過(guò)渡效果都是通過(guò)easing函數(shù)實(shí)現(xiàn)的，下面是自己研究之后對(duì)其的基本認(rèn)識(shí)2014-08-08
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細(xì)的分析了addClass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JQuery操作tr和td內(nèi)容的方法實(shí)例
本文介紹了“JQuery操作tr和td內(nèi)容的方法實(shí)例”，需要的朋友可以參考一下2013-03-03
jQuery EasyUI實(shí)現(xiàn)右鍵菜單變灰不可用效果
用jQuery實(shí)現(xiàn)了三種情況下的變灰不可用的效果，當(dāng)鼠標(biāo)放到上面點(diǎn)擊，右鍵菜單就會(huì)消失，其實(shí)解決的辦法也很簡(jiǎn)單，只要在對(duì)應(yīng)的單擊事件里重新綁定右鍵菜單即可，需要的朋友可以參考下2015-09-09
jquery中EasyUI實(shí)現(xiàn)異步樹(shù)
前面我們分享了使用jquery中EasyUI實(shí)現(xiàn)同步樹(shù)的代碼，本文我們就來(lái)看下使用EasyUI實(shí)現(xiàn)異步樹(shù)的方法和示例，希望小伙伴們能夠喜歡。2015-03-03
jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫(huà)基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
本文講解了JQuery切換顯示的效果實(shí)例代碼，需要的朋友可以參考一下2013-02-02
下面小編就為大家?guī)?lái)一篇淺談jquery之on()綁定事件和off()解除綁定事件。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10