css布局实现一个简洁的个人简历html代码
代码语言：html
所属分类：布局界面
代码描述：使用css布局实现一个简洁的个人简历html代码，包含个人信息、工作经验、教育经历、项目经验。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
<style>
.flex-box {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column
}
.flex-box .edu-box {
-webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1
}
.template-container {
position:relative;
width:794px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
background:#fff;
padding-bottom:84px;
}
.vip-header {
height:84px;
background-size:contain
}
.item-box {
padding:0 60px 40px
}
.item-box .content-box {
margin-left:10px;
margin-top:20px
}
.avatar {
width:108px;
height:108px;
border-radius:54px
}
.name-box {
padding-bottom:0;
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.name-box .name {
font-size:30px;
font-weight:700;
color:#000;
line-height:42px;
margin-top:6px;
margin-bottom:15px
}
.phone-location-box {
padding-left:60px
}
.phone-location-box p {
font-size:13px;
font-weight:400;
color:#333;
line-height:28px
}
.phone-location-box p .phone-row img {
display:inline-block;
width:16px;
height:16px;
vertical-align:middle;
margin-right:6px
}
.phone-location-box .phone-row span {
vertical-align:middle;
margin-right:18px
}
.phone-location-box .phone-row span:last-child {
margin-right:0
}
.user-info {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
width:470px;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.user-info span {
margin-top:0
}
.user-info span:first-child {
white-space:nowrap;
margin-right:18px;
margin-top:0
}
.user-info .phone-row {
margin-top:0
}
.large-title {
width:100%;
height:33px;
line-height:33px;
font-size:18px;
font-weight:700;
color:#fff;
position:relative
}
.large-title:after {
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;
content:"";
background:-o-linear-gradient(right,#fff 0,rgba(0,123,134,.6) 100%);
background:-webkit-gradient(linear,right top,left top,from(#fff),to(rgba(0,123,134,.6)));
background:linear-gradient(270deg,#fff,rgba(0,123,134,.6))
}
.large-title .title {
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.large-title .title p:first-child {
background:#007b86;
padding-left:16px;
border-top-left-radius:8px
}
.large-title .title .color {
width:74px;
height:33px;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEoAAAAhCAMAAABJPc3aAAABpFBMVEUAAAAAAAAAgIAAZmYAmZkAgIAAkpIAgIAAcY4Ai4sAgIAAdokAiIgAgI8AeIcAgIAAgI4AeYYAeYYAgIsAgIoAhIQAgIkAe4wAgIcAfIMAfIMAeIcAfIkAeYYAgIYAfYgAeoUAfYgAgIUAfYgAeoUAgIUAfYcAgIUAgIoAfYcAe4QAe4kAgIkAe4QAeYYAfYYAe4gAe4QAfYYAe4QAe4gAfIMAfoUAfIcAeoUAfIcAeoUAfIcAeoUAeYYAeYYAfIYAeYMAeYYAe4QAe4QAe4cAfYUAeYQAe4QAfIMAfIYAfIMAe4UAeYMAfIYAe4QAeYMAeYYAe4QAe4QAeoMAfIUAe4QAeoUAe4QAeoMAeoMAfIUAeoUAe4QAe4QAe4YAe4QAe4QAe4QAfIUAe4QAe4QAeoUAe4QAe4YAeoUAe4YAe4UAeoUAfIUAe4QAe4YAe4YAe4UAe4QAe4UAe4YAeoYAe4UAe4UAe4YAe4UAeoYAfIYAe4YAe4YAe4UAe4cAe4YAeoYAe4YAe4UAe4UAe4UAeoYAe4YAe4YAe4YAe4YAe4cAe4bEwSQuAAAAi3RSTlMAAQQFBQYHCAkLDA0PEBESEhMVFhgbHB8gISMkJyoqKywtLi8wMDEyMjM0NDQ4OTk6PD0+PkBBQkVGR0hJTE5QVFRVWVlaXV1hYWVmZ2doaWlqbG1tbm9wcXNze3x+foGFh4iJi46Rk5SanZ+hoqSqrrW8v8jJy9HT3eXm6Ovr7O7u8fX3+Pn6+/3+VHugMgAAAYZJREFUSMeN1dVWQlEUheEDFood2IqFYjd2YHcLdneDhdgYB+dLe4l73rjWA3zj33vs0KC/+7yHbldoFmZGnA57aGyFORazJhgAAF4vllzKTHWW2/9OQbJBSAH+XdVyjTYqlj3PJKWgn5C10KZatngpheAZWYvtqlWWIKXwvcddTdQVLaXwuEzWeKVq5RukFK6IcnWrlD1VTH2sEDVbpVLFRikFL2c5KcsipvQN3vla2vkIKYUbzuqnrAwxFdzmw1WvUqUmKYV7zhqirGwx9bPPVjNZMVIKPqaGicoRUzhiq4WsWDH14ObnhqhcMYVzzuogK0lMvfCtnqxQqQKDlMIlZ3VRVoqYCvx3q4uMUgrXnNVHWeli6ueYrVay4qQUApu8xDpaYqSUwvMqWRO0XVajlIJ/jayxavoXw6QUnra4i54ba5SUwucpWXP0L5YkSingbp2wwRoVywqXUvjy0GGd71V332YxCilAvz2gf2PAoWKZZiEF4M2zo2rTPQ3q7U4zaZqm/QKRAmTw2tNDqwAAAABJRU5ErkJggg==) no-repeat;
margin-left:-1px
}
.company-job {
width:100%;
font-size:13px;
color:#333;
line-height:21px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between
}
.company-job .item {
display:inline-block;
font-size:13px;
font-weight:400;
color:#000;
line-height:26px
}
.company-job .item:first-of-type {
font-size:15px;
font-weight:700;
margin-right:30px;
max-width:300px;
white-space:pre-line;
word-break:break-word
}
.edu-box .company-job {
width:100%
}
.edu-box .company-job .item {
margin-right:0
}
.edu-box .company-job .item:nth-child(2) {
margin-left:30px;
margin-right:40px
}
.edu-box .content-box>.item {
margin-bottom:16px
}
.edu-box .content-box>.item:last-child {
margin-bottom:0
}
.edu-box .item {
white-space:normal
}
.edu-box .little-title {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-ms-flex-pack:justify;
justify-content:space-between
}
.duration {
line-height:21px;
margin-left:20px;
white-space:nowrap;
width:120px;
text-align:right
}
.duration,.edu-duty {
font-size:13px;
font-weight:400;
color:#333
}
.edu-duty {
width:100%;
line-height:26px;
margin-top:8px;
margin-bottom:16px;
white-space:pre-line;
word-break:break-all
}
.job-box .little-title {
line-height:21px;
margin-bottom:12px
}
.job-box .job-item {
margin-bottom:20px
}
.job-box .job-item:last-child {
margin-bottom:0
}
.job-box .label {
font-size:13px;
font-weight:700;
color:#333;
line-height:21px
}
.job-box .project-list {
margin-bottom:12px
}
.job-box .project-list:last-child {
margin-bottom:0
}
.job-box .project-list .project-item {
font-size:13px;
font-weight:400;
line-height:26px;
white-space:pre-line;
word-break:break-word;
color:#333
}
.job-box .project-list .project-item:last-child {
margin-bottom:0
}
.certificate-box .item {
margin-right:22px;
white-space:pre-line;
word-break:break-word
}
.certificate-box .item {
line-height:26px;
font-size:13px;
font-weight:400;
color:#333
}
div.item,li.item,li.project-item {
white-space:pre-line;
word-break:break-word
}
.location-row {
clear:both
}
.edu-container .company-job {
display:block
}
.company-box {
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.preview-box {
width:794px;
min-height:1124px;
background:#fff;
margin:20px auto 62px;
box-shadow:0 8px 20px 2px rgba(0,0,0,.08);
overflow:hidden
}
html {
font-family:sans-serif;
line-height:1.15;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
img {
border-style:none
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
* {
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent
}
body,div,h5,h6,li,p,ul {
margin:0;
padding:0
}
body {
font-family:Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
font-size:14px;
line-height:1.5;
color:#414a60;
background-color:#fff;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
:after,:before {
box-sizing:border-box;
-webkit-box-sizing:border-box
}
li,ul {
list-style:none
}
img {
border:none
}
body,html {
height:100%
}
::selection {
color:#fff;
background:#18c3b1
}
::-moz-selection {
color:#fff;
background:#18c3b1
}
::-webkit-input-placeholder {
color:#d1d4db
}
::-moz-placeholder {
color:#d1d4db
}
:-ms-input-placeholder {
color:#d1d4db
}
body::-webkit-scrollbar-track-piece {
background-color:#f1f1f1;
border-radius:0;
-webkit-border-radius:0
}
body::-webkit-scrollbar {
width:4px;
height:4px
}
body::-webkit-scrollbar-thumb {
height:50px;
background-color:#ddd;
border-radius:10px
}
body::-webkit-scrollbar-thumb:hover {
height:50px;
background-color:#ccc
}
body::-webkit-scrollbar-corner {
background-color:#f1f1f1
}
@-moz-document url-prefix() {
}.el-input::-webkit-scrollbar:horizontal {
height:6px
}
</style>
</head>
<body>
<div class="switch-templates-wrapper" headerrander="true">
<div class="preview-box">
<div class="preview-wrapper">
<div class="template-container">
<div class="flex-box">
<div class="vip-header"></div>
<div class="item-box name-avatar-box">
<div class="name-box"><img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" class="avatar">
<div class="phone-location-box">
<h6 class="name">王美丽</h6>
<p class="user-info"><span> 女 | 生日：1989-12 | 上海 </span><span><span class="phone-row"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAGH0lEQVR4Xu2aa2wUZRSGzzuzLbeiBChiE0CgZXfnskGiYIRgRBMFg0QSUSGEiKgBJUGDP4igKMSYaGI0CCreYhQhipoYiTFigvrDGONl59udLbYUAogaBSGlUNqdY6alUqB0vrl0p0L7d9/3nPc8c/rt7uyALvE/XOLzUx+Avg0IScCydqcZxQ0gnkyMXWVlWJ5KpRpCli2ZPdS/QDZXuJccZwMRDeyU+IgC9VbDSH5fsilCNAoMwMrl17NDj3fVG6DDCsqm63pNLkS2klgDAbBEYTOzs6S7hADVVwwacM3YsWP/KckkAZv4BmBZ9lomflKmHwifGUZqNgCW0ceh8QXAsmoXMhXf8RNUAT1sGNrLfjyl1EoDEKJ+tMPN9jkHnmdWgBoTKsx0Or3XUxyDQBqAJeztzDw3SEYQPjbNdCBvkH5+PFIAhLBvcZg/91O4s7btDEhgoplKZYPW6CmfFICsld9FRNPDhABok2loy8LU6AmvJ4Bsbe04OlWsD98cBzJmelT4OtFW8AQghH2/w/xaFG1HVA6tGDly5PEoakVVwxOAZdmvMPGDUTT8XwLIivwOYpoZGgAolzE0I3SdiAt4bkBW5AUx6WH7QlHuM/XUm2HrRO33BGAJ+xgzDw7TGAqeN/X0Y2Fq9JRXAkC+mZnKgwZQoKwxjNT6oP6e9nkCyFp2ExEPCBCklRTlgYyeeiuAt2QWTwCWyO9jptF+EoHoD0VRF+h6cqcfXxxaTwB+PwW6N0O4TJ2aSSYLcQzkt6cnAEvkNzLTUunCwKqMkX5WWh+z0BtArjCPHWebbM6EmrhB0yZ8LauPW+cNYM+eK6ip+RAze2rbhlHV2zJackfcg8n2lxrKEvZXzHyjTFGAXjQNbYWMtjdopAAIYS9ymN+WCQzgGA8eeFVmzJgjMvq4NZIA/qxw+O8DRHy5VGDghYyRflRKG7NICoCbMSvy64hptVxeFBMqT9Y07Uc5fXwqaQBC7B/K1LhX9nsBQHbl8KHX9rbv/+eilgbgGi3LfoaJV8leLxC9a5raQll9HDpfAAqFwuBTrVwg5irZsCBliWmm3pDVl1rnC0D7FtTexVTcKh8UJ1QlMVXXa36S95RO6RvA6QPxS2K6STom8Bu47DrTrN4v7SmRMBCAfL6+prXY7F7RQfI5IQYNLJ82fvz4o/Ke85V1dXUjTp68rMkwRjSGqdPhDQSgbQvanw3wd4sLtNPU0zMBtPgNL4R9DxM/zUzV7g8tTLR9QL/EIzU1NQf81uqsDwyg/TzIb2Oieb4CAB+aeupuAEUZX9vB2+K4h+id5+txVFVoma6nt8jU6koTCkBDQ8OQxuMnfmamMb4CAFtMPbUIQGt3PvdHGbQUP2Umrdv6wGZTTz0UZLNCAXBDCbF7osOt3/o7D8h9PO2TYcOGLKiqqmrqarhsvvZmKjpbiLhSBi4Iu4CKuYYx6rCMPvQZ0LlJLleY4zB/xMyKn+YEyqlQl+p68psOHzOrIm8/RYxVfusB9CuofJZhVNfJ5gi9AR2NLMteycTPyTY+6yACfiGm7whQmXkKEZtB6rgeAIe4TJkhe0suMgDth6L9EhMvDxo+Oh8O9itXpiSTyYNeNSMF4N41EqKwKarfEr3Cd/c6CD8YRup6r4MxUgBuoHYI9utMtDjMAJF4QU9kDG1d96Ai6XR2EffwEqKwMe5NAOh309CuLDmAjoZCFFY77HR7BXqA/38l3XcF09AmxAbAbXz6I7P7gEWiJ4c9vzaKIJplmukvYgXgNheidppDzjY/9xHCwALoFAjzDSO93atO5IfghRq63+KaTra8T8wzvEKFeR3AXyDlDsNIup9OPf9KBuD0O4SSy9WudJjXBvzF2WMgWOVlmOPncf2SAjhzONZVO9TyasTb8IGC4Yv93ieIBcAZEPZsh8ndhkmeu3pBAU4QaEXGSAd6ki1WAB0z5XK1Mx2nOJ+A25n5MhkYABwCv6ei/xpNG7dPxtOVplcAOLMRXO6oBVMp8tVMNIkYE5loNMCVzCgS6AiYcgzemVD6bw0zeEfPXgUg6FUM4+sDEIbexeDt24CL4SqGmaFvA8LQuxi8l/wG/AtJKRNf9deAoAAAAABJRU5ErkJggg=="><span >186******01</span></span>
<!---->
</span>
</p>
<p class="location-row"> 离职-随时到岗 | 工作经验：15年以上经验 | 求职意向: 技术总监 | 期望薪资：40-45K </p>
</div>
</div>
</div>
<div class="item-box certificate-box">
<div class="large-title">
<div class="title">
<p>个人优势</p>
<p class="color"></p>
</div>
</div>
<ul class="content-box">
<li class="item">1、11年的团队组建与项目管理经验
</li>
<li class="item">2、8年的团队组建与项目管理经验
</li>
<li class="item"> 3、熟悉springboot、dubbo、zk、hadoop、spark
</li>
</ul>
</div>
<div class="item-box job-box">
<div class="large-title">
<div class="title">
<p>工作经历</p>
<p class="color"></p>
</div>
</div>
<div class="content-box">
<ul>
<li class="job-item">
<div class="little-title">
<h5 class="company-job">
<div class="company-box"><span class="item">浙江林浩有限公司</span><span class="item">CTO</span></div>
<div class="duration">2017.11-至今</div>
</h5>
</di.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0