2021-03-19

最新推荐文章于 2024-04-26 22:14:41 发布

fastrack_0706

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量97

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/115008486

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
				text-decoration: none;
			}
			.list {
				display: flex;
				margin: 0;
				margin-top: 30px;
				padding: 0;
				list-style: none;
				flex-direction: row;
				justify-content: space-evenly;
			}

			.card-warp {
				display: inline-block;
				margin: 0px;
				padding: 0px;
				margin-left: 20px;
			}

			.card {
				box-sizing: border-box;
				width: 350px;
				height: 300px;
				overflow: hidden;
				border-radius: 15px;
				margin: 0px;
				padding: 0px;
			}
			
			.card a{
				display: inline-block;
			}

			.card-warp .card .img-warp img {
				width: 100%;
				height: 200px;
			}

			.card-warp .card .info-warp h2 {
				text-align: center;
			}

			.card-warp .card .info-warp h2 span {
				text-align: center;
				user-select: none;
			}

			.card:hover {
				box-shadow: #808080 0px 10px 10px 10px;
			}

			.card:hover .info-warp h2 span {
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul class="list"></ul>
			<ul class="list"></ul>
		</div>
		<script type="text/tpl" id="tpl1">
			<div class="card-warp">
				<div class="card">
					<a href="http://k.sina.com.cn/article_1975995305_75c74ba902000fsgn.html">
						<div class="img-warp">
							<img src="{{path}}">
						</div>
						<div class="info-warp">
							<h2>
								<span>{{info}}</span>
							</h2>
						</div>
					</a>
			</div>
		</div>
		</script>
		<script type="text/javascript">
			var list = document.getElementsByClassName('list')[0];
			var list1 = document.getElementsByClassName('list')[1];
			var tpl = document.getElementById('tpl1').innerHTML,
				data = [{
						path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F8095687637%2F0.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618731733&t=6ba56c404b31829ec9812eedf0a3be2e',
						info: '朝鲜宣布与马来西亚断交'
					},
					{
						path: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4286300528,2230216081&fm=26&gp=0.jpg',
						info: '朝鲜宣布与马来西亚断交'
					},
					{
						path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmmbiz.qpic.cn%2Fmmbiz_jpg%2FjAq9wqyDucy59qicQGZfC0dOVk17iatdW4tMkzpicyBAxoQHmAnydk8Zy3t4aDmlTe6eCKJ43IW6C2YX7oX2Bw0lw%2F0%3Fwx_fmt%3Djpeg&refer=http%3A%2F%2Fmmbiz.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618732144&t=12a5379d2c9093ee1a2abf15399b2f2f',
						info: '朝鲜宣布与马来西亚断交'
					},
					{
						path: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2627112537,1744230790&fm=26&gp=0.jpg',
						info: '朝鲜宣布与马来西亚断交'
					},
					{
						path: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.cyol.com%2Fimg%2Fgaoqing%2Fattachement%2Fjpg%2Fsite2%2F20170307%2FIMGc81f6600b9c843882774998.jpg&refer=http%3A%2F%2Fimg.cyol.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618732144&t=5a629d1020e9aa4887bb511ceff0aaca',
						info: '朝鲜宣布与马来西亚断交'
					}
				],
				str = '';
			data.forEach((item, index) => {
				str += tpl.replace(/{{(.*?)}}/g, function(node, key) {
					return {
						path: item.path,
						info: item.info
					} [key];
				});
			})
			list.innerHTML = str;
			list1.innerHTML = str;
		</script>
	</body>
</html>

fastrack_0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-19

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> a{ text-decoration: none; } .list { display: flex; margin: 0; margin-top: 30px; pa...
复制链接

扫一扫