<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta:desc -->
<meta name="description" content="小兔鲜儿官网,致力于打造全球最大的食品、生鲜电商购物平台。">
<!-- meta:kw -->
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<title>小兔鲜儿-新鲜、惠民、快捷!</title>
<!-- link:favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<!-- 快捷导航 -->
<div class="shortcut">
<div class="wrapper">
<ul>
<li><a href="#" class="login">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">在线客服</a></li>
<li><a href="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="header wrapper">
<!-- logo -->
<div class="logo">
<!-- 搜索引擎优化 -->
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
</ul>
</div>
<!-- 搜索 -->
<div class="search">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</div>
</div>
<!-- banner -->
<div class="banner">
<div class="wrapper">
<!-- 图片 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 侧导航 -->
<div class="subnav">
<ul>
<li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干菜</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">孕婴</a><a href="#">玩具</a><a href="#">奶粉</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li><div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 圆点指示器 -->
<ol>
<li class="current"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<div class="goods wrapper">
<!-- 标题 -->
<div class="title">
<div class="left">
<h3>新鲜好物</h3>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部
<span class="iconfont icon-arrow-right-bold"></span></a>
</div>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods1.png" alt=""></div>
<div class="txt"><h4>KN95莫兰迪配色防护口罩</h4><p>¥<span>79</span></p></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods2.png" alt=""></div>
<div class="txt"><h4>紫檀外独板三层普洱茶盒</h4><p>¥<span>79</span></p></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods3.png" alt=""></div>
<div class="txt"><h4>高颜值记事本可定制</h4><p>¥<span>79</span></p></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods4.png" alt=""></div>
<div class="txt"><h4>科技布布艺沙发</h4><p>¥<span>79</span></p></div>
</a>
</li>
</ul>
</div>
</div>
<!-- 人气推荐 -->
<div class="recommend wrapper">
<!-- 标题 -->
<div class="title">
<div class="left">
<h3>人气推荐</h3>
<p>人气爆款 不容错过</p>
</div>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend1.png" alt=""></div>
<div class="txt"><h4>KN95莫兰迪配色防护口罩</h4><p>¥<span>79</span></p></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend2.png" alt=""></div>
<div class="txt"><h4>KN95莫兰迪配色防护口罩</h4><p>¥<span>79</span></p></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend3.png" alt=""></div>
<div class="txt"><h4>KN95莫兰迪配色防护口罩</h4><p>¥<span>79</span></p></div>
</a>
</
没有合适的资源?快使用搜索试试~ 我知道了~
前端静态页面小兔鲜项目.zip
共70个文件
png:57个
css:5个
html:2个
需积分: 5 0 下载量 16 浏览量
2024-03-22
18:02:11
上传
评论
收藏 5.51MB ZIP 举报
温馨提示
小兔鲜项目是一个在线蔬菜水果购物平台,用户可以在该平台上浏览各种新鲜的蔬菜水果,并进行在线购买。为了让用户更好地了解和使用该平台,我们需要开发一个前端静态页面,提供以下功能: 1. 首页:展示平台的logo、导航栏、轮播图等基本信息,吸引用户进入平台。 2. 商品列表页面:展示各类蔬菜水果的图片、名称、价格等信息,用户可以浏览和筛选商品。 3. 商品详情页面:展示单个商品的详细信息,包括图片、名称、价格、描述等,用户可以查看并加入购物车。 4. 购物车页面:展示用户已选购的商品列表,用户可以对商品进行增删改操作,并进行结算。 5. 登录/注册页面:提供用户登录和注册功能,用户可以通过账号密码进行登录或注册新账号。 以上是小兔鲜项目前端静态页面的基本功能,通过这些页面可以让用户方便地浏览和购买蔬菜水果。在开发过程中,我们需要注意页面的设计美观、用户体验友好,确保用户能够顺利完成购物流程。
资源推荐
资源详情
资源评论
收起资源包目录
小兔鲜项目.zip (70个子文件)
小兔鲜项目
iconfont
demo.css 8KB
demo_index.html 15KB
iconfont.ttf 4KB
iconfont.css 923B
iconfont.json 2KB
iconfont.woff2 2KB
iconfont.js 10KB
iconfont.woff 2KB
css
common.css 4KB
base.css 901B
index.css 5KB
favicon.ico 4KB
uploads
kitchen8.png 76KB
kitchen7.png 66KB
home6.png 58KB
clothes4.png 77KB
hot5.png 120KB
topic2.png 230KB
fresh8.png 69KB
home5.png 80KB
goods4.png 137KB
home7.png 56KB
goods2.png 134KB
hot3.png 66KB
home_left.png 173KB
clothes6.png 45KB
clothes5.png 40KB
recommend3.png 61KB
clothes1.png 35KB
colthes_left.png 228KB
fresh_left.png 210KB
fresh6.png 54KB
home8.png 74KB
topic1.png 257KB
fresh4.png 69KB
hot1.png 106KB
home3.png 74KB
fresh3.png 61KB
fresh1.png 64KB
fresh2.png 81KB
clothes3.png 69KB
kitchen1.png 78KB
clothes8.png 55KB
clothes2.png 49KB
kitchen6.png 64KB
kitchen3.png 58KB
home4.png 71KB
kitchen2.png 51KB
recommend2.png 96KB
kitchen4.png 34KB
clothes7.png 73KB
kitchen_left.png 200KB
fresh5.png 51KB
hot4.png 94KB
recommend1.png 105KB
topic3.png 180KB
goods1.png 93KB
home1.png 77KB
recommend4.png 91KB
goods3.png 127KB
fresh7.png 64KB
banner1.png 775KB
home2.png 44KB
hot2.png 97KB
kitchen5.png 85KB
images
logo.png 8KB
app.png 4KB
sprite.png 6KB
wechat.png 4KB
xtx.html 18KB
共 70 条
- 1
资源评论
章小絮
- 粉丝: 524
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 中医临床诊疗术语-证候同义词典
- NovAtelConvert-Setup
- MySql主备数据库配置
- BGP路由基本配置(可以互通)
- 《软件方法2024版》公开内容202405更新-epub版
- 适用于tensorflow-2.11.0 CUDA版本11.2的cuDNN8.1版本
- 5Y study学习平台2016计算机基础-综合测试(8)_哔哩哔哩_bilibili_2580252704.mp4
- (大赛作品)STM32实现的F072RB NUCLEO智能家居控制.zip
- STM32实现的数字示波器源码+数字信号处理教程、配套实例.zip
- 【cookie续续】【cookie续续】【cookie续续】
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功