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: 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; bottom: 30px; opacity: 0; transition: opacity 0.2s; color: rgba(255, 255, 255, 0.7);
}
.news-list-card .more i {
margin-left: 5px; transition: transform 0.2s;
}
.news-list-card .more:hover i {
transform: translate(5px, 0);
}
.cui-icon-more:before {
content: "\EA19";
}
.section-bottom {
padding-top: 40px; padding-bottom: 50px;
}
.section-more-wrap {
text-align: center;
}
.section-more-wrap a {
display: inline-block; font-size: 16px; line-height: 24px; color: #666a75; cursor: pointer; user-select: none; transition: 0.2s;
}
.section-more-wrap a:hover {
color: #f66f6a;
}
</STYLE>
</head>
<body>
<div class="section section-news" id="section-news">
<div class="section-title">
<h1>新鲜动态</h1>
<h2>科技前沿、大咖直播、活动展会，24小时更新不停</h2>
</div>
<div class="section-wrapper">
<div class="news-body">
<div class="news-main">
<a class="news-main-card" href="#">
<div class="news-main-card-bg" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/60c6b0cb074e7.png)"></div>
<div class="news-main-card-bg news-main-card-bg-mb" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/60dffe5a4b667.png)"></div>
<div class="news-main-card-top">
<div class="news-play-btn">
<span class="fa fa-lg fa-play"></span>
</div>
</div>
<div class="news-main-card-bottom">
<h2 class="h2">【直播】技术小白如何花2小时搭建一个精美网站</h2>
<p class="p">
云速建站服务，无需代码，自由拖拽，并可提供PC 、手机 、微信网站 、小程序 、 APP五站合一的模板建站产品。
</p>
<div class="sub-p sub-p-date">
3月14日 16:00-18:00
</div>
<div class="sub-p sub-p-author">
云主机建站大牛
</div>
<div class="btn-group">
<span class="cui-btn cui-btn-small cui-btn-outline-light"><span class="fa fa-lg fa-play"></span><span>观看视频</span></span>
</div>
</div>
</a>
</div>
<div class="news-sub">
<ul class="news-list-v show">
<li>
<a href="#" class="news-list-card">
<h3 class="h3">浅谈服务化和微服务化</h3>
<p class="p">
微服务是近期非常热门的话题，芸芸众生言必谈微服务。
</p>
<span class="more">查看详情<i class="fa fa-lg fa-arrow-right"></i></span>
</a>
</li>
<li>
<a href="#" cl.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0