test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name=viewport content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="author" content="unclelongmao" />
  <meta name="keywords" content="longmao,yangbin,resume,frond end,前端,简历,西安前端工程师,互联网" />
  <meta name="description" content="你好，我是龙猫大叔，我是一名前端工程师" />
  <meta name="360-site-verification" content="94d2bbf4b62f0c99679a5104f1ee180c" />

  <title>欢迎光临龙猫大叔的网站</title>


  <link type="text/plain" rel="author" href="humans.txt">
  <link rel="shortcut icon" href="favicon.ico">

  <!-- @echo links -->

  <!--[if lt IE 9]>
  <script src="scripts/html5shiv.min.js"></script>
  <![endif]-->  
  
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?9a7c22488b7e7dd51b0b3747c292b9cd";
    var s = document.getElementsByTagName("script")[0]; 
    s.parentNode.insertBefore(hm, s);
  })();
  </script>




</head>
<body>
  <div id="container">
    <section class="main active" id="main-home" style="height: auto;">
        <h1 style="
      margin-bottom: 30px;
  ">欢迎！</h1>
        <h2>你好，我是一名前端工程师！</h2>
        <div class="desc">
            <small style="">我居住在西安，目前工作在<a href="http://www.yeahmobi.com/" target="_blank">西安点告</a></small>
            <small style="">兴趣爱好：看书/骑车/跑步/摄影/登山</small>
            <small style="">职业目标：成为一个卓越的前端技术经理</small>
            <small style="">技术方向：Web App Dev，Response Web Dev，Mobile First Dev，熟悉了解Mvvm，Angularjs，BackboneJS，Bootstrap，Less，MVC，JS，Gulp等技术</small>
        </div>
    </section>

    <section class="main" id="main-about">
      <h2>在这里，了解更全面的我</h2>
      <ul class="about_me">
        <li class="">
          <span class="icon_github">github:</span>
          <span><a href="https://github.com/longmao" target="_blank" title="github.com/longmao">github.com/longmao</a></span>
        </li>
        <li>
          <span class="icon_weibo">weibo:</span>
          <span><a href="http://weibo.com/hero1987" target="_blank" title="weibo.com/hero1987">@unclelongmao</a></span>
        </li>
        <li>
          <span class="icon_slides">slides:</span>
          <span><a href="https://slid.es/unclelongmao" target="_blank" title="slid.es/unclelongmao">slid.es/unclelongmao</a></span>
        </li>
        <li>
          <span class="icon_jsfiddle">jsfiddle:</span>
          <span><a href="http://jsfiddle.net/user/unclelongmao/" target="_blank" title="jsfiddle.net/user/unclelongmao">jsfiddle.net/user/unclelongmao</a></span>
        </li>

        <li>
            <span class="icon_bitbucket icon_mysites">bitbucket:</span>
            <span><a href="https://bitbucket.org/unclelongmao/" target="_blank" title="bitbucket.org/unclelongmao">bitbucket.org/unclelongmao/</a>
            </span>
        </li>
        
      </ul>
      <address>© 2017 All rights reserved.</address>

    </section>

    <section class="main" id="main-work">
      <h2>过去六年我的作品</h2>
      <ul class="works">
        <li class="">
          <a href="https://affiliate.yeahmobi.com/" target="_blank">
            <span>
              <h2 data-bind="text: name">互联网广告渠道商管理运营平台</h2>
              <h4 data-bind="text: type">广告渠道商管理运营平台</h4>
            </span>

            <img src="images/yeahmobi_affliate.png" width=330 height=250>
          </a>
        </li>
        <li class="">
          <a href="http://www.luckyinstall.com/" target="_blank">
            <span>
              <h2 data-bind="text: name">互联网广告Offer营销分发平台</h2>
              <h4 data-bind="text: type">在线分发平台</h4>
            </span>

            <img src="images/luckyinstall.png" width=330 height=250>
          </a>
        </li>

        <li class="">
          <a href="http://xueqiu.com" target="_blank">
            <span>
              <h2 data-bind="text: name">雪球网</h2>
              <h4 data-bind="text: type">投资者的垂直社交社区</h4>
            </span>

            <img src="images/xueqiu.png" width=330 height=250>
          </a>
        </li>
        <li class="">
          <a href="https://cmpay.10086.cn/" target="_blank">
            <span>
              <h2 data-bind="text: name">中国移动手机支付网站</h2>
              <h4 data-bind="text: type">在线支付网站</h4>
            </span>

            <img src="images/cmpay.png" width=330 height=250>        
          </a>
        </li>


        
      </ul>
      <address>© 2017 All rights reserved.</address>

    </section>

    <section class="main" id="main-contact">
      <h2>欢迎您来交流</h2>
      <p> <span>我的电子邮箱： </span><span class="lite_span"><a href="mailto:unclelongmao@gmail.com?subject=hi,longmao">unclelongmao@gmail.com</a></span></p>
      <p> <span>我的微信帐号： </span><span class="lite_span"><img src="images/wechat.jpg" width="200px" height="200px" title="前端工程师--龙猫大叔" alt="前端工程师--龙猫大叔"></span></p>
      <address>© 2017 All rights reserved.</address>
    </section>
  </div>
<script type="template" id="template_nav">
  <nav>
    <ul>
      <li><a data-section="main-about" href="#/about">关于我</a></li>
      <li><a data-section="main-work" href="#/work">工作</a></li>
      <li><a data-section="main-contact" href="#/contact">联系我</a></li>
    </ul>
  </nav>
</script>



<!-- @echo scripts -->


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-45576916-1', 'longmao.github.io');
  ga('send', 'pageview');
</script>


<script type="text/javascript">
  (function() {
    if($(".main").length){
      $(".main").each(function(){
        var $that = $(this);
        var $template_nav = $("#template_nav")
        var $nav = $($template_nav.html())
        $nav.on("click","li a",function(e){
          var $that_a = $(this),
            data_section = $that_a.attr("data-section");
          $("#" + data_section)
            .addClass("active")
            .siblings()
            .removeClass("active")
        })
        $that.prepend($nav)
      })
    }

    if(location.hash){
      $("a[data-section='main-" + location.hash.substr(2) + "']").click()
    }
  })();
</script>

</body>
</html>