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