html5 不规则图形热点,HTML5一款不规则大小瓦片堆叠风格的新闻网站首页模板

CSS

语言：

CSSSCSS

确定

/* Universal */

* {

margin: 0;

padding: 0;

}

body {

background-color: #e4ecee;

}

.likes {

font-family: 'Open Sans', sans-serif;

color: #dadfd8;

font-size: 8px;

position: absolute;

bottom: 17px;

left: 16px;

}

.likes:before {

content: '\2665';

color: #dadfd8;

padding-right: 6px;

}

.clear {

clear: both;

}

/* Navigation */

header {

margin: 60px 0px;

}

.navbar {

display: inline-block;

width: 100%;

}

.hamburger {

float: left;

position: relative;

top: 5px;

}

.bar {

border-radius: 6px;

}

.firstLine {

background-color: #7e8186;

width: 17px;

height: 3px;

margin-bottom: 2px;

}

.secondLine {

background-color: #7e8186;

width: 10px;

height: 3px;

margin-bottom: 2px;

}

.thirdLine {

background-color: #7e8186;

width: 14px;

height: 3px;

}

.search {

float: right;

position: relative;

bottom: 20px;

}

.searchIcon {

border: 2px solid #7e8186;

width: 11px;

height: 11px;

border-radius: 50%;

}

.tail {

border-radius: 8px;

position: relative;

left: 11px;

bottom: 2px;

content: '';

height: 3px;

width: 5px;

background-color: #7e8186;

-ms-transform: rotate(40deg);

/* IE 9 */

-webkit-transform: rotate(40deg);

/* Safari */

transform: rotate(40deg);

/* Standard syntax */

}

#search-bar {

width: 75%;

padding: 15px;

float: left;

}

#submit {

width: 25%;

padding: 15px;

float: right;

}

.textLogo {

text-transform: uppercase;

color: #7e8186;

text-align: center;

font-family: 'Oswald', sans-serif;

}

/* Layout */

.container {

max-width: 600px;

margin: 0 auto;

}

/* Cards */

.card {

box-shadow: 2px 0px 120px -6px rgba(0, 0, 0, 0.17);

}

.card-long {

position: relative;

background-color: black;

width: 335px;

height: 150px;

float: left;

}

.card-reg {

position: relative;

background-color: #000;

width: 240px;

height: 150px;

float: left;

}

.card-xl {

position: relative;

background-color: #000;

width: 360px;

height: 150px;

float: left;

}

.card-sm {

position: relative;

background-color: #000;

width: 215px;

height: 150px;

float: left;

}

/* Card Styles */

.card-long-bg {

position: relative;

width: 150px;

height: 150px;

background-color: #000;

float: left;

background: url('https://images.unsplash.com/photo-1472060650787-9726edbd6bd4?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=202fd86f216a647de9e93b27f9dbb4e3');

background-size: cover;

}

.card-long-bg-two {

width: 150px;

height: 150px;

background-color: #000;

float: left;

background: url('https://images.unsplash.com/photo-1455463640095-c56c5f258548?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=32f066deb078dd3ebfda8a03960aedaa');

background-size: cover;

background-position: 100% 0;

}

.card-long-block {

background-color: #fff;

width: 185px;

height: 150px;

float: right;

}

.card-long-header {

font-family: 'Playfair Display', sans-serif;

line-height: 22px;

font-weight: bold;

padding-top: 17px;

padding-left: 17px;

}

.card-reg-left-reg {

font-family: 'Playfair Display', sans-serif;

line-height: 22px;

font-weight: bold;

padding: 20px 0px 25px 17px;

width: 130px;

}

.card-reg-left-xl {

font-family: 'Playfair Display', sans-serif;

line-height: 22px;

font-weight: bold;

padding: 20px 0px 25px 17px;

width: 130px;

}

.card-reg-left-sm {

font-family: 'Playfair Display', sans-serif;

color: #fff;

line-height: 22px;

font-weight: bold;

padding: 20px 0px 25px 17px;

width: 130px;

}

.card-reg-header {

font-family: 'Playfair Display', sans-serif;

text-align: center;

color: white;

font-weight: 700;

position: relative;

top: 33%;

padding: 0px 25px;

line-height: 24px;

}

.card-long-block p {

font-family: 'Roboto', sans-serif;

font-size: 8px;

padding-top: 15px;

padding-left: 17px;

padding-right: 17px;

line-height: 12px

}

.card-reg-bg {

background: url('https://images.unsplash.com/photo-1449247709967-d4461a6a6103?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=4093955224092fcca5756b3d1c8aa6c8') no-repeat;

background-position: 0% 100%;

background-size: 200%;

}

.card-xl-bg {

background: url('https://images.unsplash.com/photo-1434648913092-5063e80c80f1?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=af8e03920b1759fec47dcc12a98276f0') no-repeat;

background-position: 38% 70%;

}

.card-reg-overlay {

background: linear-gradient( rgba(204, 58, 77, 0.85), rgba(229, 109, 99, 0.85)), url('https://images.unsplash.com/photo-1457084103532-1bc117b6fd95?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=d58281ef47f6bd8d0559f4a7a40d7d1a') left top no-repeat;

background-size: 140%;

background-position: 50% 35%;

}

.card-sm-bg {

background: url('https://images.unsplash.com/photo-1457038398933-c7f0de7ee615?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=38132e6dfdd465fd5c7e699ec7698078 ') no-repeat;

background-size: 190%;

background-position: 20% 50%;

}

.l-spacing {

margin-left: 25px;

}

.r-spacing {

margin-right: 25px;

}

.secondRow,

.thirdRow {

margin-top: 20px;

}

/* Media Queries */

@media screen and (max-width: 615px) {

.container {

width: 90%;

}

.card {

width: 100%;

margin: 10px 0 !important;

}

.card-reg-header {

top: 40%;

}

.card-long-bg,

.card-long-bg-two {

width: 45%;

}

.card-long-block {

width: 55%;

}

.l-spacing,

.r-spacing,

.secondRow,

.thirdRow {

margin: 0;

}

}

#search-bar {

border: 1px solid #eee;

}

#submit {

border: none;

}