css布局实现新闻资讯网格布局效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现新闻资讯网格布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <STYLE>
@charset "utf-8";

        * {
            margin: 0; padding: 0; box-sizing: border-box; font-weight: normal;
        }
        html,
        body {
            font-family: "Microsoft YaHei"; font-size: 14px;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none; color: inherit;
        }
        .cui-btn {
            display: inline-block; height: 40px; padding: 0 30px; border: solid 1px transparent; border-radius: 2px; background: transparent; font-weight: 400; font-size: 14px; line-height: 38px; text-align: center; white-space: nowrap; vertical-align: middle; user-select: none; transition: 0.2s;
        }
        .cui-btn-small {
            height: 32px; padding-left: 20px; padding-right: 20px; font-size: 12px; line-height: 30px;
        }
        .cui-icon {
            font-family: 'cui-icon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle; font-size: 16px;
        }
        .cui-icon-play:before {
            content: "\EA1A";
        }
        .section-news {
            background: #F1F5FF;
        }
        .section-title {
            text-align: center; padding-top: 60px; padding-bottom: 52px;
        }
        .section-title h1 {
            position: relative; font-size: 36px; line-height: 50px; letter-spacing: 4px; color: #252b3a;
        }
        .section-title h2 {
            margin-top: 10px; font-size: 18px; line-height: 22px; letter-spacing: 2px; color: #666a75;
        }
        .section-wrapper {
            max-width: 1280px; padding-left: 30px; padding-right: 30px; margin-left: auto; margin-right: auto;
        }
        .news-body {
            height: 540px; margin-left: 10px; margin-right: 10px; box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.12);
        }
        .news-body:before,
        .news-body:after {
            content: " "; display: table; box-sizing: inherit;
        }
        .news-main {
            float: left; height: 100%; width: 32.5%;
        }
        .news-main-card {
            display: block; position: relative; height: 100%; overflow: hidden;
        }
        .news-main-card:hover .news-main-card-bg {
            transform: scale(1.1);
        }
        .news-main-card-bg {
            position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transition: 0.2s;
        }
        .news-main-card-bg {
            position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transition: 0.2s;
        }
        .news-main-card-bg-mb {
            display: none;
        }
        .news-main-card-top {
            position: relative; height: 310px;
        }
        .news-play-btn {
            display: none; position: absolute; top: 70px; right: 0; bottom: 0; left: 0; width: 40px; height: 30px; background-color: rgba(255, 255, 255, 0.3); border-radius: 2px; margin: auto; font-size: 0; line-height: 30px; text-align: center; cursor: pointer; transition: 0.2s;
        }
        .news-play-btn .cui-icon-play {
            font-size: 16px; color: #fff;
        }
        .news-main-card-bottom {
            position: relative; height: 230px; padding: 5px 40px;
        }
        .news-main-card-bottom .h2 {
            margin-bottom: 10px; font-size: 20px; line-height: 28px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .news-main-card-bottom .p {
            max-height: 40px; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.7); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
        }
        .news-main-card-bottom .sub-p {
            position: relative; padding-left: 10px; font-size: 14px; line-height: 20px; color: #fff;
        }
        .news-main-card-bottom .sub-p-date {
            margin-top: 10px;
        }
        .news-main-card-bottom .sub-p:before {
            content: ""; display: block; position: absolute; left: 0; top: 10px; border: solid 2px; border-radius: 50%; margin-top: -2px;
        }
        .news-main-card-bottom .sub-p-author {
            margin-top: 5px;
        }
        .news-main-card-bottom .btn-group {
            position: absolute; bottom: 30px;
        }
        .cui-btn-outline-light {
            border: solid 1px #fff; color: #fff;
        }
        .cui-btn-outline-light:hover {
            border-color: #f66f6a; background-color: #f66f6a; color: #fff;
        }
        .news-main-card-bottom .btn-group .cui-icon {
            margin-top: -2px; margin-right: 8px; font-size: inherit;
        }
        .news-sub {
            float: left; position: relative; height: 100%; width: 67.5%;
        }
        .news-list-v {
            position: absolute; height: 100%; width: 100%; visibility: hidden; opacity: 0; transition: 0s 0.2s;
        }
        .news-list-v.show {
            z-index: 1; visibility: visible; opacity: 1; transition: 0.2s;
        }
        .news-list-v:before,
        .news-list-v:after {
            content: " "; display: table; box-sizing: inherit;
        }
        .news-list-v:after {
            clear: both;
        }
        .news-list-v>li {
            float: left; width: 33.33333333%; height: 50%;
        }
        .news-list-card {
            display: block; position: relative; height: 100%; padding: 70px 40px 0; background-color: white;
        }
        .news-list-card:hover .h3,
        .news-list-card:hover .p {
            transform: translate(0, -26px);
        }
        .news-list-card:hover .more {
            opacity: 1; color: #6F7479;
        }
        .news-list-v>li:nth-child(1) .news-list-card,
        .news-list-v>li:nth-child(5) .news-list-card {
            background-color: #f66f6a;
        }
        .news-list-v>li:nth-child(2) .news-list-card {
            background-image: url(//repo.bfw.wiki/bfwrepo/image/60e197d4ac32a.png); background-size: cover;
        }
        .news-list-v>li:nth-child(4) {
            width: 66.66666667%;
        }
        .news-list-card .h3 {
            max-height: 56px; margin-bottom: 20px; font-size: 20px; line-height: 28px; color: #252b3a; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; transition: transform 0.2s;
        }
        .news-list-card .p {
            max-height: 60px; font-size: 14px; line-height: 20px; color: #666a75; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; transition: transform 0.2s;
        }
        .news-list-v>li:nth-child(1) .news-list-card .h3,
        .news-list-v>li:nth-child(2) .news-list-card .h3,
        .news-list-v>li:nth-child(5) .news-list-card .h3 {
            color: #fff;
        }
        .news-list-v>li:nth-child(1) .news-list-card .p,
        .news-list-v>li:nth-child(2) .news-list-card .p,
        .news-list-v>li:nth-child(5) .news-list-card .p,
        .news-list-v>li:nth-child(1) .news-list-card .more,
        .news-list-v>li:nth-child(2) .news-list-card .more,
        .news-list-v>li:nth-child(5) .news-list-card .more {
            color: rgba(255, 255, 255, 0.7);
        }
        .news-list-card .more {
            position: absolute; bot.........完整代码请登录后点击上方下载按钮下载查看