项目展示DEMO，个人简历DEMO

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目展示DEMO</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        background-color: #eee;
      }
      .layout {
        width: 800px;
        min-width: 800px;
        margin: 2em auto;
        text-align: center;
      }
      header>h2, 
      p, 
      div {
        margin: 1em 0;
      }
      header>div a {
        text-decoration: none;
        color: #eee;
        display: inline-block;
        padding: .5em 1em;
        background-color: #bbb;
        border-radius: .25em;
        margin: 1em;
      }
      main>.snapshot {
        width: 400px;
        height: 300px;
        margin: 0 auto;
      }
      main>.snapshot img {
        width: 100%;
        height: 100%;
      }
      main>div a {
        text-decoration: none;
        color: #eee;
        display: inline-block;
        padding: .5em 2em;
        background-color: #bbb;
        border-radius: .25em;
        margin: 1em;
      }
      footer>a {
        text-decoration: none;
        color: #888;
        font-style: italic;
      }
    </style>
</head>
<body>
  <div class="layout">
    <header>
      <h2>My Project</h2>
      <p>Select one or more projects in which you're interested.</p>
      <div>
        <a href="#1" target="blank">Demo1</a>
        <a href="#2" target="blank">Demo2</a>
        <a href="#3" target="blank">Demo3</a>
        <a href="#4" target="blank">Demo4</a>
        <a href="#5" target="blank">Demo5</a>
      </div>
    </header>
    <main>
      <div class="snapshot">
        <img src="http://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512040939815&di=8d52fe267a1c9a0d583ffd74ea9ed1b7&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2014%2F12%2F31%2FFjluSytKkPpUrVvjAvBPLHyVcb94.jpg" alt="projects snapshot">
      </div>
      <div>
        <a href="#6" target="blank">View Sourse</a>
        <a href="#7" target="blank">Instructions</a>
      </div>
    </main>
    <footer>
      Author: 
      <a href="#">Shaw Roc</a>
    </footer>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resume Demo</title>
    <style>
      body {
        font-family: "Lantinghei SC", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
      }
      .clearfix::after {
        content: " ";
        display: block;
        clear: both;
      }
      .layout {
        width: 960px;
        min-width: 960px;
        margin: 0 auto;
        background-color: #eee;
        box-shadow: 5px 5px 5px #888;
      }
      header>.avatar {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: black;
        color: #fff;
        font-size: 2em;
        position: relative;
        display: inline-block;
        margin: 2em 1em 2em 2em;
        vertical-align: middle;
      }
      header>.avatar::before{
        content: "S";
        position: absolute;
        top: 15px;
        left: 15px;
      }
      header>.avatar::after {
        content: "R";
        position: absolute;
        bottom: 15px;
        right: 15px;
      }
      header>.avatar span {
        border: 1px solid #fff;
        position: absolute;
        width: 60%;
        transform: rotateZ(-45deg);
        top: 50%;
        left: 20%;
      }
      header>.name,.info {
        display: inline-block;
        vertical-align: middle;
      }
      header>.name {
        margin-right: 17em;
      }
      header>.name :nth-child(1) {
        font: 2em normal;
        color: #333;
        margin: .5em 0;
      }
      header>.name :nth-child(2) {
        font: 1em normal;
        color: #444;
        margin: 1em 0;
      }
      header>.info h3 {
        border-bottom: 3px solid #444;
        margin-bottom: 1em;
      }
      header>.info h3~p:first-letter {
        font-weight: bold;
        margin-right: 1em;
      }
      main, footer {
        margin: 2em;
      }
      main>h2::after {
        content: " ";
        display: block;
        width: 40%;
        margin: 1em 0;
        border-bottom: 1px solid #ccc;
      }
      main>.Ex {
        border-left: 1px solid #666;
        position: relative;
        left: 1em;
      }
      main>.Ex li {
        list-style: none;
        margin: 1em 0;
        position: relative;
      }
      main>.Ex li::before {
        content: " ";
        display: block;
        width: .625em;
        height: .625em;
        border-radius: 50%;
        background-color: #000;
        position: absolute;
        left: -2.8em;
      }
      footer>.aside-left, 
     .aside-right {
        width: 400px;
        float: left;
        margin-right: 3em;
      }
      footer>.aside h2:after {
        content: " ";
        display: block;
        width: 100%;
        margin: 1em 0;
        border-bottom: 1px solid #ccc;
      }
      footer>.aside li {
        list-style: none;
        margin: 1em 0;
        position: relative;
      }
      footer>.aside-left h3::before {
        content: " ";
        display: block;
        width: 1em;
        height: 1em;
        border: 1px solid #000;
        border-radius: 50%;
        position: absolute;
        left: -2em;
      }
      footer>.aside-left h3::after {
        content: "+";
        display: block;
        position: absolute;
        left: -1.75em;
        top: 0;
      }
      footer>.aside-right ol li {
        width: 180px;
        float: left;
        margin-top: -1em;
      }
     
      footer>.aside-right h3::before {
        content: " ";
        display: block;
        width: 1em;
        height: 1em;
        border: 1px solid #000;
        border-radius: 50%;
        position: absolute;
        left: -2em;
      }
      footer>.aside-right h3::after {
        content: "+";
        display: block;
        position: absolute;
        left: -1.75em;
        top: 1em;
      }

    </style>
