1. 程式人生 > >使用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>

[email protected]</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>

實現以下效果:

注:點選姓名王靜靜會顯示她的基本詳細資訊,點選切換面板,會更改面板和字型大小

相關推薦

Vue+Element實現網頁個人簡歷系統

    這篇文章介紹一個使用Vue+Element實現的個人簡歷系統,主要用到的技術有:vue、element、css3、css定位。   作者在window10進行開發,目前只在chrome上進行過測試,沒有大的毛病。但是還有很多小功能還不完善,程式碼也未進行優化,後續會繼續完善功能,優化

用HTML5實現網頁簡歷

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>個人簡歷</title>     <st

jQuery實現網頁右下角懸浮層提示

off eight slide ring height containe htm enter else 最近有同事提到類似網頁右下角的消息懸浮提示框的制作。我之前也做過一個類似的例子,很簡單。是仿QQ消息。現在感覺之前的那個例子只是說了實現原理,整體上給你的感覺還是太醜,今

WebRTC實現網頁多人視訊聊天室

因為產品中要加入網頁中網路會議的功能,這幾天都在倒騰 WebRTC,現在分享下工作成果。 話說 WebRTC Real Time Communication 簡稱 RTC,是谷歌若干年前收購的一項技術,後來把這項技術應用到瀏覽器中並開源出來,而且搞了一套標準提交給W3C,稱為WebRTC,官方

用python3實現網頁raspberry pi(樹莓派)小車控制

目錄 關於樹莓派四驅小車的運動方向控制、攝像頭方向控制已經在前面的兩篇博文中介紹過。有需要的可以參考。本文也是基於上述兩個python檔案就緒的情況進行的。 本文主要講述我是如何實現通過網頁實現小車控制的。當前的實現方式比較簡陋,只能支援控制網頁和樹莓派在

js+jQuery實現網頁打字機效果(帶游標)

在寫網站的時候,有時候可能需要打字機動畫去實現一些頁面效果的顯示,我在網上找了很久也沒有很完整的,符合我要求的程式碼,索性就結合網上的大神們的程式碼段自己寫了一個 HTML <div clas

jquery 實現網頁端圖片等比縮放

一、實現原理 1.固定區域 規定圖片顯示區域大小,例如200px * 200px,最終縮放後圖片不會超出該範圍。 2.圖片尺寸 需要獲取到圖片的高度和寬度,(注意:當然圖片未載入完成,

jquery實現網頁選項卡

這個功能在現在的網站中使用較為普遍,就是以選項卡的形式來對一些內容做了分類。,比如下面的天貓商城。 下面的原始碼是仿照天貓寫的一個選項卡,實現起來的效果如下。 主要是利用我們在點選相應板塊是觸發它的單擊事件,在單擊事件中再對內容顯示框(tabbox)進行相應項的顯示和隱

JQuery實現網頁上時間動態顯示

網頁上實現時間顯示,是JQuery中最簡單的一個小功能。需要注意的是儘量不要使用遞迴呼叫,否則 網頁開啟的時間一長就會造成記憶體洩露。 實現程式碼 如下: <!DOCTYPE html> <html lang="en" xmlns="http://www.

使用jQuery實現網頁個人簡歷

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JAVA開發 微信個人號 小機器人的實現 java封裝微信網頁

依賴於開源專案,GIT地址:https://github.com/biezhi/wechat-api 程式碼中有一些bug,需要自己改一改,然後就可以構建小機器人了 開發中遇到的棘手的問題,在拉取訊息的時候,視訊(VIDEO)格式的資料拉取不到,為空,經過嗅探,發現在訪問

軟件工程個人作業03-網頁四則運算

ktr delete dex earch encoding ava cte nts idt 設計思想:   1 輸入算數的題目數   2顯示算式(用類封裝產生算式和結果的功能)(寫入數據庫)   3使用者填寫答案   4接收答案,與數據庫中的答案比較   5返回結果 源代碼

jQuery實現表格行的動態增加與刪除(改進)

ans XML 隱藏域 locks 頁面 order blog 這樣的 ken 之前寫過一個簡單的利用jQuery實現表格行的動態增加與刪除的例子,有些人評論說"如果表格中是input元素,那麽刪除後的東西都將自動替換,這樣應該是有問題的,建議樓主改進!",故特意改進了一下

jquery實現圖片無縫滾動,蒙遮蔽效果

1、無縫連線:通過對li設定屬性float:left;消除標籤之間的間隔 2、通過對ul整體進行偏移設定,使圖片整體滾動, 3、設定圖片切換時機, 4、蒙版遮罩移入時機的選擇 程式碼片. <!DOCTYPE html> <html> <head>

jquery實現網頁底部到網頁頂部的程式碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <t

SSM+WebSocket實現一個簡易網頁通訊工具

編譯環境:jdk1.8 , tomcat8.0+ , IDEA 這裡主要講一下websocket的資訊傳遞,以如何實現多人實時線上聊天為例: websocket主要的三個類 MyWebSocketConfig主要負責配置websocket的處理器和握手攔截器 MyHandSha

Jquery.media.js實現網頁線上預覽pdf檔案

近期在工作中遇到了需要在網站預覽pdf檔案的需求,網上的資料很多,我使用了其中一種,即使用 Jquery.media.js包實現。 首先需要準備兩個內容: 1,jquery.js,任意版本 2,jquery.media.js,可以從網上搜,或者去下面我提供的地方下載(是我上傳的),

jquery實現同時展示多個tab標籤+左右箭頭實現來回滾動(美化增加刪除按鈕)

 閒聊        前段時間小穎分享了:jquery實現同時展示多個tab標籤+左右箭頭實現來回滾動文章,引入專案後,我們的組長說樣子太醜了,小穎覺得還好啊,要不大家評評理,看下醜不醜?無圖無真相,來上圖:   

jquery實現圖片向左慢慢輪播(滑鼠懸停圖片停止輪播

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

ECharts 打造線上個人簡歷 【升級

Create by jsliang on 2018-12-11 10:21:27 Recently revised in 2018-12-11 11:57:43  在發表文章 ECharts 打造線上個人簡歷 (GitHub版 / 掘金版) 後,迎來了各位大佬的吐槽: 根本沒有一點技術