一、完整项目演示
在Inscode内运行项目，如下效果
二、项目分析
在创建项目之前记得新建项目、并分类，css样式统一一个文件夹，图片统一一个文件夹，插件库放在一个文件夹，图标字体一个文件夹等等。
1、整体结构
快捷导航、头部、banner轮播图、新鲜好物、人气推荐、热门品牌、生鲜、最新专题、底部、侧边栏构成，相应的每个部分对应着一个css样式
2、html内容
结构代码过长，请到Inscode里面查看。
这个部分分为主页index.html文件和电器electrical.html文件，下面是electrical.html文件
<!-- 快捷导航 -->
<div class="shortcut clearfix">
<div class="wrapper">
<ul>
<li><a href="#" class="login">请先登录</a></li>
<li><a href="#">免费注册</a></li>
<li class="dingdan">
<a href="#">我的订单</a>
<ul class="yincang">
<li><a href="#">已购买</a></li>
<li><a href="#">待付款</a></li>
<li><a href="#">已付款</a></li>
</ul>
</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 clearfix">
<!-- logo -->
<div class="logo">
<h1><a href="#">小兔鲜儿</a></h1>
</div>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="./index.html">首页</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#" style="color: red;">电器</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">
<input type="text" placeholder="请输入关键词">
<a href="#" class="iconfont icon-search"></a>
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- 侧边栏 -->
<div class="aside">
<ul class="asideul">
<li><a href="#"><span>请求帮助</span></a></li>
<li><a href="#"><span>客服中心</span></a></li>
<li><a href="#"><span>为你推荐</span></a></li>
<li><a href="#"><span>反馈问题</span></a></li>
</ul>
</div>
<!-- 家电轮播图 -->
<div class="banner clearfix">
<div class="wrapper">
<!-- 轮播图 -->
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><a href="#"><img src="./uploads/家电banner.png" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./uploads/家电banner1.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./uploads/家电banner2.jpg" alt=""></a></div>
<div class="swiper-slide"><a href="#"><img src="./uploads/家电banner3.jpg" alt=""></a></div>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<!-- 导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script src="./swiper-master/package/swiper-bundle.min.js"></script>
<!-- 初始化 -->
<script>
var mySwiper = new Swiper('.swiper', {
direction: 'horizontal',
loop: true, // 循环模式选项
autoplay: true,
// 分页器
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
</script>
<!-- 家电导航 -->
<div class="sub_nav">
<ul>
<li><a href="#"><img src="./uploads/家电1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/家电1.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 热销爆款 -->
<div class="hot clearfix">
<div class="wrapper">
<h2>热销爆款</h2>
<!-- 爆款导航 -->
<div class="top clearfix">
<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>
</ul>
</div>
<!-- 爆款商品链接 -->
<div class="bd clearfix">
<ul>
<li>
<!-- 商品内容 -->
<a href="#">
<div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<!-- 商品底部绿色区域 -->
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh3.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>588.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh4.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>69.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh5.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh6.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh7.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>120.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh8.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>60.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh1.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/fresh2.png" alt=""></div>
<div class="txt">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.00</span></p>
</div>
</a>
<div class="cover">
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer clearfix">
<div class="wrapper">
<!-- 服务 -->
<div class="service clearfix">
<ul>
<li>
<h5></h5>
<p>价格亲民</p>
</li>
<li>
<h5></h5>
<p>物流快捷</p>
</li>
<li>
<h5></h5>
<p>品质新鲜</p>
</li>
<li>
<h5></h5>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助中心 -->
<div class="help clearfix">
<div class="left ">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">支付方式</a></dd>
<dd><a href="#">售后规则</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">配送运费</a></dd>
<dd><a href="#">配送范围</a></dd>
<dd><a href="#">配送时间</a></dd>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">平台规则</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">问题反馈</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服<span class="iconfont icon-customer-service"></span></a></dd>
<dd><a href="#">客服电话 400-0000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic"><img src="./images/wechat.png" alt=""></div>
<p>微信公众号</p>
</li>
<li>
<div class="pic"><img src="./images/app.png" alt=""></div>
<p>APP下载二维码</p>
</li>
</ul>
</div>
</div>
<!-- 版权 -->
<div class="copyright">
<p>
<a href="#">关于我们</a>|
<a href="#">帮助中心</a>|
<a href="#">售后服务</a>|
<a href="#">配送与验收</a>|
<a href="#">商务合作</a>|
<a href="#">搜索推荐</a>|
<a href="#">友情链接</a>
</p>
<p>CopyRight © 小兔鲜</p>
</div>
</div>
</div>3、css样式
移步Inscode查看，base.css和common.css文件是通用样式文件，用于清除自带的默认样式和商城头部导航，底部区域、侧边栏区域的样式
4、swiper轮播图插件
建议到官方网站查看api文档说明
注意：出现其他问题可以私聊询问
扫一扫
2929
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
