使用div+css创建一份简单的简历，宽度为A4纸大小，高度自动。
直接上代码：
<!DOCTYPE html>
<html>
<head>
<title>个人简历</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: #f4f4f4;
}
.resume {
width: 21cm;
max-width: 100%;
padding: 2cm;
box-sizing: border-box;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.header {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
}
.info {
flex-grow: 1;
}
.section {
margin-bottom: 20px;
}
.info-row {
display: flex;
margin-bottom: 8px;
}
.info-label {
width:60px;
max-width: 120px;
font-weight: bold;
}
.info-value {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="resume">
<h2>个人简历</h2>
<div class="header">
<div class="info">
<div class="info-row">
<div class="info-label">姓名:</div>
<div class="info-value">怪咖</div>
</div>
<div class="info-row">
<div class="info-label">性别:</div>
<div class="info-value">女</div>
</div>
<div class="info-row">
<div class="info-label">年龄:</div>
<div class="info-value">26</div>
</div>
<div class="info-row">
<div class="info-label">地址:</div>
<div class="info-value">123 Main St, City, State</div>
</div>
<div class="info-row">
<div class="info-label">电话:</div>
<div class="info-value">123-456-7890</div>
</div>
<div class="info-row">
<div class="info-label">Email:</div>
<div class="info-value">john.doe@example.com</div>
</div>
</div>
<img class="avatar" src="avatar.jpg" alt="头像">
</div>
<div class="section">
<h2>教育背景</h2>
<div class="info-row">
<div class="info-label">学位:</div>
<div class="info-value">Bachelor of Science</div>
</div>
<div class="info-row">
<div class="info-label">学校:</div>
<div class="info-value">ABC University</div>
</div>
<div class="info-row">
<div class="info-label">日期:</div>
<div class="info-value">2016 - 2020</div>
</div>
<div class="info-row">
<div class="info-label">专业:</div>
<div class="info-value">计算机科学</div>
</div>
<div class="info-row">
<div class="info-label">成绩:</div>
<div class="info-value">4.0</div>
</div>
<div class="info-row">
<div class="info-label">荣誉:</div>
<div class="info-value">优秀毕业生</div>
</div>
</div>
<div class="section">
<h2>工作经验</h2>
<div class="info-row">
<div class="info-label">职位:</div>
<div class="info-value">Web Developer</div>
</div>
<div class="info-row">
<div class="info-label">公司:</div>
<div class="info-value">XYZ Company</div>
</div>
<div class="info-row">
<div class="info-label">日期:</div>
<div class="info-value">2020 - 2023</div>
</div>
<div class="info-row">
<div class="info-label">地点:</div>
<div class="info-value">City, State</div>
</div>
<div class="info-row">
<div class="info-label">描述:</div>
<div class="info-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="info-row">
<div class="info-label">成就:</div>
<div class="info-value">优秀员工奖</div>
</div>
</div>
</div>
</body>
</html>
在上述代码中，我们使用了 flex布局将整个简历内容居中显示。通过设置body元素为display: flex，justify-content: center和align-items: center，使简历在页面上水平和垂直居中。简历的主要内容使用div元素和CSS样式进行布局。.resume类设置了宽度为A4纸大小，最大宽度为100%，内边距、背景颜色和阴影效果。头像和简历部分使用.header和.section类进行包装。每个信息行使用.info-row类进行布局。请注意，上述代码中的头像路径和样式可以根据实际情况进行调整，确保头像正常显示。
最后，通过设置body的高度为100vh，将简历的高度自动调整为与视口高度一致，从而适应不同屏幕尺寸。背景颜色设置为#f4f4f4，可根据需要进行调整。
效果图：
博客地址: 怪咖工作室