</head>
<body>
  <div class="layout">
    <header class="clearfix">
      <div class="avatar">
        <span></span>
      </div>
      <div class="name">
        <h2>Shaw Roc</h2>
        <h6>Graphic&Web Designer</h6>
      </div>
      <div class="info">
        <h3>CONTACTS</h3>
        <p>A Suzhou, Jiangsu, PR.China</p>
        <p>M 150 8888 8888</p>
        <p>E coldplay1204@hotmail.com</p>
        <p>W www.jianshu.com/u/2c1354e9c9d1</p>
      </div>
    </header>
    <main>
      <h2>WORK EXPERIENCE</h2>
      <ol class="Ex">
        <li>
          <h3>Sales/ 2011-2013</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore deleniti dignissimos officiis earum enim natus possimus, error ullam est totam saepe? Mollitia minima provident, eum assumenda aliquid maiores ipsum.</p>
        </li>
        <li>
          <h3>Sales/ 2011-2013</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore deleniti dignissimos officiis earum enim natus possimus, error ullam est totam saepe? Mollitia minima provident, eum assumenda aliquid maiores ipsum.</p>
        </li>
        <li>
          <h3>Sales/ 2011-2013</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore deleniti dignissimos officiis earum enim natus possimus, error ullam est totam saepe? Mollitia minima provident, eum assumenda aliquid maiores ipsum.</p>
        </li>
      </ol>
      <h2>EDUCATION</h2>
        <ol class="Ex">
          <li>
            <h3>College/ 2008-2011</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore deleniti dignissimos officiis earum enim natus possimus, error ullam est totam saepe? Mollitia minima provident, eum assumenda aliquid maiores ipsum.</p>
          </li>
          <li>
            <h3>High School/ 2005-2008</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet tempore deleniti dignissimos officiis earum enim natus possimus, error ullam est totam saepe? Mollitia minima provident, eum assumenda aliquid maiores ipsum.</p>
          </li>
      </ol>
    </main>
    <footer class="clearfix">
      <div class="aside aside-left">
        <h2>EXTRA CURRICULAR ACTIVITIES</h2>
        <ol>
          <li>
            <h3>Volunteer</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.</p>
          </li>
          <li>
            <h3>Volunteer</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.</p>
          </li>
        </ol>
      </div>
      <div class="aside aside-right clearfix"">
        <h2>PROFESIONAL SKILLS</h2>
        <ol>
          <li>
            <h3>HTML&CSS</h3>
          </li>
          <li>
            <h3>JAVASCRIPT</h3>
          </li>
          <li>
            <h3>JQUERY</h3>
          </li>
          <li>
            <h3>PS</h3>
          </li>
          <li>
            <h3>AI</h3>
          </li>
        </ol>
      </div>
    </footer>
  </div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容