console
function banner() {
var itemList = document.getElementsByClassName('item');
for (var i = 0; i < itemList.length; i++) {
var str = 'https://api.imalan.cn/random/?c=unsplash&s=large&r=img?t=' + Math.random() * 20;
itemList[i].style.backgroundImage = "url(" + str + ")";
}
}
<!doctype html>
<html>
<head>
<title>
冰水鉴心
</title>
<meta charset="utf-8">
<meta name="keywords" content="冰水鉴心 - 我菜死了">
<meta name="description" content="冰水鉴心 - 我菜死了">
<link rel="shortcut icon" href="https://pictures-1257961856.cos.ap-shanghai.myqcloud.com/logo/Logo-B%401.5x.png">
<link type="text/css" rel="stylesheet" href="./src/css/main.css">
<link type="text/css" rel="stylesheet" href="./src/css/my.css">
</head>
<body onload="banner()">
<div class="mask">
</div>
<div id="bg" class="blur">
</div>
<header>
<div class="header-logo">
<a id="logo" class="logo" href="./index.html">
<img src="https://pictures-1257961856.cos.ap-shanghai.myqcloud.com/logo/Logo-W%401.5x.png"
width="30px" height="30px">
<p>
冰水鉴心
</p>
</a>
<ul>
<li>
<a id="home" href="#">
<p>
首页
</p>
</a>
</li>
<li>
<a id="other" href="#">
<p>
其他
</p>
</a>
</li>
<li>
<a id="about" href="#">
<p>
关于
</p>
</a>
</li>
</ul>
</div>
</header>
<div class="container">
<div class="item-list">
<div class="item">
<a href="./blog/2019/1.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/2.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/3.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/4.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/5.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/6.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/7.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/8.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/9.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
<div class="item">
<a href="./blog/2019/10.html">
<h2>
标题
</h2>
<h3>
描述
</h3>
</a>
</div>
</div>
<footer>
<div class="footer">
<p>
没有备案萌萌哒|
</p>
<a class="" href="#">
我很菜的
</a>
</div>
</footer>
</div>
<script src="./src/js/main.js">
</script>
</body>
</html>
* {
margin: 0px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #eeeeee;
}
html {
margin: 0px;
}
h1 {
font-size: 28px;
margin: 5px;
}
h2 {
font-size: 24px;
margin: 5px;
}
h3 {
font-size: 18px;
margin: 5px;
}
h4 {
font-size: 14px;
margin: 5px;
}
h5 {
font-size: 10px;
margin: 5px;
}
p {
font-size: 16px;
margin-left: 10px;
display: inline;
}
a {
text-decoration: none;
}
body #logo img {
margin-right: 10px;
}
a.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.header-logo {
margin: 10px, 5px;
}
#logo,
#home,
#other,
#about {
font-weight: normal;
line-height: 32px;
padding: 8px;
border-radius: 4px;
background-color: transparent;
text-decoration: none;
white-space: nowrap;
}
header {
position: fixed;
width: 100%;
background-color: rgba(20, 20, 20, 0);
z-index: 10;
}
div.header-logo a {
float: left;
align-items: center;
}
div.header-logo ul {
display: flex;
flex-direction: row;
list-style-type: none;
padding-inline-start: 0px;
float: right;
align-items: center;
margin-right: 10px;
}
div.header-logo ul li a {
text-decoration: none;
}
#bg {
display: flexbox;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-image: url("https://api.imalan.cn/random/?c=unsplash&s=large&r=img");
}
.mask {
background-color: rgba(20, 20, 20, 0.6);
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.blur {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
zoom: 1;
padding: 5px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
z-index: -2;
}
.blur:after {
content: "";
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
margin: 0px auto;
background: inherit;
filter: blur(5px);
z-index: -2;
}
.container {
position: fixed;
width: 100%;
height: 100%;
margin: 0px 0px;
text-align: center;
overflow: auto;
z-index: 2;
}
.container::-webkit-scrollbar {
width: 0 !important
}
.item-list {
display: flex;
flex-direction: column;
padding: 20px 60px;
margin: 10px auto;
max-width: 900px;
}
.item-list:first-child {
margin-top: 50px;
}
.item {
display: flex;
width: 100%;
height: 200px;
border-radius: 10px;
margin: 20px auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center 0;
justify-content: center;
transition: .2s;
flex-direction: column;
}
.item:hover {
transform: scale(1.02);
}
.item a,
p {
text-align: center;
margin: auto 0px;
color: #eeeeee;
}
.item a {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
width: 100%;
height: 200px;
border-radius: 10px;
background-color: rgba(20, 20, 20, 0.2);
}
.footer {
display: flex;
justify-content: center;
flex-direction: row;
position: relative;
bottom: 0px;
left: 0px;
background-color: rgba(20, 20, 20, 0);
z-index: 10;
text-align: center;
}
.footer a {
margin: 10px 0px;
font-size: 16px;
}
@media (max-width:600px) {
.item-list {
padding: 20px 10px;
}
}
@media (max-width:300px) {
.item {
height: 100px;
margin: 5px auto;
}
}