SiteServer/sscms 首页产品版块排版及代码

本文主要是介绍SiteServer/sscms 首页产品版块排版及代码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

排版样式一：在这里插入图片描述
Html 结构代码：

    <section class="products"><div class="productTop"><div class="proTitle">产品展示<span>PRODUCT DISPLAY</span></div></div><div id="productsBox" class="swiper-container"><ul class="swiper-wrapper"><stl:contents channelIndex="产品展示" totalNum="30" scope="all" order="AddDate"><li class="swiper-slide tempImage_{content.item-1}"><div class="wrap"><stl:a><div class="pic"><img src="{content.ImageUrl}" alt="{content.Title}"></div><div class="proText"><h3>{stl:content type='Title' wordNum="8" }</h3></div></stl:a></div></li></stl:contents></ul></div></section>

CSS 样式代码：

/* 首页产品展示版块 */
.products{background:#ffffff;padding:100px 0px 40px;
}
.products .productTop{position:relative;width:1200px;margin:0 auto;border-bottom:1px solid #f3f3f3;padding-bottom: 18px;margin-bottom: 70px;
}
.products .productTop .proTitle{position: relative;font-size: 24px;color:#333;
}
.products .productTop .proTitle span{display: block;color:#bfbfbf;font-size: 12px;padding-left:60px;font-family: Source Han Sans;
}
.products .productTop .proTitle:after{content:"";display: block;position:absolute;left:0;bottom:5px;width:46px;height: 4px;background:#1274ce;
}
#productsBox{width:1200px;
}
#productsBox li .wrap{width:100%;box-sizing: border-box;
}
#productsBox li .proText h3{font-size: 14px;color:#444;font-weight: normal;text-align: center;margin-top:8px;height:48px;line-height: 48px;
}
#productsBox li .pic{width:100%;border:1px solid #efefef;line-height: 0;
}
/* /首页产品版块结束 */

Javascris 代码(需要配合 Swiper插件使用):

            var mySwiper = new Swiper('#productsBox', {loop: true,slidesPerView: 4,spaceBetween: 24,breakpoints: { 320: {  //当屏幕宽度大于等于320slidesPerView: 1,spaceBetween: 0,},768: {  //当屏幕宽度大于等于768 slidesPerView: 1,spaceBetween: 0,},1280: {  //当屏幕宽度大于等于1280slidesPerView: 4,spaceBetween: 24,}}});