金三銀四，筆者最近都在忙着找實習，奈何技術是硬傷，目前顆粒無收。痛定思痛，反思過后，筆者覺得有必要弄一個個人網頁版的簡歷，這樣一來去面試的時候不至於作品過少，又可以使得個人簡歷生動一點。
搗鼓了兩天，個人網頁的雛形基本搞定，以下是網頁截圖，因為涉及到個人信息，部分地方馬賽克了哈哈希望讀者們理解。
主頁：導航欄由主頁、前端情況、大學學習情況、大學生活情況、還有社交聯系方式以及個人頭像右浮動組成，內容則由居中的個人姓名、簡要的個人概況組成，點擊底部的箭頭可到達前端情況頁面，也可選擇點擊導航欄或者滾動鼠標到達任意想要了解的個人信息部分
接下來就是前端、學習、生活三個小節的頁面，每一個小節我都給定一個小高度使得三個環節可以一覽無余，每一個小環節的結構大同小異，基本上是由一張代表圖片還有比較重要要在第一眼展示的信息組成，當然如果相關信息較多的話，這可能還不夠完全展示個人信息，所以我在每一小節底部增加一個名為“詳情”的鏈接，這使得想要了解相關部分更多信息的訪客可以點擊了解更多。
點擊“詳情”了解更多的效果如下，在這里我使用一個自己編寫的腳本，使得點擊相應鏈接的時候彈出一個小浮窗，背景均變為透明以及不可點擊，查閱完相關信息后點擊關閉按鈕才可以回到原本的頁面，這么設計就是為了減少頁面跳轉加載，減少用戶等待頁面跳轉刷新的時間：
最后的社交聯系方式還有頁面底部效果如圖：
大致的頁面就是這樣啦啦啦。
遇見的問題以及需要改進的問題：
1.因為中間三部分大同小異，但是具體內容還是有區別，我在設計樣式還有js動畫的時候畫了好多時間，涉及到的類別區分實在太擾人，雖然暫時大致把效果實現了，我還是得花時間再去把代碼優化一下，要不總體代碼風格會重復累贅，加油騷年；
2.筆者決定在實現代碼優化之后，想將中間三部分點擊浮現小彈窗的效果改為鼠標放在相應環節上的時候該區域變透明表面浮現一層具體信息，鼠標移開后又變回原來的內容，希望能早點實現吧
代碼就不完全貼出來了，貼個框架和js動畫腳本吧：
<!DOCTYPE HTML> <meta charset="UTF-8"> <html> <head> <title> </title> <link rel="shortcut icon" href="./img/zxp.ico" /> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"</script> <script type="text/javascript"> </script> </head> <body> <div class="part1"> <div class="nav"> <ul> <li><img src="./img/head.png"></li> <div class="li"> <li><a href="#footer">社交</a></li> <li><a href="#part5">生活</a></li> <li><a href="#part4">學習</a></li> <li><a href="#part3">前端</a></li> <li><a href="#">首頁</a></li> </div> </ul> </div> <div class="header"> </div> </div> <span id="part3" name="part3"></span> <div class="part3"> </div> <span id="part4" name="part4"></span> <div class="part4"> </div> <span id="part5" name="part5"></span> <div class="part5"> </div> <div class="part2"> <span id="part2" name="part2"></span> </div> <div class="footer"> <span id="footer" name="footer"> <h3>@copyright by chopin chuong</h3> </span> </div> </body> </html>
js代碼如下：
<script type="text/javascript">
$(document).ready(function($){
$('.theme-login').click(function(){
$('.theme-popover-mask').show();
$('.theme-popover-mask').height($(document).height());
$('.theme-popover').slideDown(200);
})
$('.theme-poptit .close').click(function(){
$('.theme-popover-mask').hide();
$('.theme-popover').slideUp(200);
})
});
</script>
對頁面改進有想法的朋友歡迎提供想法哦~