<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。" />
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物" />
<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" />
</head>
<body>
<!-- 网页头部模块 -->
<header>
<!-- 快捷菜单模块 -->
<div class="xtx-shortcut">
<nav class="container">
<ul class="fr">
<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="#" class="mobile">手机版</a></li>
</ul>
</nav>
</div>
<!-- 主导航模块 -->
<div class="xtx-main-nav container">
<!-- 左侧的logo -->
<h1 class="logo fl">
<a href="#">小兔鲜</a>
</h1>
<!-- 中间的导航 -->
<nav class="fl">
<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>
</nav>
<!-- 右侧的搜索 -->
<div class="search fl">
<input type="search" placeholder="搜一搜">
</div>
<!-- 右侧的购物车 -->
<div class="cart fl">
<span>2</span>
</div>
</div>
</header>
<!-- 网站入口：焦点图和分类 -->
<div class="xtx-entry">
<div class="container">
<!-- 焦点图 -->
<section class="banner">
<ul>
<li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
</ul>
<!-- 左右箭头 -->
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
<!-- 轮播指示器 -->
<ol class="indicator">
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li>
</ol>
</section>
<!-- 分类 -->
<aside class="category">
<ul>
<li>
<a href="#">
生鲜<span>水果</span> <span>蔬菜</span>
</a>
</li>
<li>
<a href="#">
美食<span>面点</span> <span>干果</span>
</a>
</li>
<li>
<a href="#">
餐厨<span>数码产品</span>
</a>
</li>
<li>
<a href="#">
电器<span>床品</span> <span>四件套</span> <span>被枕</span>
</a>
</li>
<li>
<a href="#">
居家<span>奶粉</span> <span>玩具</span> <span>辅食</span>
</a>
</li>
<li>
<a href="#">
洗护<span>洗发</span> <span>洗护</span> <span>美妆</span>
</a>
</li>
<li>
<a href="#">
孕婴<span>奶粉</span> <span>玩具</span>
</a>
</li>
<li>
<a href="#">
服饰<span>女装</span> <span>男装</span>
</a>
</li>
<li>
<a href="#">
杂货<span>户外</span> <span>图书</span>
</a>
</li>
<li>
<a href="#">
品牌<span>品牌制造</span>
</a>
</li>
</ul>
</aside>
</div>
</div>
<!-- 新鲜好物 -->
<div class="xtx-new-goods container">
<div class="goods-hd">
<h2>
新鲜好物
<span>新鲜出炉 品质靠谱</span>
</h2>
<a href="#" class="more">查看全部</a>
</div>
<ul class="goods-list">
<li>
<a href="#">
<img src="./uploads/new_goods_1.jpg" alt="">
<h3 class="title">睿米无线吸尘器F8</h3>
<p class="price"><span>¥</span> 899</p>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_2.jpg" alt="">
<h3 class="title">智能环绕3D空调</h3>
<p class="price"><span>¥</span> 1299</p>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_3.jpg" alt="">
<h3 class="title">广东软软糯米煲仔饭</h3>
<p class="price"><span>¥</span> 129</p>
</a>
</li>
<li>
<a href="#">
<img src="./uploads/new_goods_4.jpg" alt="">
<h3 class="title">罗西机械智能手表</h3>
<p class="price"><span>¥</span> 3399</p>
</a>
</li>
</ul>
</div>
<!-- 生鲜商品 -->
<div class="xtx-fresh-goods container">
<div class="goods-hd">
<h2>生鲜</h2>
<a href="#" class="more">查看全部</a>
<ul class="tabs">
<li><a href="#" class="active">水果</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="#">T恤</a></li>
<li><a href="#">内衣</a></li>
</ul>
</div>
<div class="goods-content">
<div class="goods-pic fl">
<!-- 大图片 -->
<a href="#">
<img src="./uploads/fresh_goods_cover.png" alt="">
</a>
</div>
<div class="goods-list fr">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
</div>
<div class="info">
<h3>美威 智利原味三文鱼排 240g/袋 4片装</h3>
<p class="type">海鲜年货</p>
<p class="price"><span>¥</span> 59</p>
</div>
<!-- 找相似 -->
<div class="find">
<p>找相似</p>
<p>发现更多宝贝 ></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
</div>
<div class="info">
<h3>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</h3>
<p class="type">火锅食材</p>
<p class="price"><span>¥</span> 79</p>
</div>
<!-- 找相似 -->
<div class="find">
<p>找相似</p>
<p>发现更多宝贝 ></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
</div>
<div class="info">
<h3>三都港 冷冻无公害黄花鱼 700g 2条 袋装</h3>
<p class="type">海鲜水产</p>
<p class="price"><span>¥</span> 49</p>
</div>
<!-- 找相似 -->
小兔鲜儿 项目实现HTML+CSS
需积分: 5 108 浏览量
2023-04-30
19:10:26
上传
评论
收藏 5.67MB ZIP 举报
xtx-pc-client.zip （79个子文件） 
xtx-pc-client css 
common.css 7KB base.css 1KB index.css 10KB favicon.ico 4KB
index.html 15KB uploads 
kitchen_goods_1.jpg 44KB new_goods_2.jpg 161KB fresh_goods_8.jpg 76KB seckill_goods_2.jpg 30KB fresh_goods_7.jpg 68KB kitchen_goods_cover.jpg 112KB kitchen_goods_3.jpg 23KB
avatar_1.png 49KB collect_goods_4.jpg 30KB home_goods_8.jpg 38KB topic_goods_3.jpg 222KB collect_goods_1.jpg 60KB popular_1.jpg 148KB new_goods_3.jpg 283KB home_goods_1.jpg 20KB home_goods_2.jpg 58KB history_goods_3.jpg 33KB discuss_goods_1.jpg 77KB history_goods_1.jpg 32KB brand_goods_2.jpg 76KB kitchen_goods_5.jpg 41KB seckill_goods_4.jpg 29KB history_goods_2.jpg 29KB banner_1.png 892KB discuss_goods_2.jpg 61KB brand_goods_3.jpg 57KB brand_goods_4.jpg 55KB home_goods_6.jpg 53KB new_goods_1.jpg 72KB history_goods_4.jpg 30KB popular_2.jpg 125KB collect_goods_2.jpg 49KB qrcode.png 6KB brand_goods_1.jpg 59KB home_goods_3.jpg 38KB home_goods_5.jpg 59KB popular_3.jpg 154KB clothes_goods_1.jpg 60KB kitchen_goods_4.jpg 85KB clothes_goods_7.jpg 45KB clothes_goods_cover.jpg 152KB order_goods_2.jpg 15KB brand_goods_5.jpg 76KB collect_goods_3.jpg 33KB discuss_goods_3.jpg 55KB home_goods_7.jpg 92KB clothes_goods_6.jpg 29KB seckill_goods_1.jpg 29KB popular_4.jpg 179KB fresh_goods_4.jpg 56KB fresh_goods_6.jpg 80KB fresh_goods_1.jpg 72KB new_goods_4.jpg 195KB order_goods_1.jpg 19KB kitchen_goods_7.jpg 34KB home_goods_cover.jpg 85KB fresh_goods_2.jpg 110KB kitchen_goods_8.jpg 37KB home_goods_4.jpg 23KB fresh_goods_5.jpg 84KB kitchen_goods_6.jpg 57KB seckill_goods_3.jpg 32KB topic_goods_1.jpg 188KB topic_goods_2.jpg 134KB kitchen_goods_2.jpg 35KB clothes_goods_3.jpg 33KB fresh_goods_cover.png 174KB clothes_goods_5.jpg 32KB clothes_goods_4.jpg 30KB clothes_goods_2.jpg 49KB fresh_goods_3.jpg 56KB clothes_goods_8.jpg 25KB images logo.png 33KB sprites.png 25KB资源评论
