使用div+css创建一份简单的简历，宽度为A4纸大小，高度自动。
直接上代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
| <!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，可根据需要进行调整。
效果图：
