从零搭建响应式企业官网（HTML + CSS + JavaScript 实战）
一、创建项目结构
在本地新建一个项目文件夹：
mkdir company-website cd company-website
创建以下目录结构：
company-website/ │-- index.html │-- about.html │-- services.html │-- contact.html │-- style.css │-- script.js │-- images/
二、编写首页 HTML
创建 index.html 文件：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>未来科技有限公司</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <div class="logo">FutureTech</div> <nav id="nav"> <a href="index.html" class="active">首页</a> <a href="about.html">关于我们</a> <a href="services.html">服务项目</a> <a href="contact.html">联系我们</a> </nav> <div class="menu-icon" id="menuBtn">☰</div> </div> </header> <section class="hero"> <h1>创新驱动未来</h1> <p>我们致力于用科技改变生活，提供专业的企业网站与应用开发方案。</p> <button id="learnMore">了解更多</button> </section> <section class="features"> <h2>我们的优势</h2> <div class="grid"> <div class="card"> <h3>专业团队</h3> <p>拥有经验丰富的开发工程师与UI设计师，提供高质量服务。</p> </div> <div class="card"> <h3>高效开发</h3> <p>采用现代化前端框架与工具，缩短项目周期。</p> </div> <div class="card"> <h3>技术领先</h3> <p>持续学习最新技术趋势，打造可扩展、高性能网站。</p> </div> </div> </section> <footer> <p>© 2025 FutureTech Co., Ltd. 版权所有</p> </footer> <script src="script.js"></script> </body> </html>
三、编写网站样式 style.css
body { margin: 0; font-family: "Microsoft YaHei", sans-serif; color: #333; background-color: #f9fafb; } header { background-color: #1f2937; color: white; position: sticky; top: 0; z-index: 10; padding: 15px 0; } .container { width: 90%; margin: auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 22px; font-weight: bold; } nav a { color: white; text-decoration: none; margin: 0 12px; } nav a.active, nav a:hover { border-bottom: 2px solid #00bfff; } .menu-icon { display: none; font-size: 26px; cursor: pointer; } .hero { background: linear-gradient(120deg, #00bfff, #0078ff); color: white; text-align: center; padding: 100px 20px; } .hero button { background-color: white; color: #0078ff; border: none; padding: 12px 25px; border-radius: 6px; cursor: pointer; font-size: 16px; } .features { width: 80%; margin: 60px auto; text-align: center; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 30px; } .card { background-color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1); border-radius: 10px; padding: 20px; transition: transform 0.2s; } .card:hover { transform: translateY(-5px); } footer { background-color: #1f2937; color: white; text-align: center; padding: 20px; } @media (max-width: 768px) { nav { display: none; flex-direction: column; background-color: #1f2937; position: absolute; top: 60px; right: 0; width: 50%; text-align: center; padding: 10px 0; } nav a { display: block; margin: 10px 0; } .menu-icon { display: block; } nav.show { display: flex; } }
四、编写导航交互脚本 script.js
const menuBtn = document.getElementById("menuBtn"); const nav = document.getElementById("nav"); menuBtn.addEventListener("click", () => { nav.classList.toggle("show"); }); document.getElementById("learnMore").addEventListener("click", () => { window.location.href = "about.html"; });
五、编写“关于我们”页面 about.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于我们 - FutureTech</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <div class="logo">FutureTech</div> <nav> <a href="index.html">首页</a> <a href="about.html" class="active">关于我们</a> <a href="services.html">服务项目</a> <a href="contact.html">联系我们</a> </nav> </div> </header> <section class="content"> <h2>公司简介</h2> <p>FutureTech 成立于 2020 年，是一家专注于网站建设与移动应用开发的科技公司。</p> <p>我们的使命是通过创新技术，为客户打造高效、现代的互联网产品。</p> <h3>团队理念</h3> <ul> <li>客户至上，需求驱动开发</li> <li>技术创新，持续优化性能</li> <li>协作共赢，共建数字未来</li> </ul> </section> <footer> <p>© 2025 FutureTech Co., Ltd.</p> </footer> </body> </html>
六、创建“服务项目”页面 services.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>服务项目 - FutureTech</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <div class="logo">FutureTech</div> <nav> <a href="index.html">首页</a> <a href="about.html">关于我们</a> <a href="services.html" class="active">服务项目</a> <a href="contact.html">联系我们</a> </nav> </div> </header> <section class="content"> <h2>我们的服务</h2> <div class="grid"> <div class="card"> <h3>网站开发</h3> <p>从企业官网到电商系统，全方位网站开发方案。</p> </div> <div class="card"> <h3>移动应用</h3> <p>开发兼容 iOS 与 Android 的高性能 App。</p> </div> <div class="card"> <h3>云解决方案</h3> <p>提供安全、可扩展的云端部署与运维服务。</p> </div> </div> </section> <footer> <p>© 2025 FutureTech Co., Ltd.</p> </footer> </body> </html>
七、创建“联系我们”页面 contact.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>联系我们 - FutureTech</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="container"> <div class="logo">FutureTech</div> <nav> <a href="index.html">首页</a> <a href="about.html">关于我们</a> <a href="services.html">服务项目</a> <a href="contact.html" class="active">联系我们</a> </nav> </div> </header> <section class="contact"> <h2>联系 FutureTech</h2> <form id="contactForm"> <input type="text" id="name" placeholder="姓名" required> <input type="email" id="email" placeholder="邮箱" required> <textarea id="message" placeholder="留言内容" required></textarea> <button type="submit">提交</button> </form> <p id="responseMsg"></p> </section> <footer> <p>© 2025 FutureTech Co., Ltd.</p> </footer> <script> document.getElementById("contactForm").addEventListener("submit", (e) => { e.preventDefault(); const name = document.getElementById("name").value; const email = document.getElementById("email").value; const msg = document.getElementById("message").value; document.getElementById("responseMsg").textContent = `感谢 ${name} 的留言，我们会尽快回复您！`; e.target.reset(); }); </script> </body> </html>
八、移动端优化与自适应布局
在 style.css 底部追加：
@media (max-width: 768px) { .content, .features { width: 90%; } .hero { padding: 60px 20px; } .hero h1 { font-size: 22px; } .hero p { font-size: 15px; } }
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)