基于HTML+CSS+JavaScript的果汁饮料店前端页面

项目介绍

本项目旨在开发一个基于HTML+CSS+JavaScript的果汁店前端页面，包括首页、产品列表页、产品详情页和联系我们页。这个前端页面将为果汁店提供一个在线展示和销售其产品的平台，以吸引客户并增加销售。

技能要求

在项目的前期学习中，我们已经获取了以下知识和编程技能：
1、掌握HTML、CSS和JavaScript的基本语法和用法。
2、理解前端开发的基本原则，包括响应式设计和用户体验优化。
3、学习如何使用版本控制工具（如Git）来管理项目代码。
4、掌握调试和问题解决的基本技能，以确保页面功能的稳定性。

项目分析

本项目的功能列表如下：
（1）首页：展示果汁店的品牌宣传语和简短介绍，显示最新特别推荐的果汁产品，包括鲜榨果汁和新鲜果茶两部分。导航栏中具有可点击链接的按钮，包括首页、产品列表、产品详情和联系我们四部分。通过页面中的“查看我们的产品”按钮可进行页面跳转。
（2）产品列表页：
展示所有果汁种类的列表，包括图片、名称和价格等信息，在页面中分为两部分、一部分为鲜榨果汁列表、一部分为新鲜果茶列表。列表中每行显示三个饮品。每当鼠标经过会放大显示。
（3）产品详情页：
展示单个果汁产品的详细信息，包括图片、名称、描述、价格和购买按钮等。为了美观，我们在产品详情页中共存放5种饮品，其中使用了JavaScript技术实现了一些动画展示，用户可点击进行查看。
（4）联系我们页：
提供联系方式，包括电话、邮箱和地址等信息。并且我们提供了联系表单，用户可以填写并发送消息。

项目设计与实现

模块设计

果汁网站共分为四个模块，分别为首页、产品列表、产品详情、联系我们。该四个模块可在导航栏互相进行跳转，并且该四个模块共享导航栏和网页的页眉页脚部分。下图是网站的目录结构：

（1）首页模块：首页是用户进入网站的第一个页面，因此需要设计一个独立的模块来处理首页的内容。该模块应包括品牌名称、宣传标语、宣传海报背景、特别推荐的产品信息。通过将首页内容模块化，可以方便地更新和维护首页内容。
在首页中，我们将其再分为四大板块：导航栏（navbar）、宣传栏（hero）、产品介绍栏（main）、底部页脚（footer）。如图所示：

（2）产品列表模块：产品列表页是展示所有果汁产品的地方，因此需要设计一个模块来呈现产品列表功能。这个模块应包括产品的图片、名称、价格等，并且每个产品独立显示，以提供用户友好的浏览体验。
产品列表模块中，我们同首页模块一样分为四个板块，分别为导航栏（navbar）、鲜榨果汁产品展示（test+product-container）、新鲜果茶产品展示（testdiv+product-container）、底部页脚（footer），如图所示：

（3）产品详情模块：产品详情页需要一个独立的模块，用于产品的详细信息。这个模块应包括产品图片、描述、价格、购买按钮功能。模块化设计使得产品详情页易于管理和扩展。
在产品详情模块中，我们分为三个板块：导航栏（navbar）、产品详情展示（container）、底部页脚（footer），如图所示：

（4）联系我们模块：联系我们页面需要一个模块来管理联系信息和联系表单。这个模块应包括地址、电话、电子邮件信息以及用户填写和提交表单的功能。
在该模块中，我们将联系信息和信息表单单独处于一个板块中，并居中位于整个页面。模块共分为三个板块：导航栏（navbar）、联系表单+联系信息（contact-container）、底部页脚（footer），如图所示：

代码设计

首页
（1）页面顶部导航栏
首页是向用户进行果汁店铺的宣传和特色产品的推荐，页面整体分为四大块，首先是网站顶部的导航栏和宣传栏：

在该页面中，导航栏部分分为两部分，一部分为左侧的网站名称Fruit Juice，另一部分为右侧的导航条目。

<div class="navbar">
   <a class="logo" href="#logo">Fruit Juice</a>
   <div class="nav-right">
   	<a href="#home" class="current">首页</a>
   	<a href="../product_lists/product_lists.html">产品列表</a>
   	<a href="../product_details/details.html">产品详情</a>
   	<a href="../contact/contact.html">联系我们</a>
   </div>
  </div>

