2002班HTML中期项目-诺心蛋糕项目
作者:邯郸翱翔 日期:2020-11-30
项目名称:2002班HTML中期项目-诺心蛋糕项目
小组成员:
组长:贾东轩
组员:常韩语、刘佳鹏
目的
(1)、简洁的外观吸引了人们在网上购买甜点的吸引力;
(2)、通过在蛋糕店考察,集合了大部分的甜点、零食、和蛋糕。
范围
适用于网页购买
各个模块的介绍
一、首页
首页页眉由
标签组成以及页眉固定定位、鼠标悬浮文字变色、二级菜单;
主体大图由@keyframes关键帧制作的渐变轮播图;
点击蛋糕、零食、兑换都会进入相应的页面;
首页主体的商品图是由
标签嵌套的
标签排列而成以及鼠标悬浮背景颜色变化、图片2D缩放。
二、蛋糕
蛋糕页面由页眉、主体和页脚组成。页眉是用
标签排列包含鼠标悬浮和二级菜单;
主体上方是一张图片、下面文字用的li标签、下面的蛋糕商品都是用小块的
标签排列而成的包含鼠标悬浮、2D缩放。
三、零食
零食页面的布局和蛋糕页面基本一致只是是对商品的不同分类;
兑换
兑换页面是对于蛋糕券的使用兑换,布局采用
标签对页眉的排列,主体蛋糕兑换专区和蛋糕券采用
标签,主体兑换商品采用
嵌套
来完成的布局,商品下面是关于一些蛋糕券的使用规则。
蛋糕详情
详情可以通过蛋糕页面进行跳转。页眉采用
标签来进行的布局包含鼠标悬浮、二级菜单
主体第一张大图采用的是关键帧自动轮播图以及下面的复选框、滚动条事件。最下面的图是对蛋糕的一些介绍
登录
登录界面是用
标签、文本框、密码框做的登录
购物车
购物车页面可以通过加商品入购物车进行跳转
页眉和首页的布局一致。主体是通过多个小
标签进行的布局以及鼠标悬浮旋转、二级菜单和列表框的效果,下面有两个通过关键帧制作的商品自动轮播图。
推荐商品是
标签布的局以及下方的结算是固定定位
结算加支付
结算和支付页面都是通过多个
标签和
标签进行的布局