渐变背景响应式引导页代码

2020年5月24日 0条评论热度：885 字号：大 | 中 | 小
渐变背景响应式引导页代码

渐变背景响应式引导页代码 $%NBY_2S28%J{}2R}[A78])2.png$
如果你觉得雨滴资源网对你有帮助的话,可以小小的打赏一下小站,用于维持本站的运营！
以下为全部代码：
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>站长联盟-雨滴资源网-雨滴资源网www.yudzy.com</title>
	<meta name="keywords" content="站长联盟-雨滴资源网-雨滴资源网www.yudzy.com">
	<meta name="description" content="站长联盟-雨滴资源网-雨滴资源网www.yudzy.com">
	<link rel="shortcut icon" href=" favicon.ico">
	<style>
		*{
			margin: 0;
		}
		a{
			text-decoration: none;
		}
		html,body{
			height: 100%;
			width: 100%; 
		}
		.layer{
			width: 100%;
			min-height: 100%;
			background-image: linear-gradient(to bottom right, #fbd255, #fb55f9, #55b3fb, #fb555c);
		}
		.title{
			color: #fff;
			font-size: 30px;
			line-height: 60px;
			text-align: center;
	    	display: block;
	    	width: 100%;
	    	background: rgba(0,0,0,.4);
		}
		.con{
			width: 90%;
			min-height: 90%;
			margin: 10px auto;
			background: rgba(0,0,0,.2);
			border-radius: 15px;
			border: 1px solid rgba(0,0,0,.4);
			box-shadow: 0 0 5px rgba(0,0,0,.3);
			padding: 10px;
			box-sizing: border-box;
			overflow: hidden;
		}
		.list{
			float: left;
			width: 200px;
			overflow: hidden;
			height: 150px;
			background: rgb(255,255,255,.4);
			border-radius: 5px;
			border: 1px solid rgba(255,255,255,.3);
			padding: 5px;
			box-sizing: border-box;
			transition: all .3s;
			margin: 5px 0;
		}
		@media only screen and (min-width: 800px) {
		    .list {
		        width: 24%;
		        margin: 5px 0.5%;
		    }
		}
		@media only screen and (min-width: 1020px) {
		    .list {
		        width: 19%;
		        margin: 5px 0.5%;
		    }
		}
		@media only screen and (min-width: 1200px) {
		    .list {
		        width: 11.5%;
		        margin: 5px 0.5%;
		    }
		}
		.list:hover{
			transition: all .3s;
			background: rgb(255,255,255,.8);
			box-shadow: 0 0 10px rgba(255,255,255,.6);
		}
		.list-logo{
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.list-logo img{
			max-width: 100%;
			max-height: 100%;
		}
		.list-title{
			color: #000;
			font-size: 16px;
			font-weight: 600;
			line-height: 26px;
			display: block;
			text-align: center;
			width: 100%;
			white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
		.introduce{
			color: #333;
			font-size: 12px;
			line-height: 18px;
			display: block;
			width: 100%;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	</style>
</head>
<body>
	<div class="layer">
		<h3 class="title">站长联盟-雨滴资源网-雨滴资源网www.yudzy.com</h3>
		<div class="con" id="con">
			<!-- <a class="list" href="http://www.yudzy.com" title="">
				<div class="list-logo">
					<img src="https://www.yudzy.com/statics/img/logo.png" alt="">
				</div>
				<h3 class="list-title">雨滴资源网</h3>
				<p class="introduce">雨滴资源网-好东西，不私藏，乐于分享</p>
			</a> -->
		</div>
	</div>
</body>
</html>
<script>
	// 定义网站数组
	var StandArr = [
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		},
		{
			title: '雨滴资源网',
			url: 'http://www.yudzy.com',
			logo: 'http://www.yudzy.com/content/uploadfile/tpl_options//logopic.jpg',
			details: '雨滴资源网-全网最精免费资源分享平台!',
			QQ: '511798550'
		}
	]
    var StandStr = "";
    // 循环拼接
    StandArr.forEach(e => {
        StandStr += '<a class="list" target="_blank" href="' + e.url + '" title="' + e.details + '">'+
						'<div class="list-logo">'+
							'<img src="' + e.logo + '" alt="">'+
						'</div>'+
						'<h3 class="list-title">' + e.title + '</h3>'+
						'<p class="introduce">' + e.details + '</p>'+
					'</a>'
	});
    // 展示到页面
    document.getElementById("con").innerHTML = StandStr;
</script>
Plugins by 雨滴资源网
赞 (0) 打赏分享