优化代码结构

css/style.css

@@ -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;
+    }

index.html

@@ -4,130 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>张梦南 - 简历</title>
-  <style>
+  <link rel="stylesheet" href="css/style.css">
-    @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>
 </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="svg/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="svg/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/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>