{"id":644998,"date":"2024-12-19T22:28:25","date_gmt":"2024-12-19T14:28:25","guid":{"rendered":"http:\/\/puo.cn\/?p=644998"},"modified":"2025-07-27T16:58:28","modified_gmt":"2025-07-27T08:58:28","slug":"%e4%b8%ba%e4%bd%a0%e7%9a%84%e5%8d%95%e9%a1%b5%e7%b1%b3%e8%a1%a8%e5%a2%9e%e5%8a%a0%e7%ae%80%e6%98%93%e9%80%9a%e7%94%a8%e5%90%8e%e5%8f%b0%ef%bc%8c%e6%94%af%e6%8c%81%e4%bb%bb%e6%84%8f%e9%a1%b5%e9%9d%a2","status":"publish","type":"post","link":"http:\/\/puo.cn\/?p=644998","title":{"rendered":"\u4e3a\u4f60\u7684\u5355\u9875\u7c73\u8868\u589e\u52a0\u7b80\u6613\u901a\u7528\u540e\u53f0\uff0c\u652f\u6301\u4efb\u610f\u9875\u9762"},"content":{"rendered":"<p>\u6700\u8fd1\u5728\u5199\u56fe\u5e8a\u540e\u53f0\u7ba1\u7406\u6a21\u5757\uff0c\u7814\u7a76\u5230\u6a21\u677f\u6587\u4ef6\u7f16\u8f91\u8fd9\u5757\uff0cAI \u83b7\u53d6\u5230\u7684\u4ee3\u7801\u5206\u4eab\u7ed9\u5927\u5bb6\u6216\u8bb8\u6709\u4eba\u7528\u5f97\u4e0a\uff1b<\/p>\n<hr \/>\n<p>\u6b64\u4ee3\u7801\u53ef\u4ee5\u4e3a\u4f60\u7684\u5355\u9875\u7c73\u8868\u589e\u52a0\u7b80\u6613\u540e\u53f0\uff0c\u652f\u6301\u4efb\u610f\u9875\u9762\uff0c\u544a\u522b FTP, \u5b9d\u5854\u9762\u677f\u4e4b\u7c7b\u7684\u7ba1\u7406\uff0c\u66f4\u65b9\u4fbf\u4e86\uff1b<\/p>\n<p>\u5b9e\u73b0\u5176\u5b9e\u5f88\u7b80\u5355\uff0c\u5c31\u662f\u6587\u672c\u65b9\u5f0f\u8bfb\u53d6\u6e90\u7801\u4fee\u6539\u4fdd\u5b58\uff1b<\/p>\n<p>\u4ee3\u7801\u5f88\u7b80\u5355\uff0c\u4ee3\u7801\u5185\u6709\u5907\u6ce8\u81ea\u884c\u4fee\u6539\u5373\u53ef\uff1b<\/p>\n<p><strong>\u8fd0\u884c\u73af\u5883\uff1a<\/strong><\/p>\n<p>\u652f\u6301 PHP5.6-8.3\uff0c\u672a\u4f7f\u7528\u6570\u636e\u5e93\uff0c\u652f\u6301\u865a\u62df\u673a.<\/p>\n<p><strong>\u9884\u89c8\uff1a<\/strong><\/p>\n<p>\u767b\u9646\u9875\u9762\uff1a<\/p>\n<p><strong><a rel=\"nofollow\" class=\"fancybox\" href=\"https:\/\/img.cd\/user\/dalao\/img.php?=dbfa3eb5.png\" data-fancybox=\"gallery\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-645000\" title=\"20241219222743783\" src=\"http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222743783.jpg\" alt=\"20241219222743783\" width=\"1228\" height=\"965\" srcset=\"http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222743783.jpg 1228w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222743783-300x236.jpg 300w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222743783-1024x805.jpg 1024w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222743783-768x604.jpg 768w\" sizes=\"auto, (max-width: 1228px) 100vw, 1228px\" \/><\/a><\/strong><\/p>\n<p>\u7ba1\u7406\u9875\u9762\uff1a<\/p>\n<p><strong><a rel=\"nofollow\" class=\"fancybox\" href=\"https:\/\/img.cd\/user\/dalao\/img.php?=4e227afe.png\" data-fancybox=\"gallery\" data-caption=\"\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-644999\" title=\"20241219222741262\" src=\"http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222741262.jpg\" alt=\"20241219222741262\" width=\"1232\" height=\"807\" srcset=\"http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222741262.jpg 1232w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222741262-300x197.jpg 300w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222741262-1024x671.jpg 1024w, http:\/\/loc-wp-cdnimg.jiyun.net\/blogtest\/2024\/12\/20241219222741262-768x503.jpg 768w\" sizes=\"auto, (max-width: 1232px) 100vw, 1232px\" \/><\/a><\/strong><\/p>\n<p><strong>\u4ee3\u7801\uff1a<\/strong><\/p>\n<p>1.login.php\u00a0 \u00a0\/\/ \u767b\u9646\u9875\u9762<\/p>\n<div class=\"code-toolbar code-dai\">\n<pre class=\"  language-php\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n<span class=\"token comment\">\/\/\u6b64\u6587\u4ef6\u4e3a\u767b\u9646\u9875\u9762<\/span>\r\n<span class=\"token comment\">\/\/<\/span>\r\n<span class=\"token comment\">\/\/ login.php<\/span>\r\n<span class=\"token function\">session_start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token variable\">$logged_in_key<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$config<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'login_admin'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u4ece\u914d\u7f6e\u4e2d\u83b7\u53d6\u52a8\u6001\u7684\u767b\u5f55\u6807\u8bc6\u7b26<\/span>\r\n\r\n<span class=\"token comment\">\/\/ \u68c0\u67e5\u7528\u6237\u662f\u5426\u5df2\u7ecf\u767b\u5f55\uff0c\u5982\u679c\u5df2\u767b\u5f55\u5219\u8df3\u8f6c\u5230\u7ba1\u7406\u9875\u9762<\/span>\r\n<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token function\">empty<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token variable\">$logged_in_key<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token variable\">$logged_in_key<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'Location: admin.php'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token function\">exit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token function\">ini_set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'display_errors'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token function\">ini_set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'display_startup_errors'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token function\">error_reporting<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">E_ALL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token variable\">$pageTitle<\/span> <span class=\"token operator\">=<\/span> <span class=\"token double-quoted-string string\">\"Login\"<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token variable\">$usera<\/span> <span class=\"token operator\">=<\/span> <span class=\"token double-quoted-string string\">\"admin\"<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/\u767b\u9646\u7528\u6237\u540d<\/span>\r\n<span class=\"token variable\">$passa<\/span> <span class=\"token operator\">=<\/span> <span class=\"token double-quoted-string string\">\"admin\"<\/span><span class=\"token punctuation\">;<\/span><span class=\"token comment\">\/\/\u767b\u9646\u5bc6\u7801<\/span>\r\n\r\n<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'REQUEST_METHOD'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">===<\/span> <span class=\"token single-quoted-string string\">'POST'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token variable\">$username<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$_POST<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'username'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token variable\">$password<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$_POST<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'password'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n    <span class=\"token comment\">\/\/ \u5224\u65ad\u7528\u6237\u540d\u548c\u5bc6\u7801\u662f\u5426\u5339\u914d<\/span>\r\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token variable\">$username<\/span> <span class=\"token operator\">===<\/span> <span class=\"token variable\">$usera<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token variable\">$password<\/span> <span class=\"token operator\">===<\/span> <span class=\"token variable\">$passa<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token comment\">\/\/ \u767b\u5f55\u6210\u529f\uff0c\u8bbe\u7f6e\u4f1a\u8bdd\u53d8\u91cf\u5e76\u91cd\u5b9a\u5411<\/span>\r\n        <span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'logged_in'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token variable\">$logged_in_key<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8bbe\u7f6e\u52a8\u6001\u7684\u7ba1\u7406\u5458\u767b\u5f55\u72b6\u6001<\/span>\r\n        <span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'Location: admin.php'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token function\">exit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token comment\">\/\/ \u767b\u5f55\u5931\u8d25\uff0c\u53ef\u4ee5\u663e\u793a\u9519\u8bef\u4fe1\u606f<\/span>\r\n        <span class=\"token keyword\">echo<\/span> <span class=\"token double-quoted-string string\">\"\u7528\u6237\u540d\u6216\u5bc6\u7801\u9519\u8bef\"<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n\r\n<span class=\"token doctype\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>en<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>UTF-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>viewport<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">content<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>width=device-width, initial-scale=1.0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n <span class=\"token comment\">&lt;!--&lt;link rel=\"stylesheet\" href=\"\/admin\/css\/themes.css\"&gt;--&gt;<\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\u767b\u9646<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style language-css\">\r\n\r\n<span class=\"token selector\">body<\/span><span class=\"token punctuation\">{<\/span>\r\n      <span class=\"token comment\">\/*display: flex;         \u4f7f\u7528 Flexbox \u5e03\u5c40 *\/<\/span>\r\n     <span class=\"token comment\">\/*justify-content: center; \u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u5185\u5bb9 *\/<\/span>\r\n    <span class=\"token comment\">\/* align-items: center;    Background: #06070d;  \u5b50\u5143\u7d20\u5728\u5782\u76f4\u65b9\u5411\u5c45\u4e2d\u5bf9\u9f50 *\/<\/span>\r\n<span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n\r\n             <span class=\"token property\">font-family<\/span><span class=\"token punctuation\">:<\/span> Arial, sans-serif<span class=\"token punctuation\">;<\/span>\r\n\r\n    <span class=\"token comment\">\/*background-color: #f9f9f9;  \u8bbe\u7f6e\u80cc\u666f\u989c\u8272 background: linear-gradient(180deg, #fed6e3, #c0efec) ;*\/<\/span>\r\n <span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">linear-gradient<\/span><span class=\"token punctuation\">(<\/span>to right, #fed6e3, #c0efec<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style language-css\">\r\n\r\n\r\n<span class=\"token selector\">.title_log<\/span>  <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5206\u914d\u5b50\u5143\u7d20\u4e4b\u95f4\u7684\u7a7a\u95f4 *\/<\/span>\r\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50 *\/<\/span>\r\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u5bbd\u5ea6 *\/<\/span>\r\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u53ef\u9009: \u4e3a\u5bb9\u5668\u6dfb\u52a0\u5185\u8fb9\u8ddd *\/<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>white<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span>0<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span>0<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.left<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 0 0 auto<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5b50\u5143\u7d20\u5de6\u4fa7\u4e0d\u4f38\u5c55\uff0c\u4fdd\u6301\u539f\u6709\u5bbd\u5ea6 *\/<\/span>\r\n    <span class=\"token property\">padding-left<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u60ac\u505c\u65f6\uff0c\u6587\u5b57\u548c SVG \u7684\u989c\u8272\u53d8\u5316 *\/<\/span>\r\n<span class=\"token selector\">.left:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #31be7c<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u6539\u53d8\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.left:hover svg path<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">fill<\/span><span class=\"token punctuation\">:<\/span> currentColor<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* SVG \u8def\u5f84\u989c\u8272\u7ee7\u627f\u6587\u5b57\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n\r\n<span class=\"token selector\">.center<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">flex<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5b50\u5143\u7d20\u5360\u636e\u5269\u4f59\u7a7a\u95f4 *\/<\/span>\r\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6587\u672c\u5c45\u4e2d *\/<\/span>\r\n    <span class=\"token property\">-webkit-user-select<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token selector\">a<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> inherit<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u4fdd\u6301\u94fe\u63a5\u4e0e\u6587\u672c\u7684\u989c\u8272\u4e00\u81f4 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">a:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #ff6a6a<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u6539\u53d8\u6587\u5b57\u989c\u8272 *\/<\/span>\r\n    <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u53f3\u4fa7\u5bfc\u822a\u6837\u5f0f *\/<\/span>\r\n<span class=\"token selector\">.right2<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">padding-right<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> inline-flex<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">gap<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u63a7\u5236\u6bcf\u4e2a\u94fe\u63a5\u4e4b\u95f4\u7684\u95f4\u8ddd *\/<\/span>\r\n  <span class=\"token property\">-webkit-user-select<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.right2 a<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u9ed8\u8ba4\u6587\u5b57\u548cSVG\u989c\u8272\u4e3a\u767d\u8272 *\/<\/span>\r\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> inline-flex<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u60ac\u505c\u65f6\uff0c\u6587\u5b57\u548c SVG \u7684\u989c\u8272\u53d8\u5316 *\/<\/span>\r\n<span class=\"token selector\">.right2 a:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #31be7c<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u6539\u53d8\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.right2 a:hover svg path<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">fill<\/span><span class=\"token punctuation\">:<\/span> currentColor<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* SVG \u8def\u5f84\u989c\u8272\u7ee7\u627f\u6587\u5b57\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.denglu<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> block<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9ed8\u8ba4\u663e\u793a *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u5c4f\u5e55\u5bbd\u5ea6\u5c0f\u4e8e450px\u65f6\u9690\u85cf *\/<\/span>\r\n<span class=\"token atrule\"><span class=\"token rule\">@media<\/span> screen and <span class=\"token punctuation\">(<\/span><span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 450px<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token selector\">.denglu<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9690\u85cf *\/<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token atrule\"><span class=\"token rule\">@media<\/span> screen and <span class=\"token punctuation\">(<\/span><span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 360px<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span>\r\n<span class=\"token selector\">.left<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">padding-left<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.right2<\/span> <span class=\"token punctuation\">{<\/span>\r\n <span class=\"token property\">padding-right<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n\r\n\r\n<span class=\"token selector\">.a1<\/span><span class=\"token punctuation\">{<\/span>\r\n     <span class=\"token comment\">\/*display: flex;*\/<\/span>\r\n    <span class=\"token comment\">\/*justify-content: space-between;  \u5206\u914d\u5b50\u5143\u7d20\u4e4b\u95f4\u7684\u7a7a\u95f4 *\/<\/span>\r\n    <span class=\"token comment\">\/* align-items: center; \u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50 *\/<\/span>\r\n   <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* 768px max-\u8bbe\u7f6e\u5bbd\u5ea6 *\/<\/span>\r\n    <span class=\"token comment\">\/* padding: 10px; \u53ef\u9009: \u4e3a\u5bb9\u5668\u6dfb\u52a0\u5185\u8fb9\u8ddd *\/<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>white<span class=\"token punctuation\">;<\/span> \r\n   <span class=\"token comment\">\/*background:#ff6a6a; *\/<\/span>\r\n   <span class=\"token property\">margin-left<\/span><span class=\"token punctuation\">:<\/span> auto<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 50%<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translateY<\/span><span class=\"token punctuation\">(<\/span>-50%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.puts<\/span><span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 160px!important<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span>50px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span> \r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span>#fe771d<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>#fff<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.puts:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span>#31be7c<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span>         \r\n\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token comment\">&lt;!--\r\n&lt;div class=\"title_log\"&gt;\r\n    &lt;div class=\"left\"&gt;\u5de6\u4fa7\u5185\u5bb9&lt;\/div&gt;\r\n    &lt;div class=\"center\"&gt;\u5c45\u4e2d\u5185\u5bb9&lt;\/div&gt;\r\n    &lt;div class=\"right\"&gt;\u53f3\u4fa7\u5185\u5bb9&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n --&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style language-css\">\r\n\r\n<span class=\"token selector\">*,\r\n*:before,\r\n*:after<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> inherit<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token selector\">.heading<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 1.5em<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 12px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.card<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #fff<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">background-image<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">linear-gradient<\/span><span class=\"token punctuation\">(<\/span>48deg, #fff 0%, #e5efe9 100%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-top-right-radius<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-bottom-left-radius<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> -20px 20px 35px 1px <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>10, 49, 86, 0.18<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 32px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 40px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 400px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.content-wrapper<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 1.1em<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 24px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.content-wrapper:last-child<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.button<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #e5efe9<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #5a72b5<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #121943<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 1em<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 700<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 40px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 150px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.button:focus<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 2px solid transparent<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0px 0px 0px 2px #121943<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">outline<\/span><span class=\"token punctuation\">:<\/span> solid 4px transparent<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.link<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #121943<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.link:focus<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0px 0px 0px 2px #121943<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.input-wrapper<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">flex-direction<\/span><span class=\"token punctuation\">:<\/span> column<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.input-wrapper .label<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> baseline<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 700<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.input-wrapper .optional<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #5a72b5<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 0.9em<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.input-wrapper .input<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #5a72b5<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 40px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">code<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> #e5efe9<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #5a72b5<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 4px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 2px 4px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.modal-header<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> baseline<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> space-between<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.close<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> glow 5s ease-in-out infinite alternate<span class=\"token punctuation\">;<\/span>\r\n      <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> transform 0.5s ease<span class=\"token punctuation\">;<\/span>\r\n      <span class=\"token comment\">\/* \u6dfb\u52a0\u8fc7\u6e21\u6548\u679c\uff0c\u63a7\u5236\u65cb\u8f6c\u65f6\u7684\u8fc7\u6e21\u65f6\u95f4\u548c\u7f13\u52a8\u65b9\u5f0f *\/<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token comment\">\/* \u6dfb\u52a0\u9f20\u6807\u60ac\u505c\u65f6\u65cb\u8f6c\u7684\u6548\u679c *\/<\/span>\r\n  <span class=\"token selector\">.close:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n      <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rotate<\/span><span class=\"token punctuation\">(<\/span>180deg<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n      <span class=\"token comment\">\/* \u9f20\u6807\u60ac\u505c\u65f6\u5e94\u7528\u65cb\u8f6c\u52a8\u753b\uff0c\u65cb\u8f6c\u4e00\u5708\uff08360\u5ea6\uff09 *\/<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.close svg<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.modal-wrapper<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">align-items<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0, 0, 0, 0.7<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n   <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">justify-content<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> fixed<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">#modalA,\r\n#modalC,\r\n#modalvx,\r\n#modalpay,\r\n#modalB<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> opacity 0.25s ease-in-out<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">visibility<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">#modalA:target,\r\n#modalC:target,\r\n#modalvx:target,\r\n#modalpay:target,\r\n#modalB:target<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">visibility<\/span><span class=\"token punctuation\">:<\/span> visible<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">#modalA:target .modal-body,\r\n#modalC:target .modal-body,\r\n#modalvx:target .modal-body,\r\n#modalpay:target .modal-body,\r\n#modalB:target .modal-body<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translateY<\/span><span class=\"token punctuation\">(<\/span>1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">#modalA .modal-body,\r\n#modalC .modal-body,\r\n#modalvx .modal-body,\r\n#modalpay .modal-body,\r\n#modalB .modal-body<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 500px<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translateY<\/span><span class=\"token punctuation\">(<\/span>-100px<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> opacity 0.25s ease-in-out<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.outside-trigger<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">bottom<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> default<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> fixed<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n  <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.button__link<\/span> <span class=\"token punctuation\">{<\/span>\r\n  <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.modal-body.card a<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> green<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n<span class=\"token selector\">.modal-body.card a:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #ff6a6a<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9f20\u6807\u60ac\u505c\u65f6\u7684\u5b57\u4f53\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token comment\">\/* =================login_dvi=============== *\/<\/span>\r\n<span class=\"token selector\">.login_dvi<\/span> <span class=\"token punctuation\">{<\/span>\r\n     <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 50%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5782\u76f4\u65b9\u5411\u4e2d\u5fc3 *\/<\/span>\r\n    <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 50%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6c34\u5e73\u65b9\u5411\u4e2d\u5fc3 *\/<\/span>\r\n    <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-50%, -50%<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u901a\u8fc7translate\u4f7f\u5143\u7d20\u81ea\u8eab\u4e2d\u5fc3\u4e0e\u7236\u5bb9\u5668\u4e2d\u5fc3\u5bf9\u9f50 *\/<\/span>\r\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 80%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5bbd\u5ea6\u8bbe\u4e3a80%\uff0c\u53ef\u4ee5\u6839\u636e\u9700\u8981\u8c03\u6574 *\/<\/span>\r\n    <span class=\"token property\">max-width<\/span><span class=\"token punctuation\">:<\/span> 350px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6700\u5927\u5bbd\u5ea6\u4e3a800px *\/<\/span>\r\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u9002\u5f53\u7684\u5185\u8fb9\u8ddd *\/<\/span>\r\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 18px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u5b57\u4f53\u5927\u5c0f *\/<\/span>\r\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> \t#f9f9f9<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u80cc\u666f\u989c\u8272\u4e3a\u767d\u8272    #ffffff       \t#696969          *\/<\/span>\r\n    <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0 0 10px <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0, 0, 0, 0.1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6dfb\u52a0\u9634\u5f71\u6548\u679c *\/<\/span>\r\n    <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u786e\u4fdd\u5185\u8fb9\u8ddd\u5305\u542b\u5728\u603b\u5bbd\u5ea6\u548c\u9ad8\u5ea6\u5185 *\/<\/span>\r\n    <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u4f7f\u5bb9\u5668\u5185\u6240\u6709\u5143\u7d20\u5de6\u53f3\u5c45\u4e2d *\/<\/span>\r\n <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>255, 255, 255, 0.15<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u534a\u900f\u660e\u80cc\u666f\u989c\u8272\uff0c80% \u4e0d\u900f\u660e\u5ea6 *\/<\/span>\r\n<span class=\"token property\">-webkit-user-select<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u8f93\u5165\u6846\u6837\u5f0f *\/<\/span>\r\n<span class=\"token selector\">.login_dvi input[type=\"text\"],\r\n.login_dvi input[type=\"password\"],\r\n.login_dvi input[type=\"email\"],\r\n.login_dvi input[type=\"submit\"]<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">calc<\/span><span class=\"token punctuation\">(<\/span>100% - 20px<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5bbd\u5ea6\u4e3a100%\u51cf\u53bb\u4e24\u4fa7\u5185\u8fb9\u8ddd\uff0c\u786e\u4fdd\u5bf9\u79f0 *\/<\/span>\r\n    <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 10px 10px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u4e0a\u3001\u4e0b\u3001\u5de6\u3001\u53f3\u5185\u8fb9\u8ddd\u4e3a10px\uff0c\u786e\u4fdd\u5bf9\u79f0 *\/<\/span>\r\n    <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6bcf\u4e2a\u8f93\u5165\u6846\u4e0e\u4e0b\u4e00\u4e2a\u5143\u7d20\u4e4b\u95f4\u7684\u8ddd\u79bb\u4e3a15px *\/<\/span>\r\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #4CAF50<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9ed8\u8ba4\u8fb9\u6846\u6837\u5f0f *\/<\/span>\r\n    <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u5706\u89d2 *\/<\/span>\r\n    <span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> 16px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5b57\u4f53\u5927\u5c0f *\/<\/span>\r\n    <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9ed8\u8ba4\u65e0\u9634\u5f71 *\/<\/span>\r\n    <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u5305\u542b\u5185\u8fb9\u8ddd\u5728\u5185\u7684\u603b\u5bbd\u5ea6\u8ba1\u7b97\u65b9\u5f0f *\/<\/span>\r\n    <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6dfb\u52a0\u8fc7\u6e21\u6548\u679c *\/<\/span>\r\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>255, 255, 255, 0.15<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u534a\u900f\u660e\u80cc\u666f\u989c\u8272\uff0c80% \u4e0d\u900f\u660e\u5ea6 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u8bbe\u7f6e\u6587\u672c\u6846\u548c\u5bc6\u7801\u6846\u900f\u660e\u5ea6 *\/<\/span>\r\n<span class=\"token selector\">.login_dvi input[type=\"text\"],\r\n.login_dvi input[type=\"password\"]<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0.45<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u900f\u660e\u5ea6\u4e3a0.75 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token comment\">\/* \u8f93\u5165\u6846\u805a\u7126\u6837\u5f0f *\/<\/span>\r\n<span class=\"token selector\">.login_dvi input[type=\"text\"]:focus,\r\n.login_dvi input[type=\"password\"]:focus,\r\n.login_dvi input[type=\"email\"]:focus<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">border-color<\/span><span class=\"token punctuation\">:<\/span> #45a049<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u805a\u7126\u65f6\u8fb9\u6846\u9ad8\u4eae\u4e3a\u84dd\u8272 *\/<\/span>\r\n    <span class=\"token property\">box-shadow<\/span><span class=\"token punctuation\">:<\/span> 0 0 8px <span class=\"token function\">rgba<\/span><span class=\"token punctuation\">(<\/span>0, 123, 255, 0.5<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u805a\u7126\u65f6\u6dfb\u52a0\u84dd\u8272\u9634\u5f71 *\/<\/span>\r\n    <span class=\"token property\">outline<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u53bb\u9664\u9ed8\u8ba4\u7684\u805a\u7126\u8fb9\u6846 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n\r\n<span class=\"token comment\">\/* \u8868\u5355\u4e0e\u5bb9\u5668\u8fb9\u6846\u7684\u8ddd\u79bb *\/<\/span>\r\n<span class=\"token selector\">form<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">padding-top<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8868\u5355\u5185\u90e8\u4e0e\u5bb9\u5668\u8fb9\u8ddd *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* \u6309\u94ae\u6837\u5f0f *\/<\/span>\r\n<span class=\"token selector\">.login_dvi input[type=\"submit\"]<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #4CAF50<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6309\u94ae\u80cc\u666f\u989c\u8272 *\/<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> white<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6309\u94ae\u6587\u672c\u989c\u8272 *\/<\/span>\r\n    <span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9f20\u6807\u60ac\u505c\u65f6\u663e\u793a\u624b\u52bf *\/<\/span>\r\n    <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u79fb\u9664\u6309\u94ae\u8fb9\u6846 *\/<\/span>\r\n <span class=\"token property\">border-radius<\/span><span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u5706\u89d2 *\/<\/span>\r\n <span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 15px<span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token selector\">.login_dvi input[type=\"submit\"]:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #45a049<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u6309\u94ae\u80cc\u666f\u989c\u8272\u53d8\u6df1 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n<span class=\"token comment\">\/* ================================ *\/<\/span>\r\n<\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token comment\">&lt;!-- Modal --&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>modal-wrapper<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>modalA<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span> 9999<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>modal-body card<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span>#000<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t&lt;div class=\"modal-header\"style=\"color:#000;\"&gt;\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h2 <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>heading<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>About Me<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h2<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>#!<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">role<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>button<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>close<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-label<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>close this modal<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 24 24<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n\t\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\u672c\u540e\u53f0\u767b\u9646\u4ee3\u7801\u5df2\u514d\u8d39\u5f00\u6e90<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span>\u652f\u6301PHP5.6-8.3\uff0c\u672a\u4f7f\u7528\u6570\u636e\u5e93\uff0c\u652f\u6301\u865a\u62df\u673a\u642d\u5efa\u4f7f\u7528.<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>p<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\t<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>#!<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>outside-trigger<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>title_log<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> flex<span class=\"token punctuation\">;<\/span> <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>100%<span class=\"token punctuation\">;<\/span> <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span>50px<span class=\"token punctuation\">;<\/span><span class=\"token property\">white-space<\/span><span class=\"token punctuation\">:<\/span> nowrap<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u7981\u6b62\u6587\u672c\u6362\u884c *\/<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>left<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg <span class=\"token attr-name\">xmlns<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/www.w3.org\/2000\/svg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>20<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>20<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>white<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 448 512<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n<span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n\r\n<span class=\"token comment\">\/\/ \u83b7\u53d6\u57df\u540d\u5e76\u5904\u7406<\/span>\r\n<span class=\"token variable\">$host<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">isset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'HTTP_HOST'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">?<\/span> <span class=\"token function\">htmlspecialchars<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'HTTP_HOST'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token single-quoted-string string\">''<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token variable\">$protocol<\/span> <span class=\"token operator\">=<\/span> <span class=\"token function\">isset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'HTTPS'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'HTTPS'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">===<\/span> <span class=\"token single-quoted-string string\">'on'<\/span> <span class=\"token operator\">?<\/span> <span class=\"token single-quoted-string string\">'https:\/\/'<\/span> <span class=\"token punctuation\">:<\/span> <span class=\"token single-quoted-string string\">'http:\/\/'<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token comment\">\/\/ \u751f\u6210\u94fe\u63a5<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token single-quoted-string string\">'&lt;div class=\"center2\" style=\"font-size:24px;\"&gt;'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token single-quoted-string string\">'&lt;a href=\"'<\/span> <span class=\"token punctuation\">.<\/span> <span class=\"token variable\">$protocol<\/span> <span class=\"token punctuation\">.<\/span> <span class=\"token variable\">$host<\/span> <span class=\"token punctuation\">.<\/span> <span class=\"token single-quoted-string string\">'\"&gt;'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token single-quoted-string string\">'\u540e\u53f0\u767b\u9646'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token single-quoted-string string\">'&lt;\/a&gt;'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token single-quoted-string string\">'&lt;\/div&gt;'<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>right2<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>#modalA<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">role<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>button<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>svg <span class=\"token attr-name\">xmlns<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>http:\/\/www.w3.org\/2000\/svg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">width<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>20<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">height<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>20<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">fill<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>currentColor<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>bi bi-yin-yang<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">viewBox<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>0 0 16 16<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>M9.167 4.5a1.167 1.167 0 1 1-2.334 0 1.167 1.167 0 0 1 2.334 0<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>path <span class=\"token attr-name\">d<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1 8a7 7 0 0 1 7-7 3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 0 0 7 7 7 0 0 1-7-7m7 4.667a1.167 1.167 0 1 1 0-2.334 1.167 1.167 0 0 1 0 2.334<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">\/&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>svg<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>btn-text<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span>18px<span class=\"token punctuation\">;<\/span><span class=\"token property\">margin-left<\/span><span class=\"token punctuation\">:<\/span>6px<span class=\"token punctuation\">;<\/span><span class=\"token property\">letter-spacing<\/span><span class=\"token punctuation\">:<\/span> 3px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u5173\u4e8e<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  \r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    \r\n \r\n  \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div  <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>a1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">display<\/span><span class=\"token punctuation\">:<\/span> block<span class=\"token punctuation\">;<\/span><span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 20px 0 0<span class=\"token punctuation\">;<\/span> <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> center<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>parent-container<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>login_dvi<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form <span class=\"token attr-name\">action<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>login.php<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">method<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>post<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n            <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>text<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>username<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">placeholder<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u7528\u6237\u540d<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n            &lt;input type=\"password\" name=\"password\" placeholder=\"\u5bc6\u7801\"required&gt;\r\n            <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u767b\u5f55<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n       <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>form<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n\r\n   <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style language-css\">\r\n        <span class=\"token comment\">\/* \u5168\u5c40\u91cd\u7f6e\uff0c\u786e\u4fdd\u6ca1\u6709\u9ed8\u8ba4\u7684\u5916\u8fb9\u8ddd *\/<\/span>\r\n        <span class=\"token selector\">*<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">margin<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">box-sizing<\/span><span class=\"token punctuation\">:<\/span> border-box<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u786e\u4fdd\u6240\u6709\u5143\u7d20\u7684\u5bbd\u9ad8\u8ba1\u7b97 *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token comment\">\/* \u53d6\u6d88\u5168\u5c40\u6eda\u52a8\u6761 *\/<\/span>\r\n        <span class=\"token selector\">body<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">overflow<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u9690\u85cf\u6240\u6709\u6eda\u52a8\u6761 *\/<\/span>\r\n            <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100vh<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u9ad8\u5ea6\u4e3a\u89c6\u53e3\u9ad8\u5ea6 *\/<\/span>\r\n            <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100vw<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u5bbd\u5ea6\u4e3a\u89c6\u53e3\u5bbd\u5ea6 *\/<\/span>\r\n            <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> relative<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u786e\u4fdd\u7236\u5143\u7d20\u5b9a\u4f4d *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token selector\">.background-slider<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> fixed<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">z-index<\/span><span class=\"token punctuation\">:<\/span> -1<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u786e\u4fdd\u5728\u5176\u4ed6\u5185\u5bb9\u540e\u9762 *\/<\/span>\r\n            <span class=\"token property\">overflow<\/span><span class=\"token punctuation\">:<\/span> hidden<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u786e\u4fdd\u6ca1\u6709\u5185\u90e8\u6eda\u52a8\u6761 *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token selector\">.background-slider img<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 50%<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">left<\/span><span class=\"token punctuation\">:<\/span> 50%<span class=\"token punctuation\">;<\/span>\r\n            <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u4e3a100%\u4ee5\u786e\u4fdd\u586b\u5145 *\/<\/span>\r\n            <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u4e3a100%\u4ee5\u786e\u4fdd\u586b\u5145 *\/<\/span>\r\n            <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u521d\u59cb\u900f\u660e\u5ea6\u4e3a0 *\/<\/span>\r\n            <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-50%, -50%<span class=\"token punctuation\">)<\/span> <span class=\"token function\">scale<\/span><span class=\"token punctuation\">(<\/span>1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u521d\u59cb\u72b6\u6001\u5c45\u4e2d\u4e14\u4e0d\u653e\u5927 *\/<\/span>\r\n            <span class=\"token property\">object-fit<\/span><span class=\"token punctuation\">:<\/span> cover<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u4fdd\u6301\u539f\u59cb\u6bd4\u4f8b\u88c1\u526a *\/<\/span>\r\n            <span class=\"token property\">transition<\/span><span class=\"token punctuation\">:<\/span> opacity 1s ease-in-out, transform 6s ease-in-out<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6dfb\u52a0\u900f\u660e\u5ea6\u548c\u7f29\u653e\u7684\u8fc7\u6e21 *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token comment\">\/* \u521d\u59cb\u72b6\u6001: \u7b2c\u4e00\u5f20\u56fe\u7247\u53ef\u89c1 *\/<\/span>\r\n        <span class=\"token selector\">.background-slider img:first-child<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u7b2c\u4e00\u4e2a\u56fe\u7247\u5b8c\u5168\u53ef\u89c1 *\/<\/span>\r\n            <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-50%, -50%<span class=\"token punctuation\">)<\/span> <span class=\"token function\">scale<\/span><span class=\"token punctuation\">(<\/span>1.05<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u521d\u59cb\u653e\u5927\u6548\u679c *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token comment\">\/* \u56fe\u7247\u5728\u663e\u793a\u671f\u95f4\u7684\u6837\u5f0f *\/<\/span>\r\n        <span class=\"token selector\">.background-slider img.active<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 1<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8bbe\u7f6e\u4e3a\u53ef\u89c1 *\/<\/span>\r\n            <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-50%, -50%<span class=\"token punctuation\">)<\/span> <span class=\"token function\">scale<\/span><span class=\"token punctuation\">(<\/span>1.05<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8f7b\u5fae\u653e\u5927 *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token selector\">.background-slider img.fade-out<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token property\">opacity<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u8fc7\u6e21\u5230\u900f\u660e *\/<\/span>\r\n            <span class=\"token property\">transform<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">translate<\/span><span class=\"token punctuation\">(<\/span>-50%, -50%<span class=\"token punctuation\">)<\/span> <span class=\"token function\">scale<\/span><span class=\"token punctuation\">(<\/span>1<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u6062\u590d\u5230\u539f\u59cb\u5927\u5c0f *\/<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n    <\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>background-slider<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/www.ximi.me\/img_src\/bak3.jpeg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u80cc\u666f\u56fe\u72471<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/www.ximi.me\/img_src\/bak2.jpeg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u80cc\u666f\u56fe\u72472<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/www.ximi.me\/img_src\/bak1.jpeg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u80cc\u666f\u56fe\u72473<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>img <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/www.ximi.me\/img_src\/bak4.jpeg<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">alt<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u80cc\u666f\u56fe\u72474<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n  <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script language-javascript\">\r\n        <span class=\"token keyword\">const<\/span> images <span class=\"token operator\">=<\/span> <span class=\"token object\">document<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">querySelectorAll<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'.background-slider img'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token keyword\">let<\/span> currentIndex <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n        <span class=\"token keyword\">function<\/span> <span class=\"token function\">showImage<\/span><span class=\"token punctuation\">(<\/span>index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n            images<span class=\"token punctuation\">.<\/span><span class=\"token function\">forEach<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>image<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n                <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>i <span class=\"token operator\">===<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">add<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'active'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6dfb\u52a0\u6d3b\u52a8\u7c7b<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>opacity <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8bbe\u7f6e\u4e3a\u53ef\u89c1<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>transform <span class=\"token operator\">=<\/span> <span class=\"token string\">'translate(-50%, -50%) scale(1.05)'<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8bbe\u7f6e\u653e\u5927\u6548\u679c<\/span>\r\n                <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>classList<span class=\"token punctuation\">.<\/span><span class=\"token function\">remove<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'active'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u79fb\u9664\u6d3b\u52a8\u7c7b<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>opacity <span class=\"token operator\">=<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u9690\u85cf\u5176\u4ed6\u56fe\u7247<\/span>\r\n                    image<span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>transform <span class=\"token operator\">=<\/span> <span class=\"token string\">'translate(-50%, -50%) scale(1)'<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6062\u590d\u5230\u539f\u59cb\u5927\u5c0f<\/span>\r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n\r\n        <span class=\"token comment\">\/\/ \u521d\u59cb\u663e\u793a\u7b2c\u4e00\u5f20\u56fe\u7247<\/span>\r\n        <span class=\"token function\">showImage<\/span><span class=\"token punctuation\">(<\/span>currentIndex<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n        <span class=\"token comment\">\/\/ \u5b9a\u65f6\u5207\u6362\u56fe\u7247<\/span>\r\n        <span class=\"token function\">setInterval<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token comment\">\/\/ \u5c06\u5f53\u524d\u56fe\u7247\u653e\u5927\u5e76\u900f\u660e\u5ea6\u53d8\u5316<\/span>\r\n            images<span class=\"token punctuation\">[<\/span>currentIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>transform <span class=\"token operator\">=<\/span> <span class=\"token string\">'translate(-50%, -50%) scale(1.05)'<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u653e\u5927\u5f53\u524d\u56fe\u7247<\/span>\r\n            images<span class=\"token punctuation\">[<\/span>currentIndex<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">.<\/span>style<span class=\"token punctuation\">.<\/span>opacity <span class=\"token operator\">=<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u8bbe\u7f6e\u4e3a\u53ef\u89c1<\/span>\r\n\r\n            <span class=\"token comment\">\/\/ \u5ef6\u8fdf\u5207\u6362\u5230\u4e0b\u4e00\u4e2a\u56fe\u7247<\/span>\r\n            <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n                currentIndex <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span>currentIndex <span class=\"token operator\">+<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">%<\/span> images<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u5207\u6362\u5230\u4e0b\u4e00\u4e2a\u56fe\u7247<\/span>\r\n                <span class=\"token function\">showImage<\/span><span class=\"token punctuation\">(<\/span>currentIndex<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u663e\u793a\u4e0b\u4e00\u4e2a\u56fe\u7247<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">6000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ 6\u79d2\u540e\u5207\u6362\u5230\u4e0b\u5f20\u56fe\u7247<\/span>\r\n\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">6000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u6bcf\u5f20\u56fe\u7247\u5c55\u793a6\u79d2<\/span>\r\n\r\n        <span class=\"token comment\">\/\/ \u7981\u7528\u53f3\u952e\u83dc\u5355<\/span>\r\n        <span class=\"token object\">document<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'contextmenu'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>event<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\r\n            event<span class=\"token punctuation\">.<\/span><span class=\"token function\">preventDefault<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u963b\u6b62\u53f3\u952e\u83dc\u5355\u7684\u9ed8\u8ba4\u884c\u4e3a<\/span>\r\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<div class=\"shelter\"><\/div>\n<div class=\"toolbar\">\n<div class=\"toolbar-item\">PHP<\/div>\n<div class=\"toolbar-item\"><button><i id=\"btn-copy-code\" class=\"fontello fontello-tags\">\u590d\u5236<\/i><\/button><\/div>\n<\/div>\n<\/div>\n<p>2.admin.php\/\/ \u540e\u53f0\u7ba1\u7406\u9875\u9762<\/p>\n<div class=\"code-toolbar code-dai\">\n<pre class=\"  language-php\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n<span class=\"token comment\">\/\/\u6b64\u6587\u4ef6\u8c28\u614e\u4fee\u6539<\/span>\r\n<span class=\"token comment\">\/\/<\/span>\r\n<span class=\"token comment\">\/\/\u6dfb\u52a0\u4fee\u6539\u7684\u6587\u4ef6\u53ef\u4ee5\u67e5\u770b\u6b64\u884c\u4ee3\u7801\u3010$files = ['login.php', 'admin.php'];\u3011\uff0c\u5c06\u9700\u8981\u6dfb\u52a0\u9875\u9762\u6dfb\u52a0\u8fdb\u6b64\u6570\u7ec4<\/span>\r\n<span class=\"token comment\">\/\/<\/span>\r\n<span class=\"token comment\">\/\/ admin.php<\/span>\r\n<span class=\"token function\">ini_set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'display_errors'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token function\">ini_set<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'display_startup_errors'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token function\">error_reporting<\/span><span class=\"token punctuation\">(<\/span><span class=\"token constant\">E_ALL<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n\r\n<span class=\"token function\">session_start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token comment\">\/\/ \u68c0\u67e5\u7528\u6237\u662f\u5426\u5df2\u767b\u5f55<\/span>\r\n<span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">empty<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'logged_in'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">||<\/span> <span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'logged_in'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">!==<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token comment\">\/\/ \u5982\u679c\u672a\u767b\u5f55\uff0c\u5219\u91cd\u5b9a\u5411\u5230\u767b\u5f55\u9875\u9762<\/span>\r\n    <span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'Location: login.php'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token function\">exit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n\r\n\r\n<span class=\"token comment\">\/\/ \u8bb0\u5f55\u7ba1\u7406\u5458\u767b\u5f55\u72b6\u6001<\/span>\r\n<span class=\"token variable\">$_SESSION<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'admin_logged_in'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">=<\/span> <span class=\"token boolean\">true<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token comment\">\/\/ \u540e\u7eed\u7684\u7ba1\u7406\u9875\u9762\u4ee3\u7801...<\/span>\r\n<span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n\r\n\r\n<span class=\"token doctype\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>html <span class=\"token attr-name\">lang<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>zh<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>meta <span class=\"token attr-name\">charset<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>UTF-8<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\u7ba1\u7406<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>title<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token style language-css\">\r\n<span class=\"token selector\">a:hover<\/span> <span class=\"token punctuation\">{<\/span>\r\n    <span class=\"token property\">text-decoration<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u663e\u793a\u4e0b\u5212\u7ebf *\/<\/span>\r\n    <span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> #ff6a6a<span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/* \u60ac\u505c\u65f6\u6539\u53d8\u989c\u8272 *\/<\/span>\r\n<span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">table<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 100%<span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token property\">border-collapse<\/span><span class=\"token punctuation\">:<\/span> collapse<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">th, td<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> 1px solid #ddd<span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 8px<span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token property\">text-align<\/span><span class=\"token punctuation\">:<\/span> left<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">th<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">background-color<\/span><span class=\"token punctuation\">:<\/span> #f2f2f2<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">.id-column<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 20px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">.name-column<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 80px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token selector\">.url-column<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span> 200px<span class=\"token punctuation\">;<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n<\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>style<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>head<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div <span class=\"token attr-name\">class<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>center1<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>admin.php<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u540e\u53f0\u7ba1\u7406<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h3<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>logout.php<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u9000\u51fa\u767b\u5f55<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n<span class=\"token comment\">&lt;!-- ========\u540e\u53f0\u9996\u9875 ========================================================== --&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h4<span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u7248\u672c\uff1a<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h4<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>hr<span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\u5f53\u524d\u7248\u672c\uff1aversion 1.01<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\u66f4\u65b0\u65f6\u95f4\uff1a2024-12-13<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token comment\">&lt;!--\r\n&lt;h4&gt;\u91cd\u7f6e\u5bc6\u7801\uff1a&lt;\/h4&gt;\r\n\r\n&lt;div class=\"parent-container\"&gt;\r\n    &lt;div class=\"login_dvi\"&gt;\r\n        &lt;form action=\"admin.php\" method=\"post\"&gt;\r\n            &lt;input type=\"text\" name=\"username\" placeholder=\"\u7528\u6237\u540d\" required&gt;\r\n            &lt;input type=\"password\" name=\"password\" placeholder=\"\u5bc6\u7801\" required&gt;\r\n            &lt;input type=\"password_2\" name=\"password\" placeholder=\"\u91cd\u590d\u5bc6\u7801\"required&gt;\r\n            &lt;input type=\"submit\" value=\"\u767b\u5f55\"&gt;\r\n        &lt;\/form&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n--&gt;<\/span>\r\n\r\n<span class=\"token comment\">&lt;!--========================================================= --&gt;<\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>h4<span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">margin-bottom<\/span><span class=\"token punctuation\">:<\/span> 2px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\u914d\u7f6e\uff1a<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>h4<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>hr<span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">margin-top<\/span><span class=\"token punctuation\">:<\/span> 5px<span class=\"token punctuation\">;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n      \r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script <span class=\"token attr-name\">src<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.6.0\/jquery.min.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token script language-javascript\">\r\n        <span class=\"token keyword\">function<\/span> <span class=\"token function\">loadFile<\/span><span class=\"token punctuation\">(<\/span>filename<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token operator\">$<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">ajax<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\r\n                url<span class=\"token punctuation\">:<\/span> <span class=\"token string\">'load_file.php'<\/span><span class=\"token punctuation\">,<\/span>\r\n                data<span class=\"token punctuation\">:<\/span> <span class=\"token punctuation\">{<\/span> filename<span class=\"token punctuation\">:<\/span> filename <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\r\n                success<span class=\"token punctuation\">:<\/span> <span class=\"token keyword\">function<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n                    <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'#content'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span>data<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'#filename'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">val<\/span><span class=\"token punctuation\">(<\/span>filename<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n                    <span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'#currentFile'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">text<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'\u5f53\u524d\u6587\u4ef6\uff1a'<\/span> <span class=\"token operator\">+<\/span> filename<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token comment\">\/\/ \u663e\u793a\u5f53\u524d\u6587\u4ef6\u540d<\/span>\r\n                   \r\n                <span class=\"token punctuation\">}<\/span>\r\n            <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n    <\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>script<span class=\"token punctuation\">&gt;<\/span><\/span>  \r\n <span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n    <span class=\"token comment\">\/\/ \u6587\u4ef6\u5217\u8868\uff0c\u53ef\u4ee5\u4ece\u6570\u636e\u5e93\u83b7\u53d6<\/span>\r\n    <span class=\"token variable\">$files<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'login.php'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token single-quoted-string string\">'admin.php'<\/span><span class=\"token punctuation\">,<\/span><span class=\"token single-quoted-string string\">'index.php'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>  <span class=\"token comment\">\/\/\u5c06\u9700\u8981\u6dfb\u52a0\u9875\u9762\u6dfb\u52a0\u8fdb\u6b64\u6570\u7ec4<\/span>\r\n\r\n    <span class=\"token comment\">\/\/ \u5904\u7406\u8868\u5355\u63d0\u4ea4<\/span>\r\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'REQUEST_METHOD'<\/span><span class=\"token punctuation\">]<\/span> <span class=\"token operator\">===<\/span> <span class=\"token single-quoted-string string\">'POST'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n        <span class=\"token variable\">$filename<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$_POST<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'filename'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token variable\">$new_content<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$_POST<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'content'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n        <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token function\">file_put_contents<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$filename<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token variable\">$new_content<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">echo<\/span> <span class=\"token double-quoted-string string\">\"\u4fdd\u5b58\u6210\u529f\uff01&lt;br&gt;&lt;br&gt;\"<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span>\r\n            <span class=\"token keyword\">echo<\/span> <span class=\"token double-quoted-string string\">\"\u4fdd\u5b58\u5931\u8d25\uff01\"<\/span><span class=\"token punctuation\">;<\/span>\r\n        <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token punctuation\">}<\/span>\r\n    <span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n        <span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span> <span class=\"token keyword\">foreach<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token variable\">$files<\/span> <span class=\"token keyword\">as<\/span> <span class=\"token variable\">$file<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>a <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>#<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">onclick<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>loadFile(<span class=\"token punctuation\">'<\/span><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span> <span class=\"token keyword\">echo<\/span> <span class=\"token variable\">$file<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token delimiter important\">?&gt;<\/span><\/span><span class=\"token punctuation\">'<\/span>)<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span> <span class=\"token keyword\">echo<\/span> <span class=\"token variable\">$file<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token delimiter important\">?&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>a<span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token entity\" title=\"\u2003\">&amp;emsp;<\/span><span class=\"token entity\" title=\"\u2003\">&amp;emsp;<\/span>\r\n        <span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span> <span class=\"token keyword\">endforeach<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>span <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>currentFile<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>span<span class=\"token punctuation\">&gt;<\/span><\/span> <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>form <span class=\"token attr-name\">method<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>post<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">action<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span> <span class=\"token keyword\">echo<\/span> <span class=\"token variable\">$_SERVER<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'PHP_SELF'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> <span class=\"token delimiter important\">?&gt;<\/span><\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>hidden<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>filename<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>filename<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>textarea <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>content<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>content<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">rows<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>10<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">cols<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>50<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> style<\/span><span class=\"token punctuation\">=\"<\/span><span class=\"token attr-value\"><span class=\"token property\">width<\/span><span class=\"token punctuation\">:<\/span>100%<span class=\"token punctuation\">;<\/span> <span class=\"token property\">height<\/span><span class=\"token punctuation\">:<\/span>420px<\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>textarea<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n        <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>br<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n            <span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>submit<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token attr-value\"><span class=\"token punctuation\">=<\/span><span class=\"token punctuation\">\"<\/span>\u4fdd\u5b58<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\r\n    <span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>form<span class=\"token punctuation\">&gt;<\/span><\/span>   \r\n    \r\n    \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<span class=\"token punctuation\">&gt;<\/span><\/span>    \r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>body<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n<span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>html<span class=\"token punctuation\">&gt;<\/span><\/span>\r\n\r\n\r\n<\/code><\/pre>\n<div class=\"shelter\"><\/div>\n<div class=\"toolbar\">\n<div class=\"toolbar-item\">PHP<\/div>\n<div class=\"toolbar-item\"><button><i id=\"btn-copy-code\" class=\"fontello fontello-tags\">\u590d\u5236<\/i><\/button><\/div>\n<\/div>\n<\/div>\n<p>3.logout.php\/\/ \u9000\u51fa\u767b\u9646<\/p>\n<div class=\"code-toolbar code-dai\">\n<pre class=\"  language-php\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n\r\n<span class=\"token function\">session_start<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n\r\n\r\n<span class=\"token comment\">\/\/ \u6e05\u9664\u4f1a\u8bdd\u53d8\u91cf<\/span>\r\n\r\n<span class=\"token function\">session_unset<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token function\">session_destroy<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n\r\n\r\n<span class=\"token comment\">\/\/ \u91cd\u5b9a\u5411\u5230\u767b\u5f55\u9875\u9762<\/span>\r\n\r\n<span class=\"token function\">header<\/span><span class=\"token punctuation\">(<\/span><span class=\"token single-quoted-string string\">'Location: login.php'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token function\">exit<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n\r\n<span class=\"token delimiter important\">?&gt;<\/span><\/span>\r\n\r\n<\/code><\/pre>\n<div class=\"shelter\"><\/div>\n<div class=\"toolbar\">\n<div class=\"toolbar-item\">PHP<\/div>\n<div class=\"toolbar-item\"><button><i id=\"btn-copy-code\" class=\"fontello fontello-tags\">\u590d\u5236<\/i><\/button><\/div>\n<\/div>\n<\/div>\n<p>4.load_file.php\/\/ \u9875\u9762\u6587\u4ef6\u52a0\u8f7d<\/p>\n<div class=\"code-toolbar code-dai\">\n<pre class=\"  language-php\"><code class=\"  language-php\"><span class=\"token php language-php\"><span class=\"token delimiter important\">&lt;?php<\/span>\r\n<span class=\"token variable\">$filename<\/span> <span class=\"token operator\">=<\/span> <span class=\"token variable\">$_GET<\/span><span class=\"token punctuation\">[<\/span><span class=\"token single-quoted-string string\">'filename'<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token keyword\">echo<\/span> <span class=\"token function\">file_get_contents<\/span><span class=\"token punctuation\">(<\/span><span class=\"token variable\">$filename<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\r\n<span class=\"token delimiter important\">?&gt;<\/span><\/span><\/code><\/pre>\n<div class=\"shelter\"><\/div>\n<div class=\"toolbar\">\n<div class=\"toolbar-item\">PHP<\/div>\n<div class=\"toolbar-item\"><button><i id=\"btn-copy-code\" class=\"fontello fontello-tags\">\u590d\u5236<\/i><\/button><\/div>\n<\/div>\n<\/div>\n<p>5.index.php\u00a0 \/\/ \u6d4b\u8bd5\u6587\u4ef6\uff0c\u53ef\u4ee5\u5220\u9664<\/p>\n<div class=\"code-toolbar code-dai\">\n<pre class=\"  language-php\"><code class=\"  language-php\"><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">!<\/span><span class=\"token constant\">DOCTYPE<\/span> html<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span>html lang<span class=\"token operator\">=<\/span><span class=\"token double-quoted-string string\">\"zh\"<\/span><span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span>head<span class=\"token operator\">&gt;<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>meta charset<span class=\"token operator\">=<\/span><span class=\"token double-quoted-string string\">\"UTF-8\"<\/span><span class=\"token operator\">&gt;<\/span>\r\n    <span class=\"token operator\">&lt;<\/span>title<span class=\"token operator\">&gt;<\/span>\u6d4b\u8bd5\u4e3b\u9875<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>title<span class=\"token operator\">&gt;<\/span>\r\n\r\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>head<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span>body<span class=\"token operator\">&gt;<\/span>\r\n\r\n<span class=\"token operator\">&lt;<\/span>h1<span class=\"token operator\">&gt;<\/span>\u6d4b\u8bd5\u4e3b\u9875\u6587\u4ef6\uff0c\u53ef\u4ee5\u5220\u9664\uff01<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h1<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span>h3<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span>a href<span class=\"token operator\">=<\/span><span class=\"token double-quoted-string string\">\"admin.php\"<\/span><span class=\"token operator\">&gt;<\/span>\u540e\u53f0\u7ba1\u7406<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>a<span class=\"token operator\">&gt;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>h3<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>body<span class=\"token operator\">&gt;<\/span>\r\n<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>html<span class=\"token operator\">&gt;<\/span><\/code><\/pre>\n<div class=\"shelter\"><\/div>\n<div class=\"toolbar\">\n<div class=\"toolbar-item\">PHP<\/div>\n<div class=\"toolbar-item\"><button><i id=\"btn-copy-code\" class=\"fontello fontello-tags\">\u590d\u5236<\/i><\/button><\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<hr \/>\n<p>Blog:\u00a0<a rel=\"nofollow\" href=\"https:\/\/www.ximi.me%20\/\" target=\"_blank\" rel=\"noopener\">https:\/\/www.ximi.me\u00a0<\/a><br \/>\n2024.12.13<\/p>\n<p><strong><a rel=\"nofollow\" href=\"https:\/\/www.ximi.me\/down.php?url=jyht.zip\" target=\"_blank\" rel=\"noopener\">\u6253\u5305\u4e0b\u8f7d\uff1a<\/a><\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6700\u8fd1\u5728\u5199\u56fe\u5e8a\u540e\u53f0\u7ba1\u7406\u6a21\u5757\uff0c\u7814\u7a76\u5230\u6a21\u677f\u6587\u4ef6\u7f16\u8f91\u8fd9\u5757\uff0cAI \u83b7\u53d6\u5230\u7684\u4ee3\u7801\u5206\u4eab\u7ed9\u5927\u5bb6\u6216\u8bb8\u6709\u4eba\u7528\u5f97\u4e0a\uff1b \u6b64\u4ee3\u7801\u53ef\u4ee5\u4e3a\u4f60\u7684\u5355\u9875\u7c73\u8868\u589e\u52a0\u7b80\u6613\u540e\u53f0\uff0c\u652f\u6301\u4efb\u610f\u9875\u9762\uff0c\u544a\u522b FTP, \u5b9d\u5854\u9762\u677f\u4e4b\u7c7b\u7684\u7ba1\u7406\uff0c\u66f4\u65b9\u4fbf\u4e86\uff1b \u5b9e\u73b0\u5176\u5b9e\u5f88\u7b80\u5355\uff0c\u5c31\u662f\u6587\u672c\u65b9\u5f0f\u8bfb\u53d6\u6e90\u7801\u4fee\u6539\u4fdd\u5b58&#8230;<\/p>\n","protected":false},"author":1,"featured_media":644999,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[140],"tags":[41,252],"topic":[343],"class_list":["post-644998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-domain-website","tag-41","tag-252","topic-domains"],"_links":{"self":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/644998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=644998"}],"version-history":[{"count":1,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/644998\/revisions"}],"predecessor-version":[{"id":645001,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/posts\/644998\/revisions\/645001"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=\/wp\/v2\/media\/644999"}],"wp:attachment":[{"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=644998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=644998"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=644998"},{"taxonomy":"topic","embeddable":true,"href":"http:\/\/puo.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftopic&post=644998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}