一、网站首页功能特点
- 推荐搜索关键字的快捷链接
- 活动展示的轮播图
- 使用了Unslider，使用起来特别简单，兼容性也好，具体使用步骤见官网
3. 分楼层的商品分类信息
二、商品列表页功能点
- 商品列表的展示
- 所需接口：
- 产品搜索及动态排序所需字段：categoryId/keyword、pageNum、pageSize、orderBy:排序参数
- 排序的逻辑
- 分页的处理
三、商品详情页功能
- 商品信息展示
- 缩略图预览
- 添加购物车
- 所需接口：
- 商品详情接口
- 添加购物车的接口所需字段：productId, count
- 查询购物车产品数量所需字段：无
1.Unslider制作轮播图简单使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.banner-con {
850px;
height: 370px;
float: left;
margin: 0 auto;
background-color: #eee;
}
.banner-con .banner-arrow {
top: 160px;
30px;
height: 50px;
color: #fff;
font-size: 30px;
cursor: pointer;
line-height: 50px;
position: absolute;
text-align: center;
background-color: #ccc;
background-color: rgba(0, 0, 0, .2);
}
.banner-con .banner-arrow.prev {
left: 0;
}
.banner-con .banner-arrow.next {
right: 0;
}
.banner-con .banner-arrow:hover {
background-color: #aaa;
background-color: rgba(0, 0, 0, .5);
}
.banner {
position: relative;
overflow: auto;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
}
.banner img {
100%;
height: 100%;
}
.banner .dots {
left: 0;
right: 0;
bottom: 20px;
position: absolute;
text-align: center;
}
.banner .dots li {
10px;
height: 10px;
margin: 0 4px;
opacity: .4;
cursor: pointer;
border-radius: 6px;
text-indent: -999em;
border: 2px solid #fff;
display: inline-block;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
.banner .dots li.active {
opacity: 1;
background: #fff;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/unslider.js"></script>
</head>
<body>
<div class="banner-con">
<div class="banner">
<ul>
<li>
<a href="#">
<img src="./image/banner/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./image/banner/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./image/banner/banner3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./image/banner/banner4.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./image/banner/banner5.jpg" alt="">
</a>
</li>
</ul>
<div class="banner-arrow prev">
<i class=""><</i>
</div>
<div class="banner-arrow next">
<i class="">></i>
</div>
</div>
</div>
</body>
<script>
$(function () {
var $slider = $('.banner').unslider({
speed: 3000, // 滚动速度
delay: 2000, // 动画延迟
complete: function () {}, // 动画完成的回调函数
keys: true, // 启动键盘导航
dots: true, // 显示圆点导航
fluid: false
});
$('.banner-con .banner-arrow').click(function () {
var forward = $(this).hasClass('prev') ? 'prev' : 'next';
$slider.data('unslider')[forward]();
});
});
</script>
</html>
2. 左右相邻的元素都给了border，导致紧挨着的border比别的地方宽的一个解决办法
margin-right: -1px;
3.