css布局实现一个简洁的个人简历html代码-html代码-BFW代码库

代码语言：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&quo.........完整代码请登录后点击上方下载按钮下载查看