SOURCE

$(function() {
  JSData.plus("viewers", 1, function() {
    getViewers();
  });
})
//获取访问量
function getViewers() {
  JSData.get("viewers", function(result) {
    if (result.error != 0) {
      alert(result.msg);
    } else {
      $('#viewers').html(result.data);
    }
  });
}
//回到顶部
$(window).scroll(function() {
  var scrollt = document.documentElement.scrollTop + document.body.scrollTop;
  if (scrollt > 1000) {
    $(".to-top").fadeIn(500);
  } else {
    $(".to-top").fadeOut(500);
  }
});

$(".to-top").click(function() {
  $("html,body").animate({
    scrollTop: 0
  },
  1000, function() {});
});

<!--[if lt IE 9]>
  <script>
    !function(body) {
      body.style.width = body.style.height = '100%';
      body.parentNode.style.overflow = body.style.overflow = 'hidden';
    } (document.body);
  </script>
  <iframe src="4oie.html" frameborder="0" scrolling="no" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999;">
  </iframe>
<![endif]-->
<img class="to-top" src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/huojian.svg"
alt="回到顶部" />
<header class="header">
  <div class="boundary clearfix">
    <h1 class="header__logo">
      <span class="header__logo__fullname">
        张成
      </span>
      <span class="header__logo__jobtitle">
        WEB前端工程师&emsp;访问量：
        <span id="viewers">
          加载中...
        </span>
      </span>
    </h1>
    <address class="header__address">
      <ul class="clearfix">
        <li id="header__address__item-phone" class="header__address__item header__address__item-phone"
        style="display: none;">
          <script>
            if (window.atob) {
              document.write(window.atob('MTM1NjAzMjgxMDY='));
            }
            if (/[?&]show-mobile-no=true(&|$)/.test(window.location.search)) {
              document.getElementById('header__address__item-phone').style.display = '';
            }
          </script>
        </li>
        <li title="点我可以弹出QQ聊天哦！" class="header__address__item header__address__item-qq">
          <img width="20" src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/4c086e061d950a7b1084753208d162d9f3d3c996.jpg">
          <a href="tencent://message/?uin=571346800&Site=&Menu=yes">
            571346800
          </a>
        </li>
        <li title="嗯...你可以拷贝" class="header__address__item">
          <img width="20" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2167238498,3241572151&amp;fm=58">
          <script>
            document.write(['com', 'qq', '571346800'].reverse().join('.').replace('.', '@'));
          </script>
        </li>
        <li title="随时打给我" class="header__address__item">
          <img width="20" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2000100727,3143935285&amp;fm=26&amp;gp=0.jpg"
          style="background-color: rgb(182, 173, 173);">
          17751435450
        </li>
        <li title="CSDN博客" class="blogs header__address__item header__address__item-blog">
          <a class="button" href="http://blog.csdn.net/qq_35607510" target="_blank">
            CSDN
          </a>
        </li>
        <li title="暂未开放" class="blogs header__address__item header__address__item-blog">
          <a class="button" href="#">
            GitHub
          </a>
        </li>
      </ul>
    </address>
  </div>
