个人简历代码html简书,项目展示DEMO，个人简历DEMO

项目展示DEMO

* {

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;

}

My Project

Select one or more projects in which you're interested.

Demo1

Demo2

Demo3

Demo4

Demo5

View Sourse

Instructions

Author:

Shaw Roc

Resume Demo

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;

}

Shaw Roc

Graphic&Web Designer

CONTACTS

A Suzhou, Jiangsu, PR.China

M 150 8888 8888

E coldplay1204@hotmail.com

W www.jianshu.com/u/2c1354e9c9d1

WORK EXPERIENCE

1. Sales/ 2011-2013

   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.

2. Sales/ 2011-2013

   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.

3. Sales/ 2011-2013

   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.

EDUCATION

1. College/ 2008-2011

   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.

2. High School/ 2005-2008

   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.

EXTRA CURRICULAR ACTIVITIES

1. Volunteer

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.

2. Volunteer

   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.

PROFESIONAL SKILLS

1. HTML&CSS

2. JAVASCRIPT

3. JQUERY

4. PS

5. AI