使用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，可根据需要进行调整。
效果图：
博客地址: 怪咖工作室