</header>
<div class="main">
  <section class="section">
    <div class="boundary">
      <header class="section__header">
        <h2 class="section__header__title">
          熟悉前端，涉猎后端
        </h2>
        <h3 class="section__header__subtitle">
          <script>
            document.write((new Date).getFullYear() - 2016);
          </script>
          年+工作经验，编写艺术般的代码
        </h3>
      </header>
      <div class="section-body">
        <ul class="tech-skill-list">
          <li class="tech-skill-list__item tech-skill-list__item-html-and-css tech-skill-list__item--mastered">
            <h4 class="tech-skill-list__item__name">
              HTML(5) &amp; CSS(3)
            </h4>
            <div class="tech-skill-list__item__detail not-for-print fade">
              <ul class="list content">
                <li>
                  能使用合理的结构和样式编写兼容主流浏览器的页面；
                </li>
                <li>
                  能适当运用CSS 3使页面在现代浏览器上效果更佳；
                </li>
                <li>
                  能解决基本页面问题；
                </li>
                <li>
                  能熟练使用Chrome开发者工具。
                </li>
              </ul>
            </div>
          </li>
          <li class="tech-skill-list__item tech-skill-list__item-javascript tech-skill-list__item--mastered">
            <h4 class="tech-skill-list__item__name">
              Javascript &amp; jQuery
            </h4>
            <div class="tech-skill-list__item__detail not-for-print fade">
              <ul class="list content">
                <li>
                  熟悉原生js和jQuery；
                </li>
                <li>
                  积累了一些基本的操作和用法；
                </li>
                <li>
                  熟悉正则表达式的使用；
                </li>
                <li>
                  熟悉函数封装，开发过基础类库;
                </li>
                <li>
                  熟悉JSON和AJAX。
                </li>
              </ul>
            </div>
          </li>
          <li class="tech-skill-list__item tech-skill-list__item-nodejs tech-skill-list__item--practised">
            <h4 class="tech-skill-list__item__name">
              前端框架
            </h4>
            <div class="tech-skill-list__item__detail not-for-print fade">
              <ul class="list content">
                <li>
                  bootstrap
                </li>
                <li>
                  ionic
                </li>
                <li>
                  vue
                </li>
                <li>
                  Amaze UI
                </li>
                <li>
                  layer
                </li>
              </ul>
            </div>
            <li class="tech-skill-list__item tech-skill-list__item-sql tech-skill-list__item--practised">
              <h4 class="tech-skill-list__item__name">
                SQL
              </h4>
              <div class="tech-skill-list__item__detail not-for-print fade">
                <ul class="list content">
                  <li>
                    能设计中小规模Web应用的数据库；
                  </li>
                  <li>
                    熟悉navicat for mysql的使用；
                  </li>
                  <li>
                    能编写简单的增删改查语句。
                  </li>
                </ul>
              </div>
            </li>
            <li class="tech-skill-list__item tech-skill-list__item-photoshop">
              <h4 class="tech-skill-list__item__name">
                Photoshop
              </h4>
              <div class="tech-skill-list__item__detail not-for-print fade">
                <ul class="list content">
                  <li>
                    能进行简单的图片处理和平面设计；
                  </li>
                  <li>
                    能根据图片特征存成最优的格式。
                  </li>
                </ul>
              </div>
            </li>
        </ul>
      </div>
    </div>
  </section>
  <section class="section">
    <div class="boundary">
      <header class="section__header">
        <h2 class="section__header__title">
          对Web充满热情
        </h2>
        <h3 class="section__header__subtitle">
          学生时代就踏上了开发之路
        </h3>
      </header>
      <div class="section-body clearfix">
        <div class="edu edu-seniorschool not-for-print">
          <div class="edu__body clearfix">
            <a target="_blank">
              <img alt="江苏省姜堰中学" title="江苏省姜堰中学" class="edu__logo" class="c-img c-img6"
              src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3578264912,692402382&amp;fm=58">
            </a>
            <p class="content">
              高中在「
              <strong>
                江苏省姜堰中学
              </strong>
              」就读，课余做了多个小网站，其中以三水人家为主题的「
              <strong>
                姜堰三水
              </strong>
              」曾获以下奖项：
            </p>
            <ul class="list content">
              <li>
                “泰州市中小学生电脑制作活动”高中网页二等奖
              </li>
              <li>
                “江苏省中学生历史科‘研究性学习’个案征集评比活动”一等奖
              </li>
            </ul>
          </div>
        </div>
        <div class="edu edu-university">
          <div class="edu__body clearfix">
            <a target="_blank" class="not-for-print">
              <img alt="南京大学" title="南京大学" class="edu__logo" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1273470530,2467918336&amp;fm=58&amp;u_exp_0=706436915,2134612926&amp;fm_exp_0=86&amp;bpow=342&amp;bpoh=342">
            </a>
            <p class="content">
              2014年9月至2017年6月在「
              <strong>
                苏州经贸职业技术学院
              </strong>
              」修读
              <strong>
                软件技术
              </strong>
              专业，在并在课余时间考取了「
              <strong>
                南京大学
              </strong>
              」自学本科，修读取得
              <strong>
                学士学位
              </strong>
              。在校期间曾获以下奖项：
            </p>
            <ul class="list content clearfix">
              <li>
                2015年5月被评为优秀学生
              </li>
              <li>
                2016年12月被评为优秀实习生
              </li>
              <li>
                2017年4月获班级网页制作大赛一等奖
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--求职经历-->
  
  
  
  
  
  <!--求职经历-->
  
  <section class="section">
    <div class="boundary">
      <header class="section__header">
        <h2 class="section__header__title">
          丰富的项目经验
        </h2>
        <h3 class="section__header__subtitle">
          
        </h3>
      </header>
      <div class="section-body">
        <section class="project clearfix not-for-print">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                CSDN「技术博客」
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  博客
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSDN
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  前端
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-4">
                  特效
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-5">
                  问题
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-6">
                  百度地图
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-7">
                  有趣的东西
                </li>
              </ul>
              <p class="project__intro__header__period">
                
              </p>
            </header>
            <div class="content">
              <p>
                我的热门文章：
              </p>
              <ul class="list">
                <li>
                  <a title="点击查看文章" target="_blank"  href="http://blog.csdn.net/qq_35607510/article/details/77930360">
                    table的表头固定--上下滚动表头固定，左右滚动跟随滚动
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank"  href="http://blog.csdn.net/qq_35607510/article/details/77771736">
                    :before , :after 和 content的一些用法
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510/article/details/72763476">
                    input 自动联想填充 模糊查询
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510/article/details/53992602">
                    百度地图之实时定位与画轨迹以及纠偏问题总结
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510/article/details/71079570">
                    移动端点击返回上个页面，任然在原来的位置
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510/article/details/75221023">
                    HTML5本地存储Localstorage实现注册登录以及验证
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510/article/details/77159785">
                    一个简单的js问题告诉你：你的经验到底值不值钱？
                  </a>
                </li>
                <li>
                  <a title="点击查看文章" target="_blank" href="http://blog.csdn.net/qq_35607510">
                    更多...
                  </a>
                </li>
              </ul>
              <p class="project__intro__links not-for-print">
                <a href="http://blog.csdn.net/qq_35607510" target="_blank">
                  我的CSDN博客地址
                </a>
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/bokeindex.png"
            alt="CSDN" />
          </div>
        </section>
        <section class="project clearfix not-for-print">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                一只杯子「网上商城」
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-4">
                  JSP
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-5">
                  java
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-6">
                  MySQL
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-7">
                  AJAX
                </li>
              </ul>
              <p class="project__intro__header__period">
                大三期间完成，也是毕业设计
              </p>
            </header>
            <div class="content">
              <p>
                注册登录、首页轮播、新品上市、热销爆款、我们推荐、商品筛选和搜索排序，收藏、评价商品、显示商品浏览次数等、以及订单的提交。
              </p>
              <p class="project__intro__links not-for-print">
                <a href="http://123.206.184.218:8080/cup/CupWeb/index.html" target="_blank">
                  在线地址
                </a>
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/onecup.png"
            alt="一只杯子" />
          </div>
        </section>
        
        <!--后台-->
        <!--后台-->
        
        
        <section class="project clearfix not-for-print">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                音乐网站
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-5">
                  JSON
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-6">
                  LocalStorage
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-7">
                  SessionStorage
                </li>
              </ul>
              <p class="project__intro__header__period">
                第一次尝试用JSON
              </p>
            </header>
            <div class="content">
              <p>
                用JSON和HTML5的本地存储
                <b>
                  LocalStorage
                </b>
                <b>
                  SessionStorage
                </b>
                来实现简单的登录注册，歌曲筛选、搜索，以及歌单的基本功能。用新标签audio实现音乐播放。
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/yinyue.png"
            alt="音乐网站" />
          </div>
        </section>
        <section class="project clearfix">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                留言板「JSData」
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-4">
                  JSON
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-5">
                  JSData
                </li>
              </ul>
              <p class="project__intro__header__period">
                自己做的小demo
              </p>
            </header>
            <div class="content">
              <ul class="list">
                <li>
                  利用JSRUN的JSData模拟后台数据存取，每次留言都是保存在服务器端的；
                </li>
                <li>
                  使用CSS3来实现一些特效，例如非空验证时的抖动效果；
                </li>
                <li>
                  每天的JSData调用次数有限，请节约使用哈。
                </li>
              </ul>
              <p class="project__intro__links not-for-print">
                <a href="http://jsrun.net/fxYKp/show" target="_blank">
                  在线地址
                </a>
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/liuyanban.png"
            alt="留言板" />
          </div>
        </section>
        <section class="project clearfix">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                 
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
              </ul>
              <p class="project__intro__header__period">
                 
              </p>
            </header>
            <div class="content">
              <p>
                xxxxx
              </p>
              <ul class="list">
                <li>
                  xxxxx
                </li>
                <li>
                  xxxxx
                </li>
              </ul>
              <p class="project__intro__links not-for-print">
                <a href="" target="_blank">
                  在线地址
                </a>
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="" alt="xxx" />
          </div>
        </section>
        <section class="project clearfix">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                 
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
              </ul>
              <p class="project__intro__header__period">
                 
              </p>
            </header>
            <div class="content">
              <p>
                xxxxx
              </p>
              <ul class="list">
                <li>
                  xxxxx
                </li>
                <li>
                  xxxxx
                </li>
              </ul>
              <p class="project__intro__links not-for-print">
                <a href="" target="_blank">
                  在线地址
                </a>
              </p>
            </div>
          </div>
          <div class="project__thumb not-for-print">
            <img src="" alt="xxx" />
          </div>
        </section>
        <section class="project project--nothumb clearfix">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                xxxxxxxxx
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
              </ul>
              <p class="project__intro__header__period">
                xxxxxxxxx
              </p>
            </header>
            <div class="content">
              <p>
                xxxxxxxxx
              </p>
            </div>
          </div>
        </section>
        <section class="project project--nothumb clearfix">
          <div class="project__intro">
            <header class="project__intro__header clearfix">
              <h4 class="project__intro__header__title">
                xxxxx
              </h4>
              <ul class="tech-tag-list not-for-print">
                <li class="tech-tag-list__item tech-tag-list__item-1">
                  HTML 5
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-2">
                  CSS 3
                </li>
                <li class="tech-tag-list__item tech-tag-list__item-3">
                  JavaScript
                </li>
              </ul>
              <p class="project__intro__header__period">
              </p>
            </header>
            <div class="content">
              <p>
                xxxxxxxxx
              </p>
              <p class="project__intro__links not-for-print">
                <a href="" target="_blank">
                  项目地址
                </a>
              </p>
            </div>
          </div>
        </section>
      </div>
    </div>
  </section>