上面的代码即页面中导航栏的HTML部分，包含导航栏的结构，包括网站标志（“Fruit Juice”）和导航链接。这些链接将用户引导到不同的页面或部分。特别注意的是，在"首页"链接上使用了类名"current"，这将使该链接在导航栏中以粗体显示，表示当前所在页面。为了实现这一功能，在CSS文件中设置.navbar a.current 和 .navbar a:hover这两个选择器分别用于定义当前激活链接和鼠标悬停链接的样式。它们将链接文本颜色更改为红色，并加粗文本。
（2）页面顶部宣传栏
宣传栏背景为一张果汁图片，上方描述了网站的口号以及查看详情按钮。
其在HTML代码中被包含在header标签中，具有一个类名"hero"，该部分是一个引人注目的区域，包含重要的宣传信息。
接下来定义宣传语。（注：背景图片我们在CSS文件中进行设置）。在查看我们的产品按钮中，我们设置了超链接，使其点击后可跳转到产品详情页面。

<header class="hero">
   <div class="container spacing">
   	<h1 class="primary-title">纯鲜榨果汁，每天来一杯, 健康添活力！</h1>
   	<p>我们的产品为鲜榨果汁，100%鲜榨水果，打造健康、活力、美容养颜饮品</p>
   	<a href="../product_lists/product_lists.html" class="btn">查看我们的产品</a>
   </div>
</header>

在CSS文件中定义我们的背景图片，在.hero类中，使用background属性定义背景图片，并设置background-attachment: fixed使得背景图像固定，不随页面滚动而滚动，使用background-position: center center将背景图像定位到容器的中心。

.hero {
 		background: url(image/bg1.jpg);
 		background-blend-mode: multiply;
 		background-attachment: fixed;
 		background-repeat: no-repeat;
 		background-position: center center;
 		width: 100%;
 		text-align: center;
 		padding: 15rem 0;
 		background: #222;
 		width: 100%;
}

（3）鲜榨果汁模块


（4）新鲜果茶模块
新鲜果茶模块与鲜榨果汁模块的实现基本相似，不再赘述。

产品列表页

页面顶部导航栏
该页面顶部导航栏部分与首页的导航栏一样，公用同一套代码。
（2）鲜榨果汁系列
该模块包含一个鲜明的标题和该标题下的产品列表。
标题和产品列表分开定义，首先定义一个

元素，具有类(class)属性"testdiv"，用于包含或组织后续标题内容。在"testdiv"内部，有另一个

元素，具有类属性"test"，用于设置一些内部样式或布局。在"test"内部，有一个级别为3的标题，用于显示文本"鲜榨果汁系列"。

产品详情页

在产品详情页中，我们将5中产品存在一个图册里面，当用户点击时，会展开用户点击的产品详情，如图所示：
在每一个产品详情框里，我们添加了产品的名称、描述、价格等信息，另外还添加了购买按钮。
下面是单个产品详情框的HTML代码定义：

<div class="container">
   <div class="panel active" style="background-image: url('image/product1.jpg')">
   	<div class="panel-details">
     		<h4>好大一桶水果茶</h4>
     		<p>一杯六种水果，溢出来的满满维生素。青柠、青橘、芒果、菠萝、百香果、西瓜齐上阵</p>
     		<p>Price: ¥20</p>
     		<button class="buy-button">Buy Now</button>
    	</div>
   </div>
</div>

为了实现用户点击单个产品时隐藏其它产品信息，并且产品的文字描述和图片一起显示或隐藏的功能，使用JavaScript为每个面板元素添加了一个点击事件监听器。当用户点击面板时，所有面板都将首先通过removeActiveClasses函数的调用取消激活，然后被点击的面板会被添加"active"类，从而使其成为激活状态，以响应用户的交互，实现面板之间的切换效果，展开或隐藏详细信息。

const panels = document.querySelectorAll(".panel");
panels.forEach((panel) => {
 panel.addEventListener("click", () => {
  removeActiveClasses();
  panel.classList.add("active");
 });
});
const removeActiveClasses = () => {
 panels.forEach((panel) => {
  panel.classList.remove("active");
 });
};