基于HTML与CSS的网页制作课程设计（果汁外卖）

本篇文章展示由纯html与css代码实现的果汁外卖静态页面网站设计，通过大量html与css语言对页面结构、样式进行实现。希望您仔细认真阅读完后有所启发。

一、网页结构

本网站共包含六个页面——首页、内容页、详情页、博客信息页面1-2、服务信息页（高端效果控件展示页）。每个页面通过a标签的href属性进行超链接跳转。总体设计框架图如下所示：

二、服务页面信息展示

2.1 Map图像映射链接处理

首先，我们需要定义一个map标签，接着打开视图中的拆分设计视图，添加你所需要的shape区域映射，从而可视化操作链接的区域范围，根据你拖拽以及调整大小保存后，代码区域会自动补全其shape、coords等属性的属性值，效果图展示如下：

部分代码实现如下：

<map name="Map"><area shape="rect" coords="46,86,387,492" href="#content1"><area shape="rect" coords="406,67,721,286" href="#content2"><area shape="rect" coords="758,132,948,391" href="#content3"><area shape="rect" coords="624,413,974,604" href="#content4"><area shape="poly" coords="406,384,406,507,269,512,262,596,580,595,597,390" href="#bottom">
</map>

最终效果图如下所示：

2.2 锯齿状导航栏效果处理

这里需要设置一下CSS样式，具体使用了-webkit-gradient-函数的liner属性，通过设置它颜色开始的位置以及百分比，来控制最终显示效果，部分代码涉及如下所示：

