项目展示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 ProjectSelect one or more projects in which you're interested. Author:Shaw RocResume 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 DesignerWORK EXPERIENCESales/ 2011-2013Lorem 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.Sales/ 2011-2013Lorem 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.Sales/ 2011-2013Lorem 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.EDUCATIONCollege/ 2008-2011Lorem 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.High School/ 2005-2008Lorem 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 ACTIVITIESVolunteerLorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.VolunteerLorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta assumenda nesciunt quos ullam sint nisi, suscipit alias eum, tenetur, commodi natus iusto.PROFESIONAL SKILLSHTML&CSSJAVASCRIPTJQUERYPSAI}

本文讲述了如何用html来写一份简单的个人简历个人简历

姓名		性别		文化程度		照片
		身高		政治面貌
籍贯			出生年月
户口所在地			婚否		民族
身份证号码			现居住地址
毕业院校				毕业时间
学习专业				爱好特长
个人简介
就学时间	学校		学年	学历	专业	担任职务
英语应用水平				职业期望
计算机应用水平				生活要求
工作经历	时间	工作地点			职务
待遇要求
联系方式	移动电话		现在住址		邮编
	紧急联系人		与本人关系		联系电话

打开网页如图}