【期末网页设计作业】HTML+CSS+JS 美食分享主题网站设计与实现（附源码）

网页作品简介

美食分享主题网站功能。主要有：首页、美食分类、美食介绍、关于美食、登录、注册等总共 6 个页面 html 页面。

网页作品编辑

此作品为美食分享主题网站设计题材，代码为学生水平 html+css+JavaScript 布局制作，作品下载后可使用任意 HTML 编辑软件（如：DW、HBuilder、Vscode、NotePAD、Sublime、Webstorm、Notepad++ 等任意 HTML 软件编辑修改网页）。

网页作品技术

Div+CSS 布局、JavaScript 轮播图特效、JavaScript 表单校验、导航栏交互效果、盒子模型、浮动布局、过渡动画等。所需的前端基础知识点全覆盖，适合作为期末作业或课程设计参考。

获取完整源码

请关注私信或者在评论区留言获取完整源码及数据库文件，包含所有完整代码和使用说明。

作品部分截图：

项目概述

本次期末作业实现了一个美食分享主题网站，采用 HTML、CSS 和 JavaScript 技术栈开发，包含首页、美食分类、美食介绍、关于美食、登录和注册等核心页面。网站整体风格统一，交互流畅，响应式布局适配不同设备，旨在为用户提供丰富的美食资讯和分享平台。

技术栈选择

• HTML5：构建语义化网页结构
• CSS3：实现页面样式和动画效果
• JavaScript：添加交互功能和表单验证
• 响应式设计：确保在不同设备上的良好显示

网站结构设计

网站采用模块化设计，主要包含以下页面：

1. 首页（index.html）：展示网站概览和精选内容
2. 美食分类（list.html）：展示各类美食分类信息
3. 美食介绍（news.html）：详细介绍各类美食
4. 关于美食（about.html）：网站介绍和联系方式
5. 登录页（login.html）：用户登录功能
6. 注册页（zhuce.html）：新用户注册功能

核心功能实现

1. 导航栏设计

导航栏采用固定样式，包含网站 logo 和主要导航链接，当前页面链接高亮显示：

<div class="top2 auto clearfix">
    <img src="./images/logo.png" alt="">
    <ul>
        <li style="background-color: rgba(0,0,0,.5);"><a href="index.html">首页</a></li>
        <li><a href="list.html">美食分类</a></li>
        <li><a href="news.html">美食介绍</a></li>
        <li><a href="about.html">关于美食</a></li>
        <li><a href="login.html">登录</a></li>
        <li><a href="zhuce.html">注册</a></li>
    </ul>
</div>

CSS 样式设计：

.top2 {
    width: 1000px;
    height: 60px;
    line-height: 60px;
    background-color: orangered;
}
.top2 ul li {
    width: 130px;
    height: 60px;
    float: left;
    text-align: center;
}
.top2 ul li:hover {
    background-color: rgba(0,0,0,0.5);
}
.top2 ul li a {
    color: #fff;
}

2. 轮播图实现

首页轮播图采用 JavaScript 实现自动切换和手动控制功能：

<div id="app">
    <div class="list-img clearfix">
        <div><img src="images/jm_pic.jpg" alt=""></div>
        <div><img src="./images/bgpic03.jpg" alt=""></div>
        <div><img src="./images/jm_pic.jpg" alt=""></div>
    </div>
    <div class="btn">
        <a class="left" href="javascript:;">&lt;</a>
        <a class="right" href="javascript:;">&gt;</a>
    </div>
</div>

轮播图核心 CSS：

#app {
    position: relative;
    width: 1000px;
    height: 400px;
    overflow: hidden;
    margin: 0 auto 0;
}
#app .list-img {
    position: absolute;
    width: 3000px;
    height: 100%;
    left: 0px;
    transition: 0.5s ease;
}
#app .list-img div {
    width: 1000px;
    height: 100%;
    cursor: pointer;
    float: left;
}

JavaScript 控制轮播逻辑：

