完整桌面端 1200px 横向布局页面（含精美404页面）开发示例

好的！我将为你生成一个**完整版桌面端响应式页面**，整体宽度为 **1200px 居中**，采用**横向布局**，并内置一个**精美的 404 页面**。下面我提供一个可直接运行的 HTML + CSS 示例，包含： - 1200px 固定宽度居中布局 - 导航栏 + 主要内容区 + 页脚（横向布局风格） - 内嵌 404 页面（美观、可切换显示） ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>完整桌面页面 · 1200px 横向布局</title> <style> /* 🧹 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #f0f2f5; color: #333; line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } /* 📐 主容器 1200px 居中 */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } /* 🚀 横向布局 flex 辅助 */ .row { display: flex; flex-wrap: wrap; gap: 20px; } /* 🔝 导航栏 */ .navbar { background: #1e1e2f; color: #fff; padding: 16px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .navbar .container { display: flex; justify-content: space-between; align-items: center; } .navbar .logo { font-size: 1.5rem; font-weight: 700; color: #fff; text-decoration: none; } .navbar .nav-links { display: flex; gap: 24px; list-style: none; } .navbar .nav-links a { color: #ddd; text-decoration: none; font-size: 1rem; transition: color 0.2s; } .navbar .nav-links a:hover { color: #fff; } .navbar .nav-links a.active { color: #ffd700; font-weight: 600; } /* 📄 主内容区横向布局 */ .main-content { flex: 1; padding: 40px 0; } .main-content h1 { font-size: 2rem; margin-bottom: 20px; color: #222; } .main-content p { font-size: 1.1rem; color: #555; max-width: 800px; } /* 📦 卡片区域横向排列 (flex 横向) */ .card-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 30px; } .card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); flex: 1 1 280px; /* 最小280px，自动填充横向 */ transition: transform 0.2s, box-shadow 0.2s; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.1); } .card h3 { font-size: 1.3rem; margin-bottom: 10px; color: #1e1e2f; } .card p { color: #666; } /* 🧩 404 页面样式 (精美版) */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: 40px 20px; } .error-page .error-code { font-size: 8rem; font-weight: 800; color: #ff6b6b; line-height: 1; text-shadow: 4px 4px 0 #e0e0e0, 6px 6px 0 rgba(0,0,0,0.05); margin-bottom: 10px; } .error-page .error-message { font-size: 1.8rem; font-weight: 600; color: #333; margin-bottom: 8px; } .error-page .error-description { font-size: 1.1rem; color: #777; max-width: 500px; margin-bottom: 30px; } .error-page .btn-home { display: inline-block; background: #1e1e2f; color: #fff; padding: 12px 32px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 10px rgba(30,30,47,0.3); } .error-page .btn-home:hover { background: #33334d; transform: scale(1.02); } /* 👣 页脚 */ .footer { background: #1e1e2f; color: #aaa; text-align: center; padding: 20px 0; font-size: 0.9rem; margin-top: auto; } .footer a { color: #ffd700; text-decoration: none; } /* 🛡️ 演示切换按钮（仅用于展示 404 切换，正式可删除） */ .demo-toggle { margin-top: 20px; text-align: center; } .demo-toggle button { background: #ffd700; color: #1e1e2f; border: none; padding: 10px 24px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .demo-toggle button:hover { background: #e6c200; } .hidden { display: none !important; } </style> </head> <body>  <nav class="navbar"> <div class="container"> <a href="#" class="logo">⚡ 桌面站点</a> <ul class="nav-links"> <li><a href="#" class="active">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系</a></li> </ul> </div> </nav>  <main class="main-content" id="mainContent"> <div class="container">  <div id="homeSection"> <h1>欢迎来到桌面风格页面</h1> <p>这是基于 1200px 固定宽度、横向布局的精美页面。以下卡片采用 Flex 横向排列，自动换行。</p> <div class="card-grid"> <div class="card"> <h3>🖥️ 响应式布局</h3> <p>整体宽度 1200px 居中，卡片横向排列，适配大屏桌面。</p> </div> <div class="card"> <h3>🎨 现代风格</h3> <p>柔和阴影、圆角卡片、清晰对比度，视觉舒适。</p> </div> <div class="card"> <h3>📦 组件化</h3> <p>导航栏、内容区、404 页面独立模块，易于扩展。</p> </div> <div class="card"> <h3>✨ 精致 404</h3> <p>内嵌精美 404 错误页面，一键切换预览（见下方）。</p> </div> </div>  <div class="demo-toggle"> <button id="show404Btn">🎯 展示 404 页面</button> </div> </div>  <div id="error404Section" class="hidden"> <div class="error-page"> <div class="error-code">404</div> <div class="error-message">页面未找到</div> <div class="error-description"> 很抱歉，您要找的页面可能已被移除、更名或暂时不可用。<br> 请检查链接或返回首页。 </div> <a href="#" class="btn-home" id="backHomeBtn">🏠 返回首页</a> </div> <div class="demo-toggle"> <button id="showHomeBtn">← 返回首页内容</button> </div> </div> </div> </main>  <footer class="footer"> <div class="container"> © 2025 桌面站点 · 版权所有 · <a href="#">隐私政策</a> </div> </footer> <script> // 仅用于演示 404 切换，实际项目可根据路由自行控制 (function() { const homeSection = document.getElementById('homeSection'); const error404Section = document.getElementById('error404Section'); const show404Btn = document.getElementById('show404Btn'); const showHomeBtn = document.getElementById('showHomeBtn'); const backHomeBtn = document.getElementById('backHomeBtn'); function showHome() { homeSection.classList.remove('hidden'); error404Section.classList.add('hidden'); } function show404() { homeSection.classList.add('hidden'); error404Section.classList.remove('hidden'); } if (show404Btn) show404Btn.addEventListener('click', show404); if (showHomeBtn) showHomeBtn.addEventListener('click', showHome); if (backHomeBtn) backHomeBtn.addEventListener('click', showHome); })(); </script> </body> </html> ``` ### 🧩 核心特性说明 - **1200px 固定宽度**：`.container` 类限制最大宽度为 1200px，并自动水平居中。 - **横向布局**：导航栏使用 `flex` 对齐；卡片区域 `.card-grid` 采用 `display: flex` + `flex-wrap`，实现横向排列并自动换行。 - **精美 404 页面**：提供大号字体、柔和阴影、圆角按钮的 404 错误页，视觉友好。 - **演示切换**：页面内置两个切换按钮（“展示 404 页面”/“返回首页”），方便你预览两种状态。 - **响应式增强**：卡片最小宽度 280px，在窄屏下会自动换行，但整体仍保持 1200px 布局。 ### 💡 开发建议 1. **实际路由控制**：演示中的 404 切换仅为前端 Demo，正式项目建议根据 URL 或后端路由动态显示 404 区域。 2. **图标与字体**：可引入 Font Awesome 或 Remix Icon 增强图标展示，进一步提升视觉层次。 3. **深色主题**：若需要深色模式，可在 `.container` 或根元素添加 `data-theme` 属性，并编写相应的 CSS 变量。 4. **SEO 优化**：为 404 页面添加 `<meta name="robots" content="noindex">`，避免被搜索引擎索引。 5. **微交互动画**：卡片 hover 效果已包含，可进一步为 404 页面的数字添加旋转或弹跳动画。 ######[AI写代码神器 | 2816点数解答 | 2026-06-09 22:24:42]

服务商

更多选项

快捷项

自定义