H5页面设计与实现

项目概述

本项目是一个基于HTML、CSS和JavaScript开发的H5页面，具有左侧固定菜单栏、顶部搜索栏、可滑动标签页和右侧内容区，支持响应式设计和流畅的交互体验。

功能特点

1. 左侧固定菜单栏

固定在页面左侧，支持上下滑动
菜单项包含图标和文字描述
点击菜单项可切换右侧内容区
激活状态有明显的视觉反馈

2. 顶部搜索栏

位于页面顶部，支持搜索输入
搜索框具有焦点样式和过渡效果

3. 可滑动标签页

支持横向滑动（鼠标拖拽和触摸滑动）
点击标签可切换激活状态
标签过多时可横向滚动

4. 右侧内容区

根据左侧菜单选择显示不同内容
内容以网格布局展示
支持上下滑动
内容项具有悬停效果

5. 响应式设计

适配不同屏幕尺寸
在移动设备上优化显示效果

文件结构

复制代码

h5/
├── index.html      # 页面结构文件
├── style.css       # 样式文件
├── script.js       # 交互逻辑文件
└── README.md       # 项目说明文档

技术栈

HTML5 - 页面结构
CSS3 - 样式设计
- Flexbox布局
- Grid布局
- 响应式设计
- CSS Scrollbar样式
JavaScript (ES6+) - 交互逻辑
- DOM操作
- 事件处理
- 触摸事件支持

页面结构详解

1. 整体布局

html 复制代码

<div class="container">
    <!-- 左侧菜单栏 -->
    <aside class="sidebar"></aside>
    <!-- 右侧主内容区 -->
    <main class="main-content">
        <!-- 顶部搜索栏 -->
        <header class="header"></header>
        <!-- 可滑动标签页 -->
        <div class="tabs-container"></div>
        <!-- 内容区域 -->
        <div class="content-wrapper"></div>
    </main>
</div>

2. 左侧菜单栏

宽度：100px（移动端80px）
背景色：白色
边框：右侧1px实线
滚动条：自定义样式
菜单项：图标+文字组合

3. 顶部搜索栏

高度：自适应
背景色：白色
搜索框：圆角设计，带有焦点效果

4. 可滑动标签页

高度：自适应
背景色：白色
标签按钮：圆角设计，激活状态为黑色背景
支持横向滚动：隐藏滚动条

5. 右侧内容区

内容布局：3列网格（移动端2列）
内容项：正方形卡片，带有阴影和悬停效果
支持上下滚动：自定义滚动条样式

交互功能

1. 菜单切换

javascript 复制代码

// 点击菜单项时
navItems.forEach(item => {
    item.addEventListener('click', () => {
        // 移除所有导航项的激活状态
        navItems.forEach(nav => nav.classList.remove('active'));
        // 添加当前导航项的激活状态
        item.classList.add('active');
        // 切换内容区域
        const contentId = item.getAttribute('data-content');
        // ...
    });
});

2. 标签页切换

javascript 复制代码

// 点击标签按钮时
tabBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        // 移除所有标签页的激活状态
        tabBtns.forEach(tab => tab.classList.remove('active'));
        // 添加当前标签页的激活状态
        btn.classList.add('active');
        // ...
    });
});

3. 标签页滑动

支持鼠标拖拽和触摸滑动
实现了平滑的滚动效果
滚动速度：2倍于鼠标移动距离

4. 搜索功能

javascript 复制代码

// 输入搜索内容时
searchInput.addEventListener('input', (e) => {
    const searchTerm = e.target.value.toLowerCase();
    // 这里可以添加搜索逻辑
    console.log('搜索内容:', searchTerm);
    // ...
});

使用方法

本地运行

确保安装了Python（用于启动本地服务器）
在项目目录下打开终端
运行以下命令启动本地服务器：

bash 复制代码

python -m http.server 8000

在浏览器中访问：http://localhost:8000

直接打开

也可以直接用浏览器打开 index.html 文件，但某些浏览器可能会限制本地文件的JavaScript功能。

响应式设计

大屏幕（>768px）

左侧菜单宽度：100px
内容网格：3列
标签页按钮：标准尺寸

中等屏幕（≤768px）

左侧菜单宽度：80px
内容网格：2列
菜单项图标：50x50px

小屏幕（≤480px）

内容网格：2列
标签页按钮：小号尺寸
内容项图标：24px

浏览器兼容性

Chrome/Edge 90+
Firefox 88+
Safari 14+
移动端浏览器：支持现代浏览器

后续优化建议

添加内容加载动画
实现搜索过滤功能
添加标签页内容切换逻辑
优化移动端体验
添加主题切换功能
实现数据动态加载

项目截图

移动端

PC端