</div>
<footer class="footer">
  <div class="boundary clearfix">
    <div class="footer__qrcode clearfix">
    </div>
    <div class="footer__copyright content">
      <img src="http://sandbox.runjs.cn/uploads/rs/234/bxxwrmn8/erweicode.png"
      alt="二维码加载失败，您可以直接在手机端浏览器输入本网址" class="footer__qrcode__img" />
      <p class="footer__qrcode__text content">
        您还可以使用手机或iPad
        <br />
        扫描二维码打开简历
      </p>
    </div>
  </div>
</footer>
<div style="display: none;">
  <script src="http://s15.cnzz.com/stat.php?id=4174689&amp;web_id=4174689">
  </script>
</div>

body {
  margin: 0;
  background: #fff;
  line-height: 1;
  font-family: 'Pingfang SC', 'Lantinghei SC', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 16px;
  color: #333;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -webkit-print-color-adjust: exact;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-size: inherit;
}

ul,
ol {
  list-style-type: none;
}

img {
  border: none;
  vertical-align: top;
}

a,
a:visited {
  text-decoration: none;
  color: #08c;
}

a:hover {
  text-decoration: underline;
  cursor: pointer;
}

li:hover {
  cursor: pointer;
}


/* 清浮动 */

.clearfix:after {
  display: block;
  overflow: hidden;
  clear: both;
  height: 0;
  visibility: hidden;
  content: '.';
}


