您當前位置：首頁 > web前端 > htmlcss > 用HTML+CSS+MOOTOOLS寫的簡歷

用HTML+CSS+MOOTOOLS寫的簡歷

來源：程序員人生發布時間：2013-12-05 19:15:06 閱讀次數：4789次

　　很快就要找工作了，最近比較閑，于是把寫了個在線網頁版簡歷。水平有限，肯定不少錯誤。幸好藍色強人多，希望發這里來希望可以拿點意見。

　　我不能像大大們那樣用純js寫效果，只能用mootools來寫了。

　　極端希望大家給點意見，我發現自己好像很多自己總結的知識不一定對的。有興趣的朋友可以留言索取整個實例源碼。

　　在線測試地址：http://xiebiji.com/works/resume/

　　HTML代碼(運行為無js無css狀態網頁)：

<!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><meta http-equiv="Content-Type" content="text/html; charset=gbk" /><meta name="description" lang="zh-CN" xml:lang="zh-CN" content="周桂華的簡歷,一個熱衷于互聯網網頁創作的人的在線簡歷." /><meta name="keywords" lang="zh-CN" xml:lang="zh-CN" content="周桂華,簡歷,HTML,CSS,重構,web,網頁,互聯網" /><meta name="Author" lang="en" xml:lang="en" content="Joe Zhou" /><title>周桂華的簡歷在線版</title><link media="screen" rel="stylesheet" type="text/css" href="http://xiebiji.com/works/resume/style-blue.css"/><link media="print" rel="stylesheet" type="text/css" href="http://xiebiji.com/works/resume/print.css"/><style media="screen" type="text/css">.header .summary .base, .header .summary .topMap {-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;}</style></head><body><div class="header"><h1 id="title"><a class="url" href="http://xiebiji.com" _fcksavedurl="http://xiebiji.com" rel="me">周桂華</a><<span class="nickname">joe</span>/>的簡歷</h1><div class="summary"><ul class="base vcard"><li class="photo"><img src="me.jpg" _fcksavedurl="me.jpg" alt="photo of" class="photo" /></li><li><strong>姓名: </strong><span class="fn n"><span class="family-name">周</span><span class="given-name">桂華</span></span></li><li><strong>英文名: </strong><span class="n nickname">Joe</span></li><li><strong>籍貫: </strong><span class="adr"><span class="locality">中山市</span>,<span class="region">廣東省</span> <span class="countryname">中國</span></span></li><li><strong>手機: </strong><span class="tel">13828495274</span></li><li class="internet"><strong>個人主頁: </strong><a class="url" href="http://xiebiji.com" _fcksavedurl="http://xiebiji.com" rel="me">http://xiebiji.com</a></li><li class="internet"><strong>郵箱/MSN: </strong><a class="email" href="mailto:joe@xiebiji.com" _fcksavedurl="mailto:joe@xiebiji.com">joe@xiebiji.com</a></li></ul><ul class="topMap"><li><a class="mapSelected" href="#summary" _fcksavedurl="#summary">自我評價</a></li><li><a href="#expertation" _fcksavedurl="#expertation">求職意向</a></li><li><a href="#education" _fcksavedurl="#education">教育經歷</a></li><li><a href="#history" _fcksavedurl="#history">項目經驗</a></li><li><a href="#exprience" _fcksavedurl="#exprience">實習經歷</a></li><li><a href="#skills" _fcksavedurl="#skills">技能掌握</a></li></ul></div></div><div class="hresume"><h2 id="summary">自我評價</h2><ul class="hreview"><li class="title"><span class="item"><span class="type">person</span></span>Reviewed by <span class="reviewer vcard"><span class="fn">周桂華</span></span></li><li><h3>學無拘束：</h3>熱愛互聯網技術，對喜歡的極力去學，不喜歡的也不抗拒;</li><li><h3>專我所能：</h3>專注并能夠手寫符合w3c標準的HTML代碼和css代碼，同時學習網頁設計和后臺程序編程，可獨立建小型php站;</li><li><h3>座右銘：</h3>要有所作為最基本的要素就是要勤奮。</li></ul><h2 id="expertation">求職意向</h2><ul class="summary expertation"><li><h3>意向職位：</h3>網頁重構工程師、Web前端開發工程師</li><li><h3>工作性質：</h3>實習或全職</li><li><h3>意向地點：</h3>中山市、廣州市、深圳市</li></ul><h2 id="education">教育經歷</h2><ul class="education vcalendar"><li class="education vevent vcard"><h3 class="htitle"> <span class="summary">2010應屆畢業電子商務經濟學位本科</span> <span class="org">廣東外語外貿大學</span> </h3><div class="date_duration"><abbr class="dtstart" title="2008-09-01">September 2006</abbr> - <abbr class="dtend" title="2010-9-01">June 2010</abbr></div></li></ul><h2 id="history">項目經驗</h2><ul class="history vcalendar"><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://xgh-moto.com/" _fcksavedurl="http://xgh-moto.com/" rel="external"><span class="org summary">新光輝摩托車配件有限公司</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2009-05-01">May 2009</abbr> - <abbr class="dtend" title="2009-8-01">Auguest 2009</abbr></div><p class="description"><strong class="category">[整站開發]</strong> 負責整站設計（前臺設計、切割、特效，后臺FLEAPHP開發）</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://xiebiji.com/works/moto" _fcksavedurl="http://xiebiji.com/works/moto" rel="external"><span class="org summary">Stars Road Models 公司</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2008-05-01">May 2008</abbr> - <abbr class="dtend" title="2008-8-01">Auguest 2008</abbr></div><p class="description"><strong class="category">[整站開發]</strong> 負責整站設計（前臺設計、切割、特效，后臺FLEAPHP開發）</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://xiebiji.com/works/moto" _fcksavedurl="http://xiebiji.com/works/moto" rel="external"><span class="org summary">個人主頁第二版</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2007-05-01">May 2007</abbr> - <abbr class="dtend" title="2007-8-01">Auguest 2007</abbr></div><p class="description"><strong class="category">[整站開發]</strong> 基于博客系統WordPress的二次整站開發，PR4,負責整站創作，原創風格主題</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://xiebiji.com/works/yuexiu" _fcksavedurl="http://xiebiji.com/works/yuexiu" rel="external"><span class="org summary">廣州市越秀區藝術文化中心</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2009-05-01">May 2009</abbr> - <abbr class="dtend" title="2009-8-01">Auguestr 2009</abbr></div><p class="description"><strong class="category">[網頁設計、頁面重構]</strong> 負責首頁頁面設計，特效、切割維護</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://i-wui.com" _fcksavedurl="http://i-wui.com" rel="external"><span class="org summary">i-Wui Team 艾維前端工作室</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2009-01-01">January 2009</abbr> - <abbr class="dtend" title="2009-4-01">April 2009</abbr></div><p class="description"><strong class="category">[網頁設計、頁面重構]</strong> 擔任主要創始人，從事頁面重構，網站架構等工作</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://www.bandrm.com" _fcksavedurl="http://www.bandrm.com" rel="external"><span class="org summary">香港 Band 房資料庫</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2009-01-01">January 2009</abbr> - <abbr class="dtend" title="2009-4-01">April 2009</abbr></div><p class="description"><strong class="category">[網頁設計、頁面重構]</strong> 負責網站整站頁面設計，切割維護。</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://velocitywaterpark.com/Joe/pms/" _fcksavedurl="http://velocitywaterpark.com/Joe/pms/" rel="external"><span class="org summary">Project Management System</span></a> </h3><div class="date_duration"><abbr class="dtstart" title="2009-01-01">January 2009</abbr> - <abbr class="dtend" title="2009-4-01">April 2009</abbr></div><p class="description"><strong class="category">[后臺編程]</strong> 一個公司內部用，小型項目管理系統，多角色多權限控制。</p></li><li class="education vevent vcard"><h3 class="htitle"><a class="url" href="http://velocitywaterpark.com/Joe/ihs/" _fcksavedurl="http://velocitywaterpark.com/Joe/ihs/" rel="external"><span class="org summary">IHS Helpdesk System</span></a> </h3><div class="date_duration"><abbr class="dtend" title="2009-1-01">December</abbr><abbr class="dtstart" title="2008-12-01"> 2008</abbr> - <abbr class="dtend" title="2009-1-01">January 2009</abbr></div><p class="description"><strong class="category">[后臺編程]</strong>一個公司內部用，員工faq交流系統，多角色多權限控制。</p></li></ul><h2 id="exprience">實習經歷</h2><ul class="exprience vcalendar"><li class="education vevent vcard"><h3 class="org summary"><a href="http://aaechina.cn" _fcksavedurl="http://aaechina.cn" rel="employer former">廣州高登基信息咨詢公司</a></h3><div class="date_duration"><abbr class="dtstart" title="2009-07-18">June 2009</abbr> - <abbr class="dtend" title="2009-11-01">November 2009</abbr></div></li><li class="education vevent vcard"><h3 class="org summary"><a href="http://aaechina.cn" _fcksavedurl="http://aaechina.cn" rel="employer former">中國出口商品交易會</a></h3><div class="date_duration"><abbr class="dtstart" title="2008-09-01">September 2009</abbr> - <abbr class="dtend" title="2008-11-01">November 2008</abbr></div></li><li class="education vevent vcard"><h3 class="org summary"><a href="http://aaechina.cn" _fcksavedurl="http://aaechina.cn" rel="employer former">廣外大學生勤工助學中心</a></h3><div class="date_duration"><abbr class="dtstart" title="2007-01-01">January 2007</abbr> - <abbr class="dtend" title="2008-11-01">November 2008</abbr></div></li></ul><h2 id="skills">技能掌握</h2><ul class="skills tags"><li class="skillarea"><h3>前臺技能</h3><ol id="front"><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Css" _fcksavedurl="http://www.technorati.com/tag/Css">Css</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Xhtml" _fcksavedurl="http://www.technorati.com/tag/Xhtml">Xhtml</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/網頁重構" _fcksavedurl="http://www.technorati.com/tag/網頁重構">網頁重構</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/網頁設計" _fcksavedurl="http://www.technorati.com/tag/網頁設計">網頁設計</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/語義化" _fcksavedurl="http://www.technorati.com/tag/語義化">語義化</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Web標準" _fcksavedurl="http://www.technorati.com/tag/Web標準">Web標準</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Javascript" _fcksavedurl="http://www.technorati.com/tag/Javascript">Javascript</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Mootools" _fcksavedurl="http://www.technorati.com/tag/Mootools">Mootools</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Xml" _fcksavedurl="http://www.technorati.com/tag/Xml">Xml</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Microformat" _fcksavedurl="http://www.technorati.com/tag/Microformat">Ajax</a></li></ol></li><li class="skillarea"><h3>后臺技能</h3><ol id="back"><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/MVC" _fcksavedurl="http://www.technorati.com/tag/MVC">MVC</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Fleaphp" _fcksavedurl="http://www.technorati.com/tag/Fleaphp">Fleaphp</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Wordpress" _fcksavedurl="http://www.technorati.com/tag/Wordpress">Wordpress</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Php" _fcksavedurl="http://www.technorati.com/tag/Php">Php</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/ActionScript" _fcksavedurl="http://www.technorati.com/tag/ActionScript">ActionScript</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Joomla" _fcksavedurl="http://www.technorati.com/tag/Joomla">Joomla</a></li></ol></li><li class="skillarea"><h3>使用軟件</h3><ol id="tool"><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Photoshop" _fcksavedurl="http://www.technorati.com/tag/Photoshop">Photoshop</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Flash" _fcksavedurl="http://www.technorati.com/tag/Flash">Flash</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Flash" _fcksavedurl="http://www.technorati.com/tag/Flash">Zend</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Illustrator" _fcksavedurl="http://www.technorati.com/tag/Illustrator">Illustrator</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Flash" _fcksavedurl="http://www.technorati.com/tag/Flash">Flex</a></li></ol></li><li class="skillarea"><h3>其他技能</h3><ol id="other"><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Ajax" _fcksavedurl="http://www.technorati.com/tag/Ajax">Ajax</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Xml" _fcksavedurl="http://www.technorati.com/tag/Xml">Microformat</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/Seo" _fcksavedurl="http://www.technorati.com/tag/Seo">Seo</a></li></ol></li></ul><div class="endorse">謝謝你查看本簡歷！<a href="#" _fcksavedurl="#" id="changeColor">換個顏色試下！</a></div></div><div class="footer"><div id="copyright"><p>Copyright © 2009 <a class="url" href="http://xiebiji.com" _fcksavedurl="http://xiebiji.com" rel="me">Joe Chou</a>. <a href="http://creativecommons.org/licenses/by/2.0/" _fcksavedurl="http://creativecommons.org/licenses/by/2.0/" rel="license">Some rights reserved</a>.<a id="toTop" href="#summary" _fcksavedurl="#summary" title="to Top"></a></p><ul class="valid"><li title="采用hResume" class="micro"><a href="http://microformats.org/" _fcksavedurl="http://microformats.org/">Microformats</a></li><li title="通過XHTML 1.0驗證" class="html"><a href="http://validator.w3.org/check?uri=referer" _fcksavedurl="http://validator.w3.org/check?uri=referer">XHTML 1.0</a></li><li title="被moz，wibkit私有屬性和腦殘的IE6搞到通不過驗證" class="css"><a href="http://jigsaw.w3.org/css-validator/check/referer?profile=css3" _fcksavedurl="http://jigsaw.w3.org/css-validator/check/referer?profile=css3">CSS</a></li></ul></div></div><script language="javascript" type="text/javascript" src="http://xiebiji.com/works/resume/mootools-1.2-core.js"></script><script language="javascript" type="text/javascript" src="http://xiebiji.com/works/resume/mootools-1.2-more.js"></script><script language="javascript" type="text/javascript" src="http://xiebiji.com/works/resume/resume.js"></script></body></html><br /><center>網更多教程，請訪問：<a href=http://www.vxbq.cn/ target=_blank _fcksavedurl="http://www.vxbq.cn/ target=_blank">http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運行!

　　文章來自：藍色理想

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 打開SQL Server Express開放SA的登陸權限

下一篇 如何動態加載外部CSS與JS文件

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

用HTML+CSS+MOOTOOLS寫的簡歷