siteserver/sscms 首页新闻排版及代码（二）

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

在这里插入图片描述
所需素材：(如果需要，图片另存为即可)

素材1
在这里插入图片描述
素材2:

素材3

  <section class="news"><div class="newsTitle" data-aos="fade-down"><h4>新闻资讯</h4><span>latest news</span></div><div class="newsWrap" data-aos="fade-down"><div class="swiper-container" id="newsBox"><ul class="swiper-wrapper"><stl:contents channelName="新闻资讯" isImage="true" totalNum="24" scope="all"><li class="swiper-slide"><stl:a class="pic"><div class="newsDate"><span><stl:content type="addDate" formatString="yyyy-MM-dd"></stl:content></span></div><img src="{content.ImageUrl}" alt="{content.Title}"></stl:a><div class="newsCon"><h4><stl:content type="title" wordNum="24"></stl:content></h4><p><stl:content type="summary" wordNum="50"></stl:content></p></div></li></stl:contents></ul></div><div class="newsMore" data-aos="fade-down"><stl:a channelIndex="新闻资讯">查看更多</stl:a></div>
</div><script>var mySwiper = new Swiper('#newsBox', {spaceBetween: 10,slidesPerView: 4,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},breakpoints: {320: { //当屏幕宽度大于等于320slidesPerView: 1,spaceBetween: 0,},768: { //当屏幕宽度大于等于768 slidesPerView: 1,spaceBetween: 0,},1280: { //当屏幕宽度大于等于1280slidesPerView: 3,spaceBetween: 40,}}});</script>
</section>

/* 新闻 */
.news .newsTitle{width: 100%;border-top: 30px solid #00479d;height: 140px;background: url(../upload/titleBg.png) repeat-x left bottom;text-align: center;font-size: 32px;color: #fcff00;
}
.news .newsTitle h4{position: relative;width: 286px;margin: 20px auto 0px;
}
.news .newsTitle span{font-size: 14px;font-weight: normal;display: block;text-transform: uppercase;
}
.news .newsTitle h4:after, .news .newsTitle h4:before {position: absolute;content: '';display: block;width: 153px;height: 44px;background: url(../upload/titlePeitu.png) no-repeat center top;top: 15px;
}
.news .newsTitle h4:before {left: -153px;
}
.news .newsTitle h4:after {right: -153px;transform: rotateY(180deg);
}
.news .newsWrap{padding: 90px 0px 60px 0px;
}
.news #newsBox{width:1200px;
}
.news #newsBox li{background:#fff;
}
.news #newsBox li .pic{box-sizing: border-box;display: block;height: 230px;overflow: hidden;position:relative;
}
.news #newsBox li .pic img{height: 100%;width:100%;
}
.news #newsBox .newsCon{margin:0 auto;box-sizing: border-box;
}
.news #newsBox .newsCon h4{font-family: "思源黑体";font-size:16px;line-height: 2;padding:25px 0px 10px 0px;
}
.news #newsBox .newsCon p{font-size: 14px;font-family: "思源黑体";line-height: 1.75;color: #333;height:48px;
}
.news #newsBox .newsDate{background:url(../upload/dateIcon02.png) no-repeat center 10px,rgba(255,114,0,0.8);height:80px;width:100px;position:absolute;right:0;top:0;color:#fff;font-size:16px;
}
.news #newsBox .newsDate span{display: block;padding-top:48px;text-align: center;
}
.news .newsMore {text-align: center;
}
.news .newsMore a {border-radius: 20px;margin-top: 70px;margin-bottom:40px ;font-size: 14px;background: #004ca7;color: #f0ff00;width: 140px;height: 40px;line-height: 40px;display: inline-block;text-align: center;position: relative;z-index: 1;overflow: hidden;
}
.news .newsMore a:before {content: "";position: absolute;top: 0;left: 0;width: 135%;height: 100%;background: #fff;z-index: -99;transform-origin: 0 0;-ms-transfomr-origin: 0 0;-webkit-transfomr-origin: 0 0;transform: translateX(-100%) skewX(-45deg);-ms-transform: translateX(-100%) skewX(-45deg);-webkit-transform: translateX(-100%) skewX(-45deg);transition: transform .2s;
}
.news .newsMore a:hover {color: #004ca7;border: 1px solid #004ca7;
}
.news .newsMore  a:hover:before{transform:translateX(0) skewX(-45deg);
}