前言
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码
项目总览
一、头部区域
头部的 购物车 和 手机 用的是 文字图标，所以效果可以和文字一样
购物车右上角用的是绝对定位
logo用的是 h1 标签，用来提高网站搜索排名
二、banner区域
banner区域左侧导航 :hover 和 轮播图
轮播图用了部分JS代码
三、主体区域
新鲜好物
人气推荐
热门品牌
居家
居家 :hover 为过渡
美食
服饰
母婴
最新专题
四、尾部区域-版权区域
图标没找到相应的 精灵图 所以也是用的 文字图标
源码
HTML（index.html）代码
<!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 rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 引入字体图标样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">
<!-- 引入相关样式 -->
<link rel="stylesheet" href="./CSS/base.css">
<link rel="stylesheet" href="./CSS/common.css">
<link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
<!-- 快捷导航开始 -->
<div class="shortcut">
<div class="wrapper">
<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="#"><span class="iconfont icon-shouji1">手机版</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">
<a href="#"><span class="iconfont icon-gouwuche"></span></a>
<i>6</i>
</div>
</div>
<!-- 头部-布局结束 -->
<!-- banner开始 -->
<div class="banner">
<div class="wrapper">
<!-- 图片 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner/banner1.jpg" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner/banner2.jpg" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner/banner3.jpg" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner/banner4.jpg" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner/banner5.jpg" alt=""></a></li>
</ul>
<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev">
<i class="iconfont icon-danjiantou-zuoyouqiehuan"></i>
</a>
<!-- 下一张 next -->
<a href="#" class="next">
<i class="iconfont icon-danjiantou-zuoyouqiehuan1"></i>
</a>
<!-- 侧导航 -->
<div class="subnav">
<ul>
<li>
<a href="#">居家</a>
<a href="#">茶咖酒具</a>
<a href="#">水具杯壶</a>
</li>
<li>
<a href="#">美食</a>
<a href="#">网易黑猪</a>
<a href="#">水产海鲜</a>
</li>
<li>
<a href="#">服饰</a>
<a href="#">室外拖鞋</a>
<a href="#">春夏潮鞋</a>
</li>
<li>
<a href="#">母婴</a>
<a href="#">T恤/polo/衬衫</a>
<a href="#">卫衣/毛衫</a>
</li>
<li>
<a href="#">个护</a>
<a href="#">家庭清洁</a>
<a href="#">浴室用品</a>
</li>
<li>
<a href="#">严选</a>
<a href="#">卫浴用品</a>
<a href="#">高级珠宝</a>
</li>
<li>
<a href="#">数码</a>
<a href="#">影音娱乐</a>
<a href="#">乐器</a>
</li>
<li>
<a href="#">运动</a>
<a href="#">登机箱</a>
<a href="#">托运箱</a>
</li>
<li>
<a href="#">杂项</a>
<a href="#">乐器杂项</a>
</li>
<li>
<a href="#">品牌</a>
<a href="#">品牌推荐</a>
</li>
</ul>
</div>
<!-- 圆点指示器 -->
<div class="circle"></div>
</div>
</div>
<!-- banner结束 -->
<!-- 新鲜好物开始 -->
<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"></span></a>
</div>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods/goods1.jpg" alt=""></div>
<div class="text">
<h4>魔术盒快客杯旅行盖碗茶具套装</h4>
<p>¥148.00</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods/goods2.jpg" alt=""></div>
<div class="text">
<h4>情侣款时尚户外轻型徒步鞋环保大底</h4>
<p>¥364.00</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods/goods3.jpg" alt=""></div>
<div class="text">
<h4>Kenroll女士防滑夏季人字沙滩拖鞋</h4>
<p>¥99.00</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/goods/goods4.jpg" alt=""></div>
<div class="text">
<h4>2021春季新品，宝宝四季连体哈衣59-90cm</h4>
<p>¥55.00</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/recommend/recommend1.jpg" alt=""></div>
<div class="text">
<h4>特惠推荐</h4>
<p>它们最实惠</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend/recommend2.jpg" alt=""></div>
<div class="text">
<h4>爆款推荐</h4>
<p>它们最受欢迎</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend/recommend3.jpg" alt=""></div>
<div class="text">
<h4>一站买全</h4>
<p>使用场景下精心优选</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/recommend/recommend4.jpg" alt=""></div>
<div class="text">
<h4>领券中心</h4>
<p>更多超值优惠券</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 人气推荐结束 -->
<!-- 热门品牌开始 -->
<div class="brand">
<div class="wrapper">
<!-- 标题 -->
<div class="title">
<div class="left">
<h3>热门品牌</h3>
<p>国际经典 品质保证</p>
</div>
<div class="button">
<a href="#" class="prev"><span class="iconfont icon-danjiantou-zuoyouqiehuan"></span></a>
<a href="#" class="next"><span class="iconfont icon-danjiantou-zuoyouqiehuan1"></span></a>
</div>
</div>
<!-- 内容 -->
<div class="bd">
<ul>
<li>
<a href="#">
<div class="pic"><img src="./uploads/热门品牌/热门品牌1.jpg" alt=""></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/热门品牌/热门品牌2.jpg" alt=""></div>
</a>
</li>
<li>
<a href="#">
<div class="pic"><img src="./uploads/热门品牌/热门品牌3.jpg" alt=""></div>
最低0.47元/天 解锁文章
扫一扫
3414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
