综合复习之电子商城商品界面演示

作者: 小疏林er | 来源:发表于2020-04-09 14:18 被阅读0次

综合复习之电子商城商品界面演示
2017年无锡中考英语总复习训练题
项目目录
2.8商品信息录入界面功能设计
2.8商品信息录入界面功能设计
2.8 商品信息查询修改界面功能设计
微信商铺接口文档
webdw现在支持编辑风格了
乐瓣-女性经期APP，用户界面视频演示
安卓应用之简易购物车实现

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">&#xe684;</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">&#xe680;</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">&#xe67f;</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">&#xe67f;</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">&#xe684;</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">&#xe680;</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">&#xe67f;</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">&#xe67f;</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中, 便于管理, 这里仅仅是个例子, 让我们把以前用到的元素、模块进行复习和综合!