PC端左右结构固定宽度布局网站完整实现代码

我来为您提供一个**完整版PC端左右结构布局的网站代码**，包含头部、左右内容区、底部板块，**不支持自适应**（固定宽度）。采用HTML + CSS + 简单JavaScript实现交互效果。 --- ## 🛠 准备工作 **技术栈**：HTML5 + CSS3 + 原生JavaScript（无需额外依赖） **文件结构**： ``` project/ ├── index.html ├── style.css └── script.js ``` --- ## 🧩 核心代码实现 ### 📄 HTML 结构（index.html） ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>PC端左右结构布局</title>  <link rel="stylesheet" href="style.css"> </head> <body>  <div class="container">  <header class="header"> <div class="logo">我的Logo</div> <nav class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系</a></li> </ul> </nav> </header>  <main class="main">  <aside class="sidebar"> <h2>侧边栏</h2> <ul> <li>菜单项 1</li> <li>菜单项 2</li> <li>菜单项 3</li> <li>菜单项 4</li> </ul> <div class="sidebar-widget"> <h3>公告</h3> <p>欢迎访问我们的网站！</p> </div> <button id="toggleSidebar">切换侧边栏隐藏</button> </aside>  <section class="content"> <h1>主内容区域</h1> <p>这是一个固定宽度的PC端左右布局示例。左侧为侧边栏（250px），右侧为内容区（剩余空间）。</p> <p>不支持自适应，所有尺寸均为固定值，适合大屏显示器（≥1024px）。</p> <div class="card"> <h3>卡片 1</h3> <p>这里是卡片内容，展示信息。</p> </div> <div class="card"> <h3>卡片 2</h3> <p>另一个卡片示例。</p> </div> </section> </main>  <footer class="footer"> <p>© 2025 左右结构PC站点｜所有权利保留</p> </footer> </div>  <script src="script.js"></script> </body> </html> ``` --- ### 🎨 CSS 样式（style.css） ```css /* ========== 全局重置 ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; background-color: #f0f2f5; color: #333; /* 固定页面宽度，不支持自适应 */ min-width: 1200px; /* 强制定宽 */ } /* ========== 主容器：固定宽度居中 ========== */ .container { width: 1200px; /* 固定宽度 */ margin: 0 auto; /* 水平居中 */ background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.1); min-height: 100vh; /* 至少撑满视口高度 */ } /* ========== 头部 ========== */ .header { display: flex; justify-content: space-between; align-items: center; height: 70px; padding: 0 30px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .logo { font-size: 24px; font-weight: bold; letter-spacing: 2px; } .nav ul { list-style: none; display: flex; gap: 30px; } .nav ul li a { color: #fff; text-decoration: none; font-size: 16px; padding: 8px 12px; border-radius: 4px; transition: background-color 0.3s; } .nav ul li a:hover { background-color: rgba(255,255,255,0.2); } /* ========== 主体（左右结构） ========== */ .main { display: flex; min-height: 600px; } /* ----- 左侧边栏 ----- */ .sidebar { width: 250px; /* 固定宽度 */ background-color: #fafafa; padding: 20px; border-right: 1px solid #ddd; transition: width 0.3s, padding 0.3s, opacity 0.3s; /* 用于隐藏动画 */ } .sidebar h2 { font-size: 18px; border-bottom: 2px solid #667eea; padding-bottom: 10px; margin-bottom: 15px; } .sidebar ul { list-style: none; } .sidebar ul li { padding: 10px 8px; border-bottom: 1px dashed #e0e0e0; cursor: pointer; transition: background-color 0.2s; } .sidebar ul li:hover { background-color: #eef0ff; color: #667eea; } .sidebar-widget { margin-top: 30px; padding: 15px; background-color: #e8ecf1; border-radius: 6px; } .sidebar-widget h3 { font-size: 15px; margin-bottom: 8px; } #toggleSidebar { margin-top: 20px; padding: 8px 12px; background-color: #667eea; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; } #toggleSidebar:hover { background-color: #5a6fd6; } /* 侧边栏隐藏状态（通过JS切换类） */ .sidebar.hidden { width: 0; padding: 0; overflow: hidden; opacity: 0; border-right: none; } /* 隐藏时让内部元素不可见 */ .sidebar.hidden * { display: none; } /* ----- 右侧内容区 ----- */ .content { flex: 1; /* 占用剩余空间 */ padding: 30px; background-color: #fff; } .content h1 { font-size: 22px; color: #667eea; margin-bottom: 20px; } .content p { line-height: 1.8; margin-bottom: 15px; color: #555; } .card { background-color: #f9f9ff; border: 1px solid #e0e6ff; border-radius: 8px; padding: 20px; margin-bottom: 15px; } .card h3 { font-size: 18px; color: #333; margin-bottom: 10px; } /* ========== 底部 ========== */ .footer { height: 60px; display: flex; justify-content: center; align-items: center; background-color: #2c3e50; color: #bdc3c7; font-size: 14px; letter-spacing: 1px; } ``` --- ### ⚡ JavaScript 交互（script.js） ```javascript // 侧边栏隐藏/显示切换功能 document.addEventListener('DOMContentLoaded', function() { const sidebar = document.querySelector('.sidebar'); const toggleBtn = document.getElementById('toggleSidebar'); if (toggleBtn && sidebar) { toggleBtn.addEventListener('click', function() { sidebar.classList.toggle('hidden'); // 更新按钮文字 if (sidebar.classList.contains('hidden')) { toggleBtn.textContent = '显示侧边栏'; } else { toggleBtn.textContent = '切换侧边栏隐藏'; } }); } }); ``` --- ## 🧭 代码功能解析 | 模块 | 说明 | |------|------| | **头部** | 左Logo + 右导航菜单，使用渐变色 | | **左侧边栏** | 固定 250px 宽度，含菜单列表、公告栏、隐藏按钮 | | **右侧内容区** | 弹性宽度（`flex:1`），包含、文本、卡片 | | **底部** | 深色，版权信息居中 | | **交互** | 点击按钮可隐藏/显示左侧边栏，并更新按钮文字 | --- ## ⚠️ 关键设计说明 1. **不支持自适应** - 容器 `width: 1200px` 固定，`body` 设置 `min-width: 1200px` 防止缩小变形。 - 所有宽度单位均为 `px`，无 `%`、`vw`、`em` 等相对单位。 - 无 `@media` 断点。 2. **侧边栏隐藏动画** 使用CSS transition 实现平滑隐藏效果，同时隐藏内部所有元素（`* { display: none }`）。 3. **左右结构实现** 使用 `display: flex` 弹性布局，侧边栏固定宽度，内容区 `flex:1` 自动填充剩余空间。 --- ## 💡 进阶建议 - **增加固定定位导航**：给 `.header` 添加 `position: fixed; top:0; z-index:100`，并给 `.main` 加上 `margin-top:70px`。 - **添加更多交互**：侧边栏菜单点击切换高亮、面包屑导航、回到顶部按钮。 - **优化加载性能**：将CSS/JS压缩合并，减少HTTP请求。 - **SEO优化**：在 `<head>` 中添加 `<meta name="description">` 和语义化标签。 - **安全建议**：对用户输入内容（如评论区）进行XSS过滤，使用 `textContent` 替代 `innerHTML`。 --- ## 📚 学习资源推荐 - [MDN Web Docs - CSS Flexbox](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout) - [CSS-Tricks - A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [W3Schools - CSS Layout](https://www.w3schools.com/css/css_layout.asp) --- ## ❗ 常见问题（FAQ） **Q: 页面在手机上看很小怎么办？** A: 本设计不支持移动端，手机浏览请横屏或缩放。如需移动适配请使用自适应方案。 **Q: 如何修改左右宽度比例？** A: 修改 `.sidebar` 的 `width` 值，并确保 `.content` 的 `flex` 属性配合。 **Q: 侧边栏隐藏后内容区未自动扩展？** A: 这是预期的，因为容器总宽度固定。如需扩展，可在 `.sidebar.hidden` 时让 `.content` 的 `flex` 自动填充。 --- ## 🧑‍💻 开发建议 1. **代码版本控制**：使用Git管理项目，分模块提交。 2. **代码规范**：保持CSS选择器层级清晰，避免过深嵌套。 3. **测试兼容性**：在不同浏览器（Chrome、Firefox、Edge）上测试布局效果。 4. **善用浏览器开发者工具**：F12 检查元素，调试样式和交互。 --- ######[AI写代码神器 | 2763点数解答 | 2026-06-09 11:32:26]

服务商

更多选项

快捷项

自定义