您当前位置：首页 > web前端 > htmlcss > 用HTML+CSS+MOOTOOLS写的简历

用HTML+CSS+MOOTOOLS写的简历

来源：程序员人生发布时间：2013-12-05 19:15:06 阅读次数：4623次

　　很快就要找工作了，最近比较闲，于是把写了个在线网页版简历。水平有限，肯定不少错误。幸好蓝色强人多，希望发这里来希望可以拿点意见。

　　我不能像大大们那样用纯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.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

　　文章来自：蓝色理想

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 打开SQL Server Express开放SA的登陆权限

下一篇 如何动态加载外部CSS与JS文件

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点