// 轮播图实现
let index = 0;
const listImg = document.querySelector('#app .list-img');
const leftBtn = document.querySelector('.left');
const rightBtn = document.querySelector('.right');
const imgCount = document.querySelectorAll('#app .list-img div').length;

// 自动轮播
let timer = setInterval(() => {
    index = (index + 1) % imgCount;
    updatePosition();
}, 3000);

// 左右按钮控制
leftBtn.addEventListener('click', () => {
    clearInterval(timer);
    index = (index - 1 + imgCount) % imgCount;
    updatePosition();
    restartTimer();
});

rightBtn.addEventListener('click', () => {
    clearInterval(timer);
    index = (index + 1) % imgCount;
    updatePosition();
    restartTimer();
});

// 更新轮播位置
function updatePosition() {
    listImg.style.left = -index * 1000 + 'px';
}

// 重启定时器
function restartTimer() {
    timer = setInterval(() => {
        index = (index + 1) % imgCount;
        updatePosition();
    }, 3000);
}

3. 注册与登录功能

注册页面实现了表单验证功能，包括用户名、邮箱格式、密码强度和两次密码一致性验证：

<form id="register-form">
    <input type="text" id="username" placeholder="用户名">
    <input type="email" id="email" placeholder="电子邮件地址">
    <input type="password" id="password" placeholder="密码">
    <input type="password" id="confirmPassword" placeholder="确认密码">
    <div class="error-message" id="error-message"></div>
    <button type="button" onclick="validateForm()">注册</button>
    <button type="button " onclick="resetForm()">清空</button>
</form>

表单验证 JavaScript：

function validateForm() {
    const username = document.getElementById('username').value;
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const errorMsg = document.getElementById('error-message');
    
    // 用户名验证
    if (username.length < 3) {
        errorMsg.textContent = "用户名长度不能少于3个字符";
        return false;
    }
    
    // 邮箱验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        errorMsg.textContent = "请输入有效的邮箱地址";
        return false;
    }
    
    // 密码验证
    if (password.length < 6) {
        errorMsg.textContent = "密码长度不能少于6个字符";
        return false;
    }
    
    // 确认密码验证
    if (password !== confirmPassword) {
        errorMsg.textContent = "两次输入的密码不一致";
        return false;
    }
    
    // 验证通过
    errorMsg.textContent = "";
    alert("注册成功！");
    return true;
}

// 重置表单
function resetForm() {
    document.getElementById('register-form').reset();
    document.getElementById('error-message').textContent = "";
}

4. 响应式布局设计

通过 CSS 的 media query 实现响应式布局，适配不同屏幕尺寸：

/* 移动端适配 */
@media (max-width: 768px) {
    .top2 {
        width: 100%;
    }
    #app {
        width: 100%;
        height: 250px;
    }
    .main {
        width: 90%;
    }
    .footer {
        width: 100%;
    }
}

页面设计亮点

1. 视觉层次感：通过颜色对比和空间布局，创建清晰的视觉层次结构
2. 交互动效：按钮悬停效果、图片缩放动画、平滑过渡等增强用户体验
3. 统一风格：全站采用一致的配色方案（橙色为主色调，代表食物的温暖与活力）
4. 模块化设计：CSS 代码按功能模块组织，提高复用性和可维护性

总结与展望

该美食分享网站为 HTML+CSS+JavaScript 开发的期末作业作品，含首页、美食分类、美食介绍、关于美食、登录、注册 6 个页面。采用 Div+CSS 布局，统一以橙色为主色调的导航栏设计，配合响应式布局适配不同设备。核心功能包括 JavaScript 实现的轮播图切换（自动播放与手动控制）、表单验证（注册页含用户名、邮箱格式、密码强度及一致性校验）。页面元素含美食图片展示、文化介绍文本，通过盒子模型、浮动布局及过渡动画增强视觉效果。代码结构清晰，支持用 DW、Vscode 等软件编辑，覆盖前端基础知识点，适合作为期末作业参考，完整源码可通过关注私信或评论获取。

通过本次设计实践，加深了对前端开发技术的理解和应用能力，为今后更复杂的 Web 应用开发打下了基础。