background-image:-webkit-gradient(linear,50% 0,0 100%,from(transparent),
color-stop(0.5,transparent),color-stop(0.5,#FFFFFF),to(#FFFFFF)),
-webkit-gradient(linear,50% 0,100% 100%,from(transparent),
color-stop(0.5,transparent),color-stop(0.5,#FFFFFF),to(#FFFFFF));

效果图展示如下：

2.1 制作流程视频部分

该部分采用video控件与ol-li结合，实现了视频播放与信息内容解释的基本效果。部分代码展示如下：

<div id="Content-3"><div class="SPECIALSHADOW">制作流程</div><video src="data:images/视频.mp4" controls="controls"><!--autoplay="autoplay" loop="loop"--></video> <ol><li><details><summary>浓缩果汁的稀释:</summary>将已解冻的浓缩果汁按配方要求添加纯净水进行稀释。浓缩果汁是在水果榨成原汁后将采用低温真空浓缩或其他方法进行浓缩，蒸发掉一部分水分做成的，浓缩后期可溶性固形物含量与原汁相比必须要大于2倍.</details></li><li><details><summary>过滤、均质</summary><br>(1)过滤:当生产澄清型果汁饮料时，必须对稀释后的果汁进行过滤，过滤后即可得到澄清透明的果汁。过滤方式一般采用硅藻土过滤。<br>(2)均质:对过滤后的果汁进行均质，可以使果汁稳定，不易产生沉淀现象。均质的压力一般采用20-25Mpa.</details></li><li>白砂糖及其辅料的溶解、过滤</li><li><details><summary>调配:</summary>将前面溶解的糖液、辅料以及稀释好的果汁泵入配料缸中，搅拌均匀，然后根据配方加入足量的纯净水进行定容。zui后按配方量加入香精和（或）色素，并搅拌均匀。</details></li><li><details><summary>过滤:</summary>将调配完成的料液再通过过滤桶进行过滤。</details></li><li>杀菌:采用超高温瞬时杀菌</li><li><details><summary>洗瓶、灌装、封口:</summary>采用三合一灌装设备，热灌装机进行灌装。灌装时料液温度不低于90℃，料液灌装完成后，瓶内料液的温度不低于85℃。</details></li><li><details><summary>倒瓶:</summary>灌装完成的饮料通过倒瓶机，瓶子平躺在倒瓶机上，让灌装在瓶子里面的料液的余温对瓶盖进行杀菌。倒瓶杀菌时间要求不少于40S。</details></li></ol>
</div>

效果图展示如下：

2.1 用户评价动画部分

.Transform1:hover{transform: rotate(45deg);transition: all 2s;background:url("images/timg.gif");}
.Transform2:hover{transform: rotate(-45deg);transition: all 2s;background:url("images/timg.gif");}
<div id="Content-4"><p class="SPECIALSHADOW">用户评价</p><div id="topic1"></div><div id="topic2"></div><div id="cricle1" class="Transform1"><span class="SPECIALSHADOW">鼠标滑到我<br>有惊喜哦!</span></div><div id="cricle2" class="Transform2"><span class="SPECIALSHADOW">我也有哦!!</span></div>
</div>

效果图展示如下：

三、部分其它页面的效果展示图以及代码解释

3.1 内容详情信息页面

内容页是由列表页中商品的第三个小盒子设置超链接，点击图片或者文字跳转而来的。首先也是以定义盒子来设置框架，定下一个大盒子，然后我在大盒子里同样使用id选择器设置了左（#left）右（#right）两个盒子。在左边的盒子中主要以插入图片为主，将左边盒子分为四块，分别定义四个盒子，来放置果汁以及果汁的原料图，此时我采用的方法是使用（background）属性将图片设置为每个盒子的背景图。在右边盒子（#right）的设计上，我采取的方法是从上往下添加盒子并对盒子进行操作，首先先对（#right）设置id选择器（#right-top），来对其顶部进行分区分块，使用（#Title）id选择器来对大标题进行文字定义的加粗。在body部分，引用其id选择器来输入文字内容，从而实现标题效果。其次设置（#star）的id选择器，对其进行（background）属性来将星星图片作为背景图片插入，同时使用（clear:both;）属性来对其进行清除，达到在左右两侧均不允许浮动元素的目的。

在进行对果汁的标价时，在（#right）的右边盒子中专门为数值的插入建立了（right-right）的id选择器，其中使用（#textstyle1）和（#textstyle2）两个id选择器对于价钱进行原价和现价的展示，又因为在展示原价时，原价是需要被以和现价不同形式存在的，所以我对其原价的文字定义了名为（.starprice）的类选择器来控制其大小并使用（text-decoration: line-through; ）属性对其定义穿过文本的一条线来表示原价和现价的不同。对于文字部分我主要在（#middle1）的id选择器中使用对其定义，又在body中使用（<h3>）标记对果汁进行标题的定义，（<ul><li>）标签使用无序列表来列举了两种果汁的制作过程，其中又在（#middle1 h3）的id选择器中为果汁标题进行设置左内边距，使文字和图片有间隔，并且在id选择器中设置（list-style-position:inside;）来规定列表项目标记放置在文本以内，且环绕文本根据标记对齐，同样也对其设置了左内边距。在文字的第二部分是在（#middle2）中进行，定义了（#middle2-1）和（#middle2-2）两个id选择器，并在body中对其进行引用使用（<ul><li>）标签使用无序列表来列举果汁优点，来实现左右各三条的优点展示。部分代码如下所示：

<div id="Content"><div id="left">
<div id="left-top"></div>
<div id="left-bottom">
<div id="left-bottom1"></div>
<div id="left-bottom2"></div>
<div id="left-bottom3"></div>
<div id="left-bottom4"></div>
</div>
</div><div id="right">
<div id="right-top">
<div id="Title">鲜榨水果汁</div>
<div id="right-right">
<div id="textstyle1" class="starprice">$35.00</div>
<div id="textstyle2">$24.00</div>
</div>
<div id="star"></div></div>
<div id="middle1">
<ul>
<h3>草莓汁</h3>
<li>取适量新鲜的草莓用清水冲洗干净，摘掉草莓把直接置入榨汁机，启动开关开始榨汁，完成后把榨好的草莓汁倒进杯中加入酸奶美味极了</li>
<h3>西瓜蜂蜜汁</h3>
<li>西瓜200g柠檬1/2个蜂蜜适量冰块，适量西瓜切皮去籽后切成小块,柠檬去皮也切成小块与蜂蜜和冰块一起打成西瓜汁。</li>
</ul>
</div>
<div id="middle2">
<div id="middle2-1" >
<ul>
<li>新鲜的</li>
<li>可口的</li>
<li>美味的</li>
</ul></div>
<div id="middle2-2">
<ul>
<li>快速的</li>
<li>营养的</li>
<li>健康的</li>
</ul></div>
</div>
<div>
<div id="right-bottom1"></div>
<div id="right-bottom2"><p class="Text"> 赠送水果拼盘，先到先得，速来抢购。<br />&nbsp;&nbsp;温馨提示：水果拼盘中的水果种类不能指定，随机赠送哦</p><a href="#">点击下单</a></div>
</div>
</div>
</div>

效果图展示如下：

3.2 服务页滑动背景固定效果展示

效果视频展示如下：

果汁外卖——自创页

首页、内容页与博客页等页面信息与该描述页面基本相似，在此不一一列举。希望本片文章可以帮助您，望留下宝贵一赞！谢谢！需源码请私信 扣扣 1092644308