个人服务器从零开始 | 服务器网页代码
- 2026-09-17 08:52:22
个人服务器从零开始 | 服务器网页代码上一篇从零开始建设网站并开发网页。 网页初步效果展示： 
话不多说，代码： 欢迎点赞收藏，关注不迷路。
<!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：88.88.128.128</div></header><sectionclass="links"><!--任何问题请联系公众号 Andy的建模实验室团队法律顾问支持 | Copyright © 2025 --><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 建模实验室 </p><p>动态背景 | 卡片悬停光影</p><p>页面愿景有效期至 2099年12月31日</p></footer></div></body></html>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
