<!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>
