个人服务器从零开始 | 3.0 ①主网页代码
- 2026-09-21 08:42:52
个人服务器从零开始 | 3.0 ①主网页代码在上一版本个人服务器从零开始 | 服务器网页代码的基础上 更新了一下，效果展示： 
支持更高级的登陆 
通过多个设备（电脑、手机等）上传和下载多个格式图片。 
话不多说，主页面（index.html）的代码如下： 账号登陆、图片处理的代码，在下一篇文章中。 欢迎点赞收藏，关注不迷路。
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Andy的建模实验室</title><style>* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; }/* 动态渐变背景 */body {background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);background-size: 400% 400%;animation: gradientBG 15s ease infinite;min-height: 100vh;padding: 20px;color: #333;}@keyframes gradientBG {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}.container {max-width: 800px;margin: 40px auto;padding: 40px;background: rgba(255, 255, 255, 0.92);border-radius: 24px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.3);}header {text-align: center;margin-bottom: 50px;}.world-map-art {margin: 25px 0;text-align: center;}.world-icon {font-size: 4.5em;display: block;line-height: 1;filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));}.map-text {display: block;font-size: 1.8em;font-weight: 800;letter-spacing: 4px;background: linear-gradient(90deg, #00c6ff, #0072ff);-webkit-background-clip: text;background-clip: text;color: transparent;margin-top: 5px;text-shadow: 2px 2px 4px rgba(0, 114, 255, 0.2);}h1 {color: #2c3e50;margin-bottom: 10px;font-size: 2.8em;font-weight: 700; /* 加粗 */letter-spacing: -0.5px; /* 紧凑感 */text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */}.subtitle {color: #7f8c8d;font-size: 1.2em;margin-bottom: 25px;}.ip-address {margin-top: 20px;padding: 12px;background: rgba(241, 248, 233, 0.9);border-radius: 12px;font-family: monospace;color: #388e3c;font-size: 1.1em;border: 1px dashed #388e3c;}.links {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px;}.link-card {background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);padding: 25px 20px;border-radius: 16px;text-align: center;transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);border: 2px solid transparent;position: relative;overflow: hidden;}.link-card::before {content: '';position: absolute;top: 0; left: -100%;width: 100%; height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);transition: left 0.7s;}.link-card:hover::before {left: 100%;}.link-card:hover {transform: translateY(-8px) scale(1.03);box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);border-color: #2196f3;background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);}.link-card a {text-decoration: none;color: #2c3e50;font-weight: 600;display: block;font-size: 1.1em;position: relative;z-index: 1;}.link-card .desc {color: #666;font-size: 0.95em;margin-top: 10px;position: relative;z-index: 1;}footer {margin-top: 50px;text-align: center;color: #5a6c7d;font-size: 0.95em;line-height: 1.6;padding-top: 20px;border-top: 1px solid rgba(0, 0, 0, 0.1);}/* 登录入口按钮 */.login-entry {text-align: center;margin-top: 40px;}.login-btn {display: inline-block;padding: 14px 35px;background: linear-gradient(45deg, #6a11cb, #2575fc);color: white;text-decoration: none;border-radius: 50px;font-weight: 600;font-size: 1.1em;transition: all 0.3s ease;box-shadow: 0 5px 15px rgba(106, 17, 203, 0.4);border: none;cursor: pointer;}.login-btn:hover {transform: translateY(-3px);box-shadow: 0 8px 20px rgba(106, 17, 203, 0.6);background: linear-gradient(45deg, #2575fc, #6a11cb);}</style></head><body><divclass="container"><header><h1>Andy的建模实验室</h1><pclass="subtitle">探索 • 创造 • 无限可能</p><!-- 世界地图艺术字 --><divclass="world-map-art"><spanclass="world-icon">🌍</span><spanclass="map-text">WORLD MAP</span></div><divclass="ip-address">服务器公网IP：99.99.128.188</div></header><sectionclass="links"><divclass="link-card"><ahref="https://www.google.com"target="_blank">Google</a><divclass="desc">探索世界</div></div><divclass="link-card"><ahref="https://github.com"target="_blank">GitHub</a><divclass="desc">代码宇宙</div></div><divclass="link-card"><ahref="https://gitee.com"target="_blank">Gitee</a><divclass="desc">中文代码仓</div></div><divclass="link-card"><ahref="https://chat.openai.com"target="_blank">ChatGPT</a><divclass="desc">智能助手</div></div><divclass="link-card"><ahref="https://chat.deepseek.com"target="_blank">DeepSeek</a><divclass="desc">AI伙伴</div></div><divclass="link-card"><ahref="https://leetcode.cn"target="_blank">LeetCode</a><divclass="desc">算法修炼</div></div><divclass="link-card"><ahref="https://www.bilibili.com"target="_blank">哔哩哔哩</a><divclass="desc">知识视频</div></div><divclass="link-card"><ahref="/library.html"target="_blank">资料库</a><divclass="desc">(建设中)</div></div></section><divclass="login-entry"><ahref="/login.php"class="login-btn">🔐 开发者中心</a></div><footer><p>© 2025 建模实验室 | 由 Apache 与 Ubuntu 驱动</p><p>动态背景 | 卡片悬停光影</p><p>页面有效期至 2026年12月25日</p></footer></div></body></html>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
