my resume

我的简历

by weiming le

HTML

<div class="wrapper metrouicss">
<header id="my-header">
    <h1>乐伟明的简历</h1>
</header>
<div id="module-list">
    <ul>
          <li class="personal-information">
            <h2 class="bg-color-blue">个人信息</h2>
            <ul>
              <li>姓名：<span>乐伟明</span></li>
              <li>性别：<span>男</span></li>
              <li>出生日期：<span>1988年1月7日</span></li>
              <li>居 住 地：<span>西安-雁塔区</span></li>
              <li>学历：<span>本科</span></li>
              <li>专业：<span>信息与计算科学</span></li>
              <li>英语等级：<span>CET4</span></li>
              <li>工作年限：<span>两年</span></li>
              <li>电子邮件：<span>[email protected]</span></li>
              <li>手机：<span>15619402557</span></li>
              <li>目前年薪：<span>6万人民币</span></li>
              <li>QQ：<span>524009538</span></li>
              <li>博客：<span><a href="#">http://www.cnblogs.com/my_front_research/</a></span></li>
              <li>github：<span><a href="#">https://github.com/xiaomingming/</a></span></li>
            </ul>
          </li>
          <li class="skills">
            <h2 class="bg-color-teal">掌握技能</h2>
            <ol>
              <li>对html语义有自己的理解，熟练使用css，喜欢css模块化，沉醉于使用简洁可扩展的html和css构建漂亮的界面；</li>
              <li>崇尚渐进增强的前端设计，与UE，UI探讨良好的交互设计，并将此实施于具体项目中； </li>
              <li>与后端约定json数据格式，实现前后端交互； </li>
              <li>熟悉javascript基本语法，熟练使用jquery库，seajs，关注js模块化，目前正在学习MVC库Backbone.js; </li>
              <li>了解scrum 敏捷软件开发，了解git代码管理工具的使用</li>
            </ol>
          </li>
          <li class="develop-tools">
            <h2 class="bg-color-greenLight">常用工具</h2>
            <ul>
              <li>ps+Dw Cs5+ sublimeText2</li>
              <li>IETester+Firebug+webDeveloper+chrome 开发者工具+fiddler2</li>
              <li>wampserver</li>
              <li>git代码提交工具</li>
            </ul>
          </li>
          <li class="experience">
            <h2 class="bg-color-lighten">工作经验</h2>
            <ul>
              <li>
                <ol>
                 ...

CSS

*{ margin: 0; padding: 0; }
body { font: 12px/1.5 arial; color: #333; }
ul,ol { list-style: none; }
#my-header {  position: fixed; top: 0; left: 0; right: 0; height: 39px; line-height: 39px; background: #eee;  text-align: center; border-bottom: 1px solid #ddd;  }
#nav { /*display: none;*/ position: fixed; top: 50%; margin-top: -120px; right: 0; }
#nav>ul { width:1.5em; font-size: 20px;  overflow: hidden; background: orange; border-radius: 6px; }
#nav>ul>li>a { display: block; text-align: center; color: #fff; text-decoration: none;  }
#nav>ul>li>a:hover,#nav>ul>li.current>a,#nav>ul>li>a:focus { background: #eee; color: orange; }
#nav>ul>li>a:focus { outline: none; }
#module-list { margin-top: 40px; }
#module-list>ul>li { padding: 10px; font-size: 14px; }
#module-list>ul>li>h2 { padding: 6px 20px; margin-bottom: 10px; font-size: 16px; color: #fff; border-radius: 6px; }
#module-list>ul>li>ul,#module-list>ul>li>ol { padding: 0 20px; border-radius: 3px; overflow: hidden; }
#module-list>ul>li>ul>li, #module-list>ul>li>ol>li {
  line-height: 2;
}
#module-list>ul>li>ul>li>ol {
  margin-bottom: 10px;
  border-left: 2px solid #ddd;
  background: #eee;
  --webkit-transition: all 0.3s ease-in 0.1s;
}
#module-list>ul>li.personal-information>ul>li { display: inline-block; line-height: 2; width: 400px;  }
#module-list a { color: #333; }
#module-list a:hover { color: #7e3878; }
/*
*metro UI style
*/
/*background color*/
.metrouicss .bg-color-blue {
  background-color: #2d89ef !important;
}
.metrouicss .bg-color-blueLight {
  background-color: #eff4ff !important;
}
.metrouicss .bg-color-blueDark {
  background-color: #2b5797 !important;
}
.metrouicss .bg-color-green {
  background-color: #00a300 !important;
}
.metrouicss .bg-color-greenLight {
  background-color: #99b433 !important;
}
.metrouicss .bg-color-greenDark {
  background-color: #1e7145 !important;
}
.metrouicss .bg-color-red {
  background-color: #b91d47 !important;
}
.metrouicss .bg-color-yellow {
  background-color:...

JavaScript

$(function(){
    $('a[href="#"]').on('click',function(e){
        e.preventDefault();
    });
    $(window).scroll(function(){
        // var scrollTop=$('body').scrollTop();
        // (scrollTop>=0)?$('#login').addClass('refixed'):$('#login').removeClass('refixed');
    });
    var navItem = $('#nav>ul>li>a'),
    prevIndexArr=[0];
    var pageGoto=function(){
        var index=$(this).parent('li').index();
        prevIndexArr.push(index);
        $(this).parent().addClass('current').siblings().removeClass('current');
        if(index===0){
            if(prevIndexArr[0]===0){
               $('body').stop().animate({
                    scrollTop:0
                },700); 
            }else{
                $('body').stop().animate({
                    scrollTop:100
                },700).animate({
                    scrollTop:0
                },700);
            }
        }else{
            $('body').stop().animate({
                scrollTop:index*600-100+'px'
            },700);
        }
        prevIndexArr.shift();
    };
    navItem.on('click',pageGoto);
    navItem.on('focus',pageGoto);
});