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

1、这个商品页面将以前学的知识进行了综合,并且使用了以前没学的轮播模块(后面会发出来)。页面大体上分了三个部分导航栏、轮播广告、商品展示。

  • 导航栏:将商品种类进行了区分,也可以加一些功能(我的信息、联系客服等等)。


    image.png
  • 轮播广告:将近期活动或者优秀商品进行展出,轮播左右两侧也可以放一些活动宣传画等等。

轮播教程:内置模块之轮播

image.png
  • 商品展示:展示当前选中的导航种类下的商品,这里用的面板由class="layui-card-header"的div和class="layui-card-body"的div组成,如果用头上脚下的样式(上面介绍、下面商品图片),直接使用就ok,如果是头下脚上(上面图片下面介绍,常见的样式),则需要对hesder加上边框。

image.png

2、整体代码

别忘了加载模块奥!



    
        
        
        
        
        
        
    
    
            




衬衫
衬衫
衬衫
衬衫

把头和脚换个位置!

衬衫
衬衫
衬衫
衬衫

3、整体效果

image.png

注:

  • layui的一些class默认添加了各种各样的边框、属性等等,直接使用的话,效果可能和你想象的不太一样,这时候需要各种调大小、边距。。。


    image.png
  • 在浏览器中Fn+F12打开检测功能(不同浏览器可能叫法不同)十分香奥!,可以清晰的看到边距大小等等


    image.png
  • 上面的代码还可以更加优化, 比如把内容div进行整理打包放在一个或者几个div中, 便于管理, 这里仅仅是个例子, 让我们把以前用到的元素、模块进行复习和综合!

你可能感兴趣的:(综合复习之电子商城商品界面演示)