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: { //当屏幕宽度大于等于320
                    slidesPerView: 1,
                    spaceBetween: 0,
                },
                768: { //当屏幕宽度大于等于768 
                    slidesPerView: 1,
                    spaceBetween: 0,
                },
                1280: { //当屏幕宽度大于等于1280
                    slidesPerView: 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);
}