/*回到顶部*/

.to-top {
  opacity:0.7;
  position: fixed;
  right: 8px;
  bottom: 80px;
  width: 13%;
  max-width: 95px;
  z-index: 999;
  display: none;
}

.to-top:hover {
  cursor: pointer;
  opacity:0.9;
}


/* 通用列表样式 */

.list>li {
  list-style: disc;
  margin-left: 1.3em;
}


/* 通用内容样式 */

.content {
  line-height: 1.7;
  text-align: justify;
}


/* 控制某些内容在打印时的显示隐藏 */

.only-for-print {
  display: none;
}

.not-for-print {
  display: block;
}


/* 内容边界 */

.boundary {
  clear: both;
}

@media (max-width: 768px) {
  .boundary {
    margin: 17px 20px 0px 20px;
  }
  .blogs{
    display:inline-block;
    margin-left:5px
  }
}

@media (min-width: 769px) and (max-width: 1040px) {
  .boundary {
    margin: 10px 30px 10px 30px;
  }
}

@media (min-width: 1040px) {
  .boundary {
    max-width: 980px;
    margin: 0 auto;
  }
}


/* 按钮 */

.button {
  border-radius: 0.4em;
  padding: 0 0.6em;
  background: #1d9bd9;
  background: -webkit-linear-gradient(#3baee7, #08c);
  background: linear-gradient(#3baee7, #08c);
  color: #f6f6f6;
}

a.button {
  display: inline-block;
}

.button:visited {
  color: #f6f6f6;
}

.button:hover {
  text-decoration: none;
  color: #fff;
  background: #2fa2dc;
  background: -webkit-linear-gradient(#4ab4e8, #1491d0);
  background: linear-gradient(#4ab4e8, #1491d0);
}


/* 页头 */

.header {
  border-bottom: 1px solid #d6d6d6;
  padding: 15px 0;
}

.header__logo__fullname {
  font-family: 'PingHei', 'STHeiti SC', 'SimHei';
  font-size: 28px;
}

.header__logo__jobtitle {
  color: #888;
}
.header__address__item-qq{
  
}
.header__address {
  line-height: 21px;
  font-style: normal;
  font-size: 14px;
}

.header__address__item {
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  padding-left: 5px;
  background: url(../images/icon-sprites.png) no-repeat;
  background-size: 20px auto;
}

.header__address__item-phone {
  background-position: 0 0;
}

.header__address__item-qq {
  background-position: 0 -28px;
}

.header__address__item-email {
  background-position: left bottom;
}

.header__address__item-blog {
  padding-left: 0;
  background: none;
}

.header__address .button {
  font-size: 12px;
}

@media (max-width: 319px) {
  .header__logo__jobtitle {
    margin-top: 10px;
    display: block;
  }
  .header__address {
    margin-top: 15px;
  }
}

@media (min-width: 320px) {
  .header__logo {
    line-height: 40px;
    height: 40px;
  }
  .header__logo__jobtitle {
    padding-left: 10px;
  }
}

@media (min-width: 520px) {
  .header__address__item {
    float: left;
    margin-right: 22px;
  }
  .header__address__item-blog {
    float: right;
    margin-right: 0;
  }
}

@media (min-width: 880px) {
  .header {
    width: 100%;
    height: 40px;
    position: fixed;
    z-index: 99999;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
  }
  .header .boundary {
    position: relative;
  }
  .header__logo {
    position: relative;
    float: left;
  }
  .header__logo__fullname {
    font-size: 2.5em;
  }
  .header__logo__jobtitle {
    position: absolute;
    left: 100%;
    bottom: 0;
    line-height: 20px;
    white-space: nowrap;
  }
  .header__address {
    position: absolute;
    right: 0;
    bottom: 0;
  }
  .header__address__item {
    margin-left: 8px;
    margin-right: 0;
  }
  /* 空出页头位置 */
  .main {
    padding-top: 71px;
  }
}


/* 章节 */

.section:nth-child(even) {
  background: #fafafa;
}

.section__header {
  text-shadow: 1px 1px 0 #fff;
  line-height: 1.4;
}

.section__header__title,
.section__header__subtitle {
  font-family: 'Microsoft JhengHei', 'Microsoft YaHei', 'STHeiti SC', 'SimHei';
  text-align: center;
}

.section__header__subtitle {
  color: #999;
}

@media (max-width: 749px) {
  .section .boundary {
    padding: 25px 0;
  }
  .section__header {
    margin-bottom: 20px;
  }
  .section__header__title {
    font-size: 26px;
  }
  .section__header__subtitle {
    font-size: 20px;
  }
}

@media (min-width: 750px) {
  .section .boundary {
    padding: 35px 0;
  }
  .section__header {
    margin-bottom: 30px;
  }
  .section__header__title {
    font-size: 40px;
  }
  .section__header__subtitle {
    font-size: 34px;
  }
}


/* 技术技能章节 */

.tech-skill-list__item {
  position: relative;
  animation-duration: 1.5s;
}

.tech-skill-list__item-javascript {
  animation-name: bar-javascript;
}

@keyframes bar-javascript {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.tech-skill-list__item-html-and-css {
  width: 90%;
  animation-name: bar-html-and-css;
}

@keyframes bar-html-and-css {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

.tech-skill-list__item-nodejs {
  width: 80%;
  animation-name: bar-nodejs;
}

@keyframes bar-nodejs {
  0% {
    width: 0;
  }
  100% {
    width: 80%;
  }
}

.tech-skill-list__item-aspdotnet {
  width: 55%;
  animation-name: bar-aspdotnet;
}

@keyframes bar-aspdotnet {
  0% {
    width: 0;
  }
  100% {
    width: 55%;
  }
}

.tech-skill-list__item-sql {
  width: 50%;
  animation-name: bar-sql;
}

@keyframes bar-sql {
  0% {
    width: 0;
  }
  100% {
    width: 50%;
  }
}

.tech-skill-list__item-photoshop {
  width: 45%;
  animation-name: bar-photoshop;
}

@keyframes bar-photoshop {
  0% {
    width: 0;
  }
  100% {
    width: 45%;
  }
}

.tech-skill-list__item__name {
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  border-left: 3px solid;
  overflow: hidden;
  background-color: #fff6dd;
  border-color: #fdbc40;
  color: #ff742a;
}

.tech-skill-list__item--practised .tech-skill-list__item__name {
  background-color: #eaf6d0;
  border-color: #80bd01;
  color: #6e9c0f;
}

.tech-skill-list__item--mastered .tech-skill-list__item__name {
  background-color: #d6efff;
  border-color: #3498db;
  color: #2a7da9;
}

.tech-skill-list__item__detail {
  position: absolute;
  left: 150px;
  top: 12px;
  z-index: 9999;
  max-width: 400px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  display: none;
}

@media (max-width: 749px) {
  .tech-skill-list__item {
    margin-bottom: 15px;
  }
}

@media (min-width: 750px) {
  .tech-skill-list__item {
    margin-bottom: 20px;
  }
  .tech-skill-list__item:hover .tech-skill-list__item__detail {
    display: block;
    font-size: 14px;
  }
  @keyframes fade-in {
    0% {
      display: none;
      opacity: 0;
    }
    1% {
      display: block;
      opacity: 0;
    }
    100% {
      display: block;
      opacity: 1;
    }
  }
  .fade {
    animation: fade-in 0.8s;
  }
}


/* 教育经历 */

@media (max-width: 959px) {
  .edu {
    margin-top: 25px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #ccc;
  }
  .edu-university {
    border-bottom: none;
    padding-bottom: 0;
  }
  .edu__logo {
    width: 30%;
    max-width: 150px;
    min-width: 120px;
    margin: 0 0 10px 20px;
    float: right;
  }
}

@media (min-width: 960px) {
  .edu {
    width: 50%;
    float: left;
    box-sizing: border-box;
  }
  .edu-seniorschool {
    padding-right: 4%;
  }
  .edu-university {
    padding-left: 4%;
    border-left: 2px dashed #ccc;
  }
  .edu-seniorschool .edu__body {
    padding-right: 180px;
  }
  .edu-university .edu__body {
    padding-left: 180px;
  }
  .edu__logo {
    width: 150px;
  }
  .edu-seniorschool .edu__logo {
    float: right;
    margin-right: -180px;
  }
  .edu-university .edu__logo {
    float: left;
    margin-left: -180px;
  }
}


/* 工作经验章节 */

.work-exp-list {
  padding: 1px 0;
  margin-left: 8px;
  border-left: 4px solid #ccc;
}

.work-exp-list__point {
  position: relative;
  padding-left: 15px;
  margin: 15px 0;
  height: 26px;
  line-height: 26px;
}

.work-exp-list__point__ico {
  position: absolute;
  left: -14px;
  top: 0;
  width: 18px;
  height: 18px;
  border: 3px solid #fff;
  border-radius: 12px;
  background: #3498db;
}

.work-exp-list__company {
  margin-left: 20px;
}

.work-exp-list__company__header__logo {
  width: 100px;
  display: block;
  text-align: center;
}

.work-exp-list__company__header__logo img {
  width: 100%;
}

.work-exp-list__company__header__title {
  font-size: 1.2em;
  font-weight: bold;
}

.work-exp-list__company__header__jobtitle {
  color: #888;
}

.work-exp-list__company__body {
  margin-top: 8px;
}

@media (max-width: 639px) {
  .work-exp-list__company__header__logo {
    display: block;
    margin-bottom: 8px;
    text-align: left;
  }
  .work-exp-list__company__header__title {
    margin-top: 10px;
    color: blue;
  }
  .work-exp-list__company__header__jobtitle {
    margin-top: 6px;
  }
}

@media (min-width: 640px) {
  .work-exp-list__company {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .work-exp-list__company__header {
    position: relative;
    padding-left: 115px;
  }
  .work-exp-list__company__header__logo {
    position: absolute;
    left: 0;
    top: 0;
  }
  .work-exp-list__company__header__title,
  .work-exp-list__company__header__jobtitle {
    display: inline-block;
  }
  .work-exp-list__company__header__jobtitle:before {
    content: '\2014\2014';
    padding-right: 4px;
  }
  .work-exp-list__company__body {
    padding-left: 115px;
  }
}


/* 项目经验章节 */

.project {
  border-top: 2px dashed #ccc;
}

.project:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.project__intro__header {
  position: relative;
  margin-bottom: 8px;
  line-height: 1.3;
}

.project__intro__header__title {
  font-size: 1.2em;
  font-weight: bold;
}

.tech-tag-list__item {
  height: 24px;
  line-height: 24px;
  padding: 0 6px;
  border-radius: 3px;
  display: inline-block;
  vertical-align: middle;
  font-size: 0.75em;
  font-family: 'Lucida Grande', arial;
  color: #fff;
}

.tech-tag-list__item-1 {
  background: #80bd01;
}

.tech-tag-list__item-2 {
  background: #f60;
}

.tech-tag-list__item-3 {
  background: #f90;
}

.tech-tag-list__item-4 {
  background: #68217a;
}

.tech-tag-list__item-5 {
  background: #003b57;
}

.tech-tag-list__item-6 {
  background: #015a84;
}

.tech-tag-list__item-7 {
  background: #999966;
}

.tech-tag-list__item-8 {
  background: #CC9933;
}

.tech-tag-list__item-9 {
  background: #CC3366;
}

.tech-tag-list__item-10 {
  background: #FF9966;
}

.tech-tag-list__item-11 {
  background: #CC6666;
}

.project__intro__header__period {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 24px;
  font-size: 14px;
  color: #888;
}

.project__intro__links {
  margin-top: 10px;
  text-align: right;
  word-spacing: 1em;
}

.project__thumb img {
  width: 100%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}

@media (max-width: 379px) {
  .project__intro__header__period {
    position: static;
    margin-top: 2px;
  }
}

@media (max-width: 749px) {
  .project {
    margin-top: 18px;
    padding-top: 22px;
  }
  .project__thumb {
    width: 90%;
    margin: 12px auto 0 auto;
  }
  .project__intro__header__title {
    padding-bottom: 3px;
  }
}

@media (min-width: 750px) {
  .project__intro {
    width: 100%;
    float: left;
  }
  .project__intro__header {
    margin-top: -2px;
  }
  .project__intro__header__title {
    padding-bottom: 3px;
  }
  .project__thumb {
    float: right;
  }
  .project--nothumb {
    padding-right: 10px !important;
  }
}

@media (min-width: 750px) and (max-width: 959px) {
  .project {
    margin-top: 20px;
    padding-top: 30px;
    padding-right: 290px;
  }
  .project__thumb {
    width: 250px;
    margin-right: -280px;
  }
}

@media (min-width: 960px) {
  .project {
    margin-top: 25px;
    padding-top: 35px;
    padding-left: 10px;
    padding-right: 380px;
  }
  .project__thumb {
    width: 320px;
    margin-right: -370px;
  }
}


/* 页脚 */

.footer {
  border-top: 1px solid #e8e8e8;
  font-size: 0.875em;
  color: #888;
}

.footer .boundary {
  padding: 15px 0;
}

.footer__qrcode__img {
  width: 60px;
  height: 60px;
  float: left;
}

.footer__qrcode__text {
  margin: 7px 0 0 10px;
  float: left;
}

.footer__copyright a {
  color: #000;
}

@media (max-width: 749px) {
  .footer__copyright {
    margin-top: 8px;
  }
  .footer__copyright p {
    text-align: left;
  }
}

@media (min-width: 750px) {
  .footer__qrcode {
    float: left;
  }
  .footer__copyright {
    margin-top: 7px;
    float: right;
  }
  .footer__copyright p {
    text-align: right;
  }
}