1、这个商品页面将以前学的知识进行了综合，并且使用了以前没学的轮播模块（后面会发出来）。页面大体上分了三个部分导航栏、轮播广告、商品展示。
导航栏：将商品种类进行了区分，也可以加一些功能（我的信息、联系客服等等）。
image.png- 轮播广告：将近期活动或者优秀商品进行展出，轮播左右两侧也可以放一些活动宣传画等等。
轮播教程：内置模块之轮播
image.png
- 商品展示：展示当前选中的导航种类下的商品，这里用的面板由
class="layui-card-header"的div和class="layui-card-body"的div组成，如果用头上脚下的样式（上面介绍、下面商品图片），直接使用就ok，如果是头下脚上（上面图片下面介绍，常见的样式），则需要对hesder加上边框。<style type="text/css"> .layui-card-header{ text-align: center; border-top: 1px solid #f6f6f6; /*头和脚交换以后对header添加上边框*/ } </style>image.png
2、整体代码
别忘了加载模块奥！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript">
layui.use(['element','carousel'],function(){
var element = layui.element;
var carousel = layui.carousel;
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
})
</script>
<style type="text/css">
.daohang{
height: 80px;
text-align: center;
}
.menshen{
height: 265px;
font-size: 40px;
text-align: center;
}
.layui-card-header{
text-align: center;
border-top: 1px solid #f6f6f6; /*头和脚交换以后对header添加上边框*/
}
.sp{
height: 200px;
margin-top: 20px;
}
.layui-card-body{
text-align: center;
}
.layui-card-body i{
font-size: 80px;
line-height: 157px;
}
.text{
height: 50px;
line-height: 50px;
margin-top: 40px;
text-align: center;
}
</style>
</head>
<body style="background-image: url(img/朦胧.jpg)">
<div class="layui-container ">
<div class="layui-row ">
<div class="layui-col-md12 daohang">
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item ">
<a href="javascript:;" >男装女装</a>
<dl class="layui-nav-child ">
<dd><a href="">纯色衬衫！</a></dd>
<dd><a href="">条纹衬衫！</a></dd>
<dd><a href="">渐变衬衫！</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">日用百货</a></li>
<li class="layui-nav-item layui-this"><a href="">生鲜食品</a></li>
<li class="layui-nav-item"><a href="">数码周边</a></li>
<li class="layui-nav-item"><a href="">充值中心</a></li>
<li class="layui-nav-item"><a href="">箱包饰品</a></li>
</ul>
</div>
<div class="layui-col-md3 menshen">
秦<br />叔<br />宝
</div>
<div class="layui-col-md6"style="height: 265px;font-size: 20px;">
<div class="layui-carousel" id="test1">
<div carousel-item>
<div class="layui-bg-blue"><img src="img/墙.jpg"/></div>
<div class="layui-bg-black"><img src="img/梅花.jpg"/></div>
<div class="layui-bg-black"><img src="img/星空树.jpg"/></div>
<div class="layui-bg-black"><img src="img/tu.jpg"/></div>
</div>
</div>
</div>
<div class="layui-col-md3 menshen">
尉<br />迟<br />恭
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-header">衬衫</div>
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-header">衬衫</div>
<div class="layui-card-body" ">
<i class="layui-icon"></i>
</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-header">衬衫</div>
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-header">衬衫</div>
<div class="layui-card-body">
<i class="layui-icon"></i>
</div>
</div>
</div>
<div class="layui-col-md12 text">
<h1 >把头和脚换个位置！</h1>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
<div class="layui-card-header">衬衫</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
<div class="layui-card-header">衬衫</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
<div class="layui-card-header">衬衫</div>
</div>
</div>
<div class="layui-col-md3 sp">
<div class="layui-card " >
<div class="layui-card-body" >
<i class="layui-icon"></i>
</div>
<div class="layui-card-header">衬衫</div>
</div>
</div>
</div>
</div>
</body>
</html>
3、整体效果
image.png注：
layui的一些class默认添加了各种各样的边框、属性等等，直接使用的话，效果可能和你想象的不太一样，这时候需要各种调大小、边距。。。
image.png在浏览器中Fn+F12打开检测功能（不同浏览器可能叫法不同）十分香奥！，可以清晰的看到边距大小等等
image.png- 上面的代码还可以更加优化, 比如把内容div进行整理打包放在一个或者几个div中, 便于管理, 这里仅仅是个例子, 让我们把以前用到的元素、模块进行复习和综合!
