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

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

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看