从零用HTML+CSS+原生JS构建可直接部署的简洁响应式网站首页

一、前置准备

你只需要2个工具，无需安装复杂框架：

• Visual Studio Code（简称VSCode）：轻量编辑器，自动补全+实时预览必备。下载地址：https://code.visualstudio.com/
• Live Server插件：VSCode插件，一键启动本地预览服务。

1.1 安装Live Server插件

1. 打开VSCode，点击左侧最下方的扩展图标（或按Ctrl+Shift+X快捷键）
2. 在搜索框输入「Live Server」，点击第一个作者为Ritwick Dey的插件
3. 点击蓝色的安装按钮，等待10秒左右安装完成

1.2 创建项目文件夹

1. 在电脑桌面（或你习惯的位置）新建一个文件夹，命名为simple-responsive-homepage
2. 将文件夹拖拽进VSCode窗口，VSCode会自动打开该项目
3. 点击VSCode左侧资源管理器顶部的新建文件图标，依次创建3个文件：
   • index.html
   • style.css
   • script.js

二、编写HTML结构

打开index.html，直接复制下方完整可运行的代码：

```html

你好，我是你的专属首页

极简设计，响应式适配，无需复杂技术即可修改部署

立即联系

关于我们

这是一段关于个人/企业的介绍文字，你可以直接替换成自己的内容，保持简洁有力即可。

用心设计

注重细节，打造舒适的用户体验

快速交付

响应式架构，适配所有主流设备

安全稳定

纯原生代码，无冗余依赖

```

三、编写CSS样式

打开style.css，直接复制下方完整可运行的代码：

```css / 全局重置：消除浏览器默认样式差异 / { margin: 0; padding: 0; box-sizing: border-box; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } / 通用容器：控制内容宽度，居中对齐，适配不同设备 / .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } / 导航栏样式 / .navbar { background-color: fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); position: fixed; top: 0; left: 0; width: 100%; z-index: 999; } .navbar .container { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { font-size: 24px; font-weight: bold; color: 333; text-decoration: none; } .nav-links { display: flex; list-style: none; gap: 30px; } .nav-links a { color: 555; text-decoration: none; font-size: 16px; transition: color 0.3s; } .nav-links a:hover { color: 2563eb; } / 移动端隐藏汉堡菜单默认显示 / .menu-toggle { display: none; background: none; border: none; font-size: 28px; color: 333; cursor: pointer; } / 主视觉区样式 / .hero { margin-top: 70px; min-height: calc(100vh - 70px); background: linear-gradient(135deg, 667eea 0%, 764ba2 100%); display: flex; align-items: center; text-align: center; color: fff; } .hero h1 { font-size: 48px; margin-bottom: 20px; } .hero p { font-size: 20px; margin-bottom: 40px; opacity: 0.9; } .btn-primary { display: inline-block; padding: 15px 40px; background-color: fff; color: 667eea; font-size: 18px; font-weight: bold; text-decoration: none; border-radius: 50px; transition: transform 0.3s, box-shadow 0.3s; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); } / 通用板块样式 / .section { padding: 80px 0; } .section h2 { text-align: center; font-size: 36px; margin-bottom: 20px; color: 333; } .section p { text-align: center; font-size: 18px; color: 666; margin-bottom: 50px; max-width: 700px; margin-left: auto; margin-right: auto; } / 关于区网格样式 / .about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .about-item { text-align: center; padding: 30px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: transform 0.3s; } .about-item:hover { transform: translateY(-5px); } .about-item i { font-size: 50px; color: 2563eb; margin-bottom: 20px; } .about-item h3 { font-size: 22px; margin-bottom: 10px; color: 333; } .about-item p { font-size: 16px; margin-bottom: 0; } / 页脚样式 / .footer { background-color: 333; color: fff; padding: 30px 0; text-align: center; } .footer p { margin-bottom: 15px; opacity: 0.8; } .social-links { display: flex; justify-content: center; gap: 20px; } .social-links a { color: fff; font-size: 24px; transition: color 0.3s; } .social-links a:hover { color: 667eea; } / 响应式适配：屏幕宽度小于768px时（平板/手机）执行 / @media (max-width: 768px) { / 隐藏导航链接 / .nav-links { position: fixed; top: 70px; left: 0; width: 100%; background-color: fff; flex-direction: column; align-items: center; gap: 20px; padding: 20px 0; transform: translateY(-150%); transition: transform 0.3s; box-shadow: 0 5px 10px rgba(0,0,0,0.05); } / 显示导航链接的激活状态 / .nav-links.active { transform: translateY(0); } / 显示汉堡菜单按钮 / .menu-toggle { display: block; } / 主视觉区文字缩小 / .hero h1 { font-size: 32px; } .hero p { font-size: 16px; } } ```

四、编写JavaScript交互

打开script.js，直接复制下方完整可运行的代码：

```javascript // 获取DOM元素 const menuToggle = document.getElementById('menuToggle'); const navLinks = document.getElementById('navLinks'); // 汉堡菜单点击事件 menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); // 切换汉堡图标（可选，这里简化处理） const icon = menuToggle.querySelector('i'); icon.classList.toggle('ri-menu-line'); icon.classList.toggle('ri-close-line'); }); // 点击导航链接或空白处关闭汉堡菜单 document.addEventListener('click', (e) => { if (!menuToggle.contains(e.target) && !navLinks.contains(e.target)) { navLinks.classList.remove('active'); const icon = menuToggle.querySelector('i'); icon.classList.remove('ri-close-line'); icon.classList.add('ri-menu-line'); } }); // 导航链接点击事件：关闭汉堡菜单+平滑滚动 navLinks.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); const icon = menuToggle.querySelector('i'); icon.classList.remove('ri-close-line'); icon.classList.add('ri-menu-line'); }); }); ```

五、本地预览与修改

5.1 本地预览

1. 在VSCode中右键点击index.html文件
2. 选择Open with Live Server（或按Alt+L Alt+O快捷键）
3. 浏览器会自动打开本地预览页面，地址通常是http://127.0.0.1:5500/
4. 可以用浏览器的开发者工具（按F12）切换到移动端/平板模式测试响应式效果

5.2 常见修改点

• 修改logo：找到index.html中的LOGO，替换成你的文字或标签
• 修改主视觉区内容：找到index.html中
  内的文字
• 修改配色：找到style.css中的颜色值（如667eea），替换成你的品牌色
• 修改页脚版权：找到index.html中

六、快速部署上线

推荐使用Vercel免费部署，无需购买服务器和域名（如需自定义域名可后续绑定）：

1. 访问Vercel官网：https://vercel.com/，使用GitHub/GitLab/Bitbucket账号登录
2. 将你的项目文件夹上传到GitHub新建的公开仓库（上传前可删除.gitignore，如果有）
3. 登录Vercel后，点击Add New→Project，选择刚才上传的GitHub仓库
4. 点击Deploy，等待1-2分钟即可生成唯一的免费访问链接