简历生成

代码模式怎么用？在通义官网点击代码模式，在对话框用大白话描述你的需求，通义会自动生成代码及应用预览。

请设计一个简洁且现代的个人简历网页，页面内容包括个人信息、工作经历、技能展示和教育背景。使用 HTML 和 CSS 实现整个页面，确保页面简洁、清晰并且具有专业感。以下是详细的要求：

1. 页面结构与布局

页面语言和编码：

使用 en 作为页面语言，字符集使用 UTF-8，确保页面能够正确显示各种字符。

整体布局：

页面背景色为淡灰色（#f5f5f5），整个页面无缝地融入现代化设计风格。

主体简历内容放置在一个 .resume-container 容器中，容器的最大宽度为 400px，背景色为白色（#fff），且具有圆角（border-radius: 10px），并加上轻微的阴影（box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)）以增加视觉深度。

.resume-container 的高度设置为 600px，并使用 padding: 40px 来保证内边距，整体内容居中。

2. 头部（Header）

个人名字：使用 <h1> 元素显示“通通”作为姓名，字体颜色为紫色（#615ced），字号为 24px，确保名字突出且视觉吸引力强。

职业描述：紧接着使用 <p> 元素显示简短的个人职业描述，如“AI Assistant | Intelligent Companion | Problem Solver”，字号为 12px，颜色为浅灰色（#777），字体权重为正常（font-weight: 400），使其与姓名区分开但保持清晰。

3. 模块布局

工作经历（Experience）

标题：使用 <h2> 元素显示“Experience”，字号为 18px，底部有一条紫色（#615ced）的横线作为分隔（border-bottom: 0.75px solid #615ced）。

每项经历：每项工作经历使用 .experience 类，包含职位名称（<h3>）、工作时间段（<p>）、职位描述（<p>）。职位名称为黑色（#333），描述内容为灰色（#616161），行高（line-height: 1.5）以便阅读。

技能展示（Skills）

标题：使用 <h2> 元素显示“Skills”，字号为 18px，底部有紫色横线（border-bottom: 0.75px solid #615ced）。

技能列表：技能项使用无序列表（<ul>），每个技能项以列表元素（<li>）呈现，背景为淡紫色（#E0DFFF），文字颜色为紫色（#615ced），并使用圆角（border-radius: 8px），字体大小为 12px，设置了适当的间距（margin: 4px）确保每个技能项分开显示。

教育背景（Education）

标题：同样使用 <h2> 元素显示“Education”，字号为 18px，底部有紫色横线（border-bottom: 0.75px solid #615ced）。

教育项目：每个教育项目使用 .education 类，包含教育机构、时间和描述信息。教育项目标题使用 14px 字号，描述使用 12px 字号，描述字体颜色为灰色（#616161），行高（line-height: 1.5）保持简洁明了。

4. 响应式设计

页面布局应该具备良好的响应式设计，确保在不同屏幕上能够自适应展示。简历容器（.resume-container）最大宽度为 400px，因此页面内容能够适应手机、平板和桌面屏幕。

例如，在小屏幕下，简历会根据屏幕尺寸自动缩放并且保证整体布局不失衡。

5. 字体和颜色

字体：使用 Google Fonts 的 Roboto 字体，该字体适合网页排版，简洁且现代。

页面中不同的部分采用了不同的字体粗细（300、400、700）来区分信息层级。

主色调：紫色（#615ced）为页面主色，应用于标题、底部横线、技能项的文字等，突出页面的现代感和专业性。

背景色：

页面背景色为淡灰色（#f5f5f5），简历容器背景色为白色（#fff），两者搭配让整个页面看起来简洁且舒适。

6. 视觉效果和动态行为

阴影效果：简历容器使用了轻微的阴影效果（box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)），让简历看起来更有立体感。

间距与对齐：模块之间（如工作经历、教育背景等）保持适当的间距，确保内容不会显得拥挤。模块标题的底部有紫色横线，突出了模块的边界并增强了层次感。

7. 其他注意事项

页面各部分（如工作经历、技能、教育背景等）之间应有合适的间距（margin-bottom: 20px），保证内容清晰，便于用户阅读。

页面应该兼容不同的浏览器，并且保证字体和颜色的显示一致，确保良好的用户体验。