给我写一个完整版的桌面结构网站。支持网站宽度1200px。支持内容上下结构，居中显示。

好的！我将为你生成一个**完整版的桌面结构网站HTML文件**，采用宽度固定为1200px、内容上下结构、居中对齐的布局，适合展示品牌、导航、内容与底部信息。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>桌面结构 · 1200固定宽度</title>  <style> /* 全局重置 */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: #f5f7fb; /* 柔光 */ font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.5; color: #1e293b; display: flex; flex-direction: column; min-height: 100vh; } /* 主容器 – 限制宽度1200px + 水平居中 */ .site-wrapper { max-width: 1200px; width: 100%; margin: 0 auto; /* 经典居中 */ background: #ffffff; box-shadow: 0 0 0 1px rgba(0,0,0,0.02), 0 8px 24px rgba(0,0,0,0.04); display: flex; flex-direction: column; min-height: 100vh; } /* ---------- 上下结构核心区 ---------- */ header, .hero, .features, .footer { width: 100%; } /* 内部统一左右留白，保证内容呼吸感 */ .container { padding: 0 32px; } /* ---------- 头部 / 导航 ---------- */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid #e9edf4; flex-wrap: wrap; gap: 16px; } .logo { font-weight: 700; font-size: 1.75rem; letter-spacing: -0.02em; background: linear-gradient(145deg, #2563eb, #0f172a); -webkit-background-clip: text; background-clip: text; color: transparent; } .nav-links { display: flex; gap: 28px; list-style: none; } .nav-links a { text-decoration: none; color: #334155; font-weight: 500; transition: color 0.2s; font-size: 1rem; } .nav-links a:hover { color: #2563eb; } .btn-outline { border: 1px solid #cbd5e1; background: transparent; padding: 8px 20px; border-radius: 40px; font-weight: 500; color: #1e293b; transition: 0.2s; cursor: default; /* 演示用 */ } .btn-outline:hover { background: #f1f5f9; border-color: #94a3b8; } /* ---------- 主视觉 / Hero ---------- */ .hero { padding: 72px 0 64px; text-align: center; background: #ffffff; } .hero h1 { font-size: 3rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; color: #0f172a; } .hero p { font-size: 1.2rem; color: #475569; max-width: 700px; margin: 0 auto 36px; } .hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn-primary { background: #2563eb; color: white; padding: 12px 36px; border-radius: 60px; font-weight: 600; border: none; cursor: default; /* 演示 */ transition: 0.15s; font-size: 1rem; box-shadow: 0 4px 8px rgba(37, 99, 235, 0.2); } .btn-primary:hover { background: #1d4ed8; box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3); } .btn-ghost { background: transparent; border: 1px solid #cbd5e1; padding: 12px 36px; border-radius: 60px; font-weight: 500; color: #1e293b; cursor: default; transition: 0.2s; } .btn-ghost:hover { background: #f8fafc; border-color: #94a3b8; } /* ---------- 特性/内容卡片区（上下结构的一部分） ---------- */ .features { padding: 60px 0 72px; background: #fafcff; border-top: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .feature-card { background: white; padding: 28px 24px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.03); transition: 0.2s; border: 1px solid #f1f5f9; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05); border-color: #e2e8f0; } .feature-icon { font-size: 2.2rem; margin-bottom: 12px; display: inline-block; } .feature-card h3 { font-size: 1.3rem; margin-bottom: 8px; font-weight: 600; } .feature-card p { color: #475569; font-size: 0.95rem; } /* ---------- 底部 Footer (上下结构末端) ---------- */ .footer { margin-top: auto; /* 粘性底部，但content少时依然在wrapper内 */ background: #0f172a; color: #cbd5e1; padding: 40px 0 32px; } .footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; } .footer-brand { max-width: 280px; } .footer-brand h4 { color: white; font-size: 1.4rem; margin-bottom: 6px; font-weight: 600; } .footer-brand p { font-size: 0.9rem; line-height: 1.6; opacity: 0.7; } .footer-links { display: flex; gap: 48px; flex-wrap: wrap; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; } .footer-links a:hover { color: white; } .footer-bottom { border-top: 1px solid #1e293b; margin-top: 40px; padding-top: 20px; text-align: center; font-size: 0.85rem; opacity: 0.6; } /* ---------- 针对小屏微调 ---------- */ @media (max-width: 768px) { .container { padding: 0 20px; } .features-grid { grid-template-columns: 1fr; gap: 20px; } .hero h1 { font-size: 2.2rem; } .navbar { flex-direction: column; align-items: flex-start; } .nav-links { flex-wrap: wrap; gap: 16px; } .footer-content { flex-direction: column; } } /* 保证任何超宽内容都不破坏1200约束 */ img, video, iframe { max-width: 100%; } </style> </head> <body> <div class="site-wrapper">  <header class="container"> <nav class="navbar"> <div class="logo">◈ 框架</div> <ul class="nav-links"> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">案例</a></li> <li><a href="#">关于</a></li> </ul> <div class="btn-outline">登录</div> </nav> </header>  <section class="hero container"> <h1>桌面级 · 稳固结构</h1> <p>1200px 固定宽度 · 上下居中布局。纯粹、干净、专为桌面体验优化。卡片与内容都在呼吸。</p> <div class="hero-actions"> <span class="btn-primary">开始使用</span> <span class="btn-ghost">了解更多</span> </div> </section>  <section class="features container"> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">🧩</div> <h3>模块化</h3> <p>每个组件独立而统一，栅格系统保持完美的12列对齐。适合构建后台或展示型站点。</p> </div> <div class="feature-card"> <div class="feature-icon">⚡</div> <h3>轻量响应</h3> <p>虽然以1200桌面为主，移动端依然优雅降级。弹性容器与排版保证可读性。</p> </div> <div class="feature-card"> <div class="feature-icon">🎯</div> <h3>居中布局</h3> <p>全站使用 max-width + margin:auto，内容始终水平居中。上下结构清晰分明。</p> </div> </div> </section>  <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-brand"> <h4>◈ 框架</h4> <p>坚持极简与秩序 · 1200 固定宽度结构示例。适合产品官网、文档及桌面管理应用。</p> </div> <div class="footer-links"> <ul> <li><strong style="color:white;">产品</strong></li> <li><a href="#">功能</a></li> <li><a href="#">价格</a></li> <li><a href="#">更新日志</a></li> </ul> <ul> <li><strong style="color:white;">公司</strong></li> <li><a href="#">团队</a></li> <li><a href="#">博客</a></li> <li><a href="#">加入我们</a></li> </ul> <ul> <li><strong style="color:white;">支持</strong></li> <li><a href="#">帮助中心</a></li> <li><a href="#">文档</a></li> <li><a href="#">状态</a></li> </ul> </div> </div> <div class="footer-bottom"> © 2025 桌面结构演示 · 仅做布局示例 </div> </div> </footer> </div>  </body> </html> ``` ### 布局特性与内容模块这个页面围绕“固定宽度、上下结构、居中展示”的核心需求设计，主要分为以下几个功能区域： - **顶部导航区**：包含品牌标识、导航链接和登录按钮，采用灵活的水平布局，便于用户快速浏览主要栏目。 - **主视觉区（Hero）**：展示核心、描述文字和操作按钮，用于吸引用户注意力并引导下一步操作。 - **特性内容区**：通过三列卡片网格展示产品特点，每张卡片包含图标、和描述，适合突出关键信息。 - **底部信息区**：包含品牌介绍、多列导航链接和版权信息，提供站点地图和辅助链接，增强网站完整性和导航深度。所有内容均被包裹在最大宽度1200px的容器中，并通过 `margin: 0 auto` 实现水平居中，同时利用 `flexbox` 保证各区块在垂直方向上的顺序排列。 ######[AI写代码神器 | 3177点数解答 | 2026-06-11 18:46:33]

服务商

更多选项

快捷项

自定义