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

用HTML+CSS+MOOTOOLS寫的簡歷

來源：程序員人生發(fā)布時(shí)間：2013-12-05 19:15:06 閱讀次數(shù)：4795次

　　很快就要找工作了，最近比較閑，于是把寫了個(gè)在線網(wǎng)頁版簡歷。水平有限，肯定不少錯(cuò)誤。幸好藍(lán)色強(qiáng)人多，希望發(fā)這里來希望可以拿點(diǎn)意見。

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

　　極端希望大家給點(diǎn)意見，我發(fā)現(xiàn)自己好像很多自己總結(jié)的知識(shí)不一定對的。有興趣的朋友可以留言索取整個(gè)實(shí)例源碼。

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

　　HTML代碼(運(yùn)行為無js無css狀態(tài)網(wǎng)頁)：

<!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="周桂華的簡歷,一個(gè)熱衷于互聯(lián)網(wǎng)網(wǎng)頁創(chuàng)作的人的在線簡歷." /><meta name="keywords" lang="zh-CN" xml:lang="zh-CN" content="周桂華,簡歷,HTML,CSS,重構(gòu),web,網(wǎng)頁,互聯(lián)網(wǎng)" /><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>手機(jī): </strong><span class="tel">13828495274</span></li><li class="internet"><strong>個(gè)人主頁: </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">自我評價(jià)</a></li><li><a href="#expertation" _fcksavedurl="#expertation">求職意向</a></li><li><a href="#education" _fcksavedurl="#education">教育經(jīng)歷</a></li><li><a href="#history" _fcksavedurl="#history">項(xiàng)目經(jīng)驗(yàn)</a></li><li><a href="#exprience" _fcksavedurl="#exprience">實(shí)習(xí)經(jīng)歷</a></li><li><a href="#skills" _fcksavedurl="#skills">技能掌握</a></li></ul></div></div><div class="hresume"><h2 id="summary">自我評價(jià)</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>學(xué)無拘束：</h3>熱愛互聯(lián)網(wǎng)技術(shù)，對喜歡的極力去學(xué)，不喜歡的也不抗拒;</li><li><h3>專我所能：</h3>專注并能夠手寫符合w3c標(biāo)準(zhǔn)的HTML代碼和css代碼，同時(shí)學(xué)習(xí)網(wǎng)頁設(shè)計(jì)和后臺(tái)程序編程，可獨(dú)立建小型php站;</li><li><h3>座右銘：</h3>要有所作為最基本的要素就是要勤奮。</li></ul><h2 id="expertation">求職意向</h2><ul class="summary expertation"><li><h3>意向職位：</h3>網(wǎng)頁重構(gòu)工程師、Web前端開發(fā)工程師</li><li><h3>工作性質(zhì)：</h3>實(shí)習(xí)或全職</li><li><h3>意向地點(diǎn)：</h3>中山市、廣州市、深圳市</li></ul><h2 id="education">教育經(jīng)歷</h2><ul class="education vcalendar"><li class="education vevent vcard"><h3 class="htitle"> <span class="summary">2010應(yīng)屆畢業(yè) 電子商務(wù) 經(jīng)濟(jì)學(xué)位本科</span> <span class="org">廣東外語外貿(mào)大學(xué)</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">項(xiàng)目經(jīng)驗(yàn)</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">[整站開發(fā)]</strong> 負(fù)責(zé)整站設(shè)計(jì)（前臺(tái)設(shè)計(jì)、切割、特效，后臺(tái)FLEAPHP開發(fā)）</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">[整站開發(fā)]</strong> 負(fù)責(zé)整站設(shè)計(jì)（前臺(tái)設(shè)計(jì)、切割、特效，后臺(tái)FLEAPHP開發(fā)）</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">個(gè)人主頁第二版</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">[整站開發(fā)]</strong> 基于博客系統(tǒng)WordPress的二次整站開發(fā)，PR4,負(fù)責(zé)整站創(chuàng)作，原創(chuàng)風(fēng)格主題</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">廣州市越秀區(qū)藝術(shù)文化中心</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">[網(wǎng)頁設(shè)計(jì)、頁面重構(gòu)]</strong> 負(fù)責(zé)首頁頁面設(shè)計(jì)，特效、切割維護(hù)</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">[網(wǎng)頁設(shè)計(jì)、頁面重構(gòu)]</strong> 擔(dān)任主要?jiǎng)?chuàng)始人，從事頁面重構(gòu)，網(wǎng)站架構(gòu)等工作</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">[網(wǎng)頁設(shè)計(jì)、頁面重構(gòu)]</strong> 負(fù)責(zé)網(wǎng)站整站頁面設(shè)計(jì)，切割維護(hù)。</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">[后臺(tái)編程]</strong> 一個(gè)公司內(nèi)部用，小型項(xiàng)目管理系統(tǒng)，多角色多權(quán)限控制。</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">[后臺(tái)編程]</strong>一個(gè)公司內(nèi)部用，員工faq交流系統(tǒng)，多角色多權(quán)限控制。</p></li></ul><h2 id="exprience">實(shí)習(xí)經(jīng)歷</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">中國出口商品交易會(huì)</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">廣外大學(xué)生勤工助學(xué)中心</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>前臺(tái)技能</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/網(wǎng)頁重構(gòu)" _fcksavedurl="http://www.technorati.com/tag/網(wǎng)頁重構(gòu)">網(wǎng)頁重構(gòu)</a></li><li><a class="skill" target="_blank" rel="tag" href="http://www.technorati.com/tag/網(wǎng)頁設(shè)計(jì)" _fcksavedurl="http://www.technorati.com/tag/網(wǎng)頁設(shè)計(jì)">網(wǎng)頁設(shè)計(jì)</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標(biāo)準(zhǔn)" _fcksavedurl="http://www.technorati.com/tag/Web標(biāo)準(zhǔn)">Web標(biāo)準(zhǔn)</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>后臺(tái)技能</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">換個(gè)顏色試下！</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驗(yàn)證" 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搞到通不過驗(yàn)證" 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>網(wǎng)更多教程，請?jiān)L問：<a href=http://www.jyygyx.com/ target=_blank _fcksavedurl="http://www.jyygyx.com/ target=_blank">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運(yùn)行!

　　文章來自：藍(lán)色理想

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

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

上一篇 打開SQL Server Express開放SA的登陸權(quán)限

下一篇 如何動(dòng)態(tài)加載外部CSS與JS文件

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

用HTML+CSS+MOOTOOLS寫的簡歷