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

最新推荐文章于 2022-03-14 09:00:00 发布

Red_Liu

最新推荐文章于 2022-03-14 09:00:00 发布

阅读量533

点赞数

分类专栏： siteserver/sscms 文章标签： sscms 新闻排版设计 sscms siteserver

本文链接：https://blog.csdn.net/u011442365/article/details/118329325

版权

siteserver/sscms 专栏收录该内容

18 篇文章 3 订阅

订阅专栏

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

  <!-- news lhw -->
  <section class="news" data-aos="fade-down">
    <div class="newTop">
        <div class="newTitle">新闻资讯<span>NEWS AND INFORMATION</span></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>
<!-- /news lhw -->

<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: 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 */