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

图标素材：(如果需要，图片另存为即可)

  <section class="news" data-aos="fade-down"><div class="newTop"><div class="newTitle">新闻资讯<span>NEWS AND INFORMATIONspan>div>div><div class="newsWrap"><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"><img src="{content.ImageUrl}" alt="{content.Title}">stl:a><div class="newsCon"><h5><stl:content type="title" wordNum="16">stl:content>h5><p><stl:content type="summary" wordNum="30">stl:content>p>div><div class="newOuter"><div class="newsDate"><stl:content type="addDate" formatString="yyyy-MM-dd">stl:content>div><stl:a><img src="{stl.siteurl}/upload/morearr.png" alt="查看新闻详情">stl:a>div>li>stl:contents>ul>div>
div>
section>

<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: 4,spaceBetween: 10,}}});</script>

CSS 样式代码：

/* 新闻 */
.news{width:100%;padding-top:80px;padding-bottom:80px;
}
.news .newTop{position:relative;width:1200px;margin:0 auto;padding-bottom: 18px;margin-bottom: 40px;
}
.news .newTop .newTitle{position: relative;font-size: 24px;color:#333;
}
.news .newTop .newTitle span{display: block;color:#bfbfbf;font-size: 12px;padding-left:60px;font-family: Source Han Sans;
}
.news .newTop .newTitle:after{content:"";display: block;position:absolute;left:0;bottom:5px;width:46px;height: 4px;background:#1274ce;
}.news .newsWrap{background:#ffffff;padding: 10px 0px 60px 0px;
}
.news #newsBox{width:1200px;
}
.news #newsBox li{background:#fff;
}
.news #newsBox li .pic{border:3px solid #fff;box-sizing: border-box;display: block;height: 210px;overflow: hidden;
}
.news #newsBox li .pic img{height: 100%;width:100%;
}
.news #newsBox .newsCon{border:3px solid #fff;margin:0 auto;padding: 0px 14px 20px 14px;box-sizing: border-box;
}
.news #newsBox .newsCon h5{font-family: "思源黑体";font-size:16px;line-height: 2;padding:10px 0px 10px 0px;
}
.news #newsBox .newsCon p{font-size: 12px;font-family: "思源黑体";font-weight: lighter;color: #a4a4a4;height:32px;
}
.news #newsBox .newOuter{border:3px solid #fff;display:flex;justify-content: space-between;padding-top: 16px;margin: 0px 14px 15px 14px;border-top:1px solid #ddd;box-sizing: border-box;color:#a4a4a4;
}
.news #newsBox .newsDate{background:url(../upload/dateIcon.png) no-repeat left;padding-left:24px;width:35%;
}
.news .newsMore {margin: 45px auto 0;width: 14vw;position: relative;text-align: center;
}
.news .newsMore .swiper-button-prev,
.news .newsMore .swiper-button-next {background: #ff6364;opacity: 1;width: 48px;height: 48px;--swiper-navigation-size: 30px;outline: none;color:#fff;
}
.news .newsMore a {display: block;padding-top: 20px;width: 60px;height: 48px;margin: 0 auto;
}
/* 新闻endLHW */

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！