优化代码结构

This commit is contained in:
张梦南 2025-09-24 17:35:06 +08:00
parent ce4d400560
commit 4de6f689c5
8 changed files with 129 additions and 130 deletions

122
css/style.css Normal file
View File

@ -0,0 +1,122 @@
@font-face {
font-family: 'Pacifico';
src: url('../pacifico/Pacifico.ttf') format('truetype');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
display: flex;
width: 210mm;
height: 297mm;
margin: auto;
background-color: #ffffff;
color: #333;
}
li {
line-height: 1.4;
}
p {
line-height: 1.4;
}
.left {
padding: 55px 34px;
}
.right {
padding: 55px 45px;
}
.left {
width: 61.8%;
background-color: #ffffff;
}
.right {
width: 38.2%;
background-color: #f1f3f5;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin-bottom: 10px;
}
h2 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
color: #1f3a93;
}
ul {
margin-left: 20px;
list-style-type: disc;
}
.section {
margin-bottom: 20px;
}
.contact-info {
margin-top: 25px;
text-align: center;
}
.contact-info h2 {
color: #000000;
}
.contact-info p {
margin-bottom: 6px;
}
.skills {
margin-top: 25px;
width: 100%;
text-align: center;
}
.skills h3 {
font-size: 18px;
margin-bottom: 10px;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.skill-tags span {
background-color: #d0d8e0;
color: #1f3a93;
padding: 4px 10px;
border-radius: 12px;
font-size: 14px;
}
.skill-tags + h3 {
margin-top: 25px;
}
.skill-tags.software span {
background-color: #e3f2fd;
color: #0d47a1;
border: 1px solid #90caf9;
}
.qr {
text-align: center;
padding-top: 25px;
}
.qr img {
width: 150px;
height: 150px;
object-fit: contain;
}
.avatar {
width: 180px;
height: 180px;
margin-bottom: 20px;
object-fit: cover;
border-radius: 10px;
}
.logo {
margin-top: 25px;
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 36px;
color: #010101;
}

View File

@ -4,130 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>张梦南 - 简历</title>
<style>
@font-face {
font-family: 'Pacifico';
src: url('Pacifico.ttf') format('truetype');
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
display: flex;
width: 210mm;
height: 297mm;
margin: auto;
background-color: #ffffff;
color: #333;
}
li {
line-height: 1.4;
}
p {
line-height: 1.4;
}
.left {
padding: 55px 34px;
}
.right {
padding: 55px 45px;
}
.left {
width: 61.8%;
background-color: #ffffff;
}
.right {
width: 38.2%;
background-color: #f1f3f5;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-size: 32px;
margin-bottom: 10px;
}
h2 {
font-size: 20px;
margin-top: 30px;
margin-bottom: 10px;
color: #1f3a93;
}
ul {
margin-left: 20px;
list-style-type: disc;
}
.section {
margin-bottom: 20px;
}
.contact-info {
margin-top: 25px;
text-align: center;
}
.contact-info h2 {
color: #000000;
}
.contact-info p {
margin-bottom: 6px;
}
.skills {
margin-top: 25px;
width: 100%;
text-align: center;
}
.skills h3 {
font-size: 18px;
margin-bottom: 10px;
}
.skill-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.skill-tags span {
background-color: #d0d8e0;
color: #1f3a93;
padding: 4px 10px;
border-radius: 12px;
font-size: 14px;
}
.skill-tags + h3 {
margin-top: 25px;
}
.skill-tags.software span {
background-color: #e3f2fd;
color: #0d47a1;
border: 1px solid #90caf9;
}
.qr {
text-align: center;
padding-top: 25px;
}
.qr img {
width: 150px;
height: 150px;
object-fit: contain;
}
.avatar {
width: 180px;
height: 180px;
margin-bottom: 20px;
object-fit: cover;
border-radius: 10px;
}
.logo {
margin-top: 25px;
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 36px;
color: #010101;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="left">
@ -138,7 +15,7 @@
<div class="section" style="text-align: justify;">
<h2>专业能力</h2>
<ul>
<li>能够利用立创 EDA 进行原理图及 PCB 设计,具备电子元器件焊接能力,熟练使用热风枪和电烙铁。</li>
<li>能够利用立创 EDA 进行原理图及 PCB 设计,具备电子元器件(0201)焊接能力,熟练使用热风枪和电烙铁。</li>
<li>掌握 C / C++ 及 Python 语言进行程序设计。熟悉 Git 基本操作,具有团队开发经验。(C语言程序设计成绩:83、C++高级语言程序设计成绩:85、机器视觉与数字图像处理Python成绩:84)</li>
<li>掌握西门子(SIEMENS) PLC 控制系统梯形图程序编写及仿真软件的应用。(可编程控制器原理及应用成绩:85)</li>
<li>熟悉网络传输协议,能够将本地局域网服务映射至公网;利用 VPN 技术实现两个异地局域网的连接;利用 P2P 技术实现两台设备点对点的数据加密传输。</li>
@ -179,12 +56,12 @@
</div>
<div class="right">
<img src="zmn.jpg" alt="头像" class="avatar">
<img src="photo/zmn.jpg" alt="头像" class="avatar">
<div class="contact-info">
<h2>联系方式</h2>
<p><img src="email.svg" alt="邮箱" style="width:16px; vertical-align:middle; margin-right:8px;">1487537121@qq.com</p>
<p><img src="phone.svg" alt="电话" style="width:16px; vertical-align:middle; margin-right:8px;">18526485303</p>
<p><img src="web.svg" alt="网站" style="width:16px; vertical-align:middle; margin-right:8px;">dreamlife.top</p>
<p><img src="svg/email.svg" alt="邮箱" style="width:16px; vertical-align:middle; margin-right:8px;">1487537121@qq.com</p>
<p><img src="svg/phone.svg" alt="电话" style="width:16px; vertical-align:middle; margin-right:8px;">18526485303</p>
<p><img src="svg/web.svg" alt="网站" style="width:16px; vertical-align:middle; margin-right:8px;">dreamlife.top</p>
</div>
<div class="skills">
@ -208,7 +85,7 @@
<div class="qr">
<h3>个人网站</h3>
<img src="m.png" alt="网站二维码">
<img src="photo/m.png" alt="网站二维码">
<h5>个人网站主页、工具箱、博客、Gitea代码仓库均可通过扫码或访问上方网站查看</h5>
</div>
<div class="logo">DreamLife</div>

View File

Before

Width:  |  Height:  |  Size: 68 KiB

After

Width:  |  Height:  |  Size: 68 KiB

View File

Before

Width:  |  Height:  |  Size: 452 KiB

After

Width:  |  Height:  |  Size: 452 KiB

View File

Before

Width:  |  Height:  |  Size: 566 B

After

Width:  |  Height:  |  Size: 566 B

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 534 B

After

Width:  |  Height:  |  Size: 534 B