模仿某网站做的简约风格

最新推荐文章于 2018-10-22 12:55:16 发布

spfLinux

最新推荐文章于 2018-10-22 12:55:16 发布

阅读量600

点赞数

分类专栏： css 文章标签：网站搭建简约风格模仿

本文链接：https://blog.csdn.net/spfLinux/article/details/78274962

版权

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">	
	<title>Document</title>
	<style>
		body {
			margin: 0;
			border: 0;
			padding: 0;
			background: #ECF0F1;
		}
		a {
			text-decoration: none;
		}
		.header {
			height: 50px;
			background: #456;
		}
		li {
			display: inline;
			position: relative;
			top: 12px;
			padding-right: 30px;
		}
		li a {
			color: #FFFFFF;
			font-size: 14px;
			cursor: pointer;
		}
		li:nth-child(1) {
			margin-left: 15%;
		}
		.article {
			width: 70%;
			background: #FFFFFF;
			margin-top: 30px;
			margin-left: 15%;
		}
		.atitle {
			font-weight: normal;
			font-size: 1.5rem;
			line-height: 1.4;
			color: #141412;
		}
		.atitle:hover {
			color: green;
		}
		span, .syn {
			font-size: 12px;
			color: #999;
		}
		.syn {
			width: 80%;
		}
		.more {
			color: green;
		}
	</style>
</head>
<body>
	<div class="header">
		<li><a href="">Home</a></li>
		<li><a href="">关于我们</a></li>
		<li><a href="">腾讯招聘</a></li>
	</div>

	<div class="article" align="center">
		<header><a href="" class="atitle">不要把 svg 转成 base64</a></header>
		<!-- <p><a href="" class="atitle">不要把 svg 转成 base64</a></p> -->
		<p>
			<span>来源于：XXXX</span>
			<span>时间：XXXXXXX</span>
		</p>
		<p class="syn">
			<span>关键字：</span>
			<span>关键字1 关键字2 关键字3 </span>
			<p><a class="more" href="">>>>查看全文</a></p>
		</p>
	</div>

	<div class="article" align="center">
		<header><a href="" class="atitle">2017年腾讯Web前端大会即将召开</a></header>
		<!-- <p><a href="" class="atitle">2017年腾讯Web前端大会即将召开</a></p> -->
		<p>
			<span>来源于：XXXX</span>
			<span>时间：XXXXXXX</span>
		</p>
		<p class="syn">
			<span>关键字：</span>
			<span>关键字1 关键字2 关键字3 </span>
			<p><a class="more" href="">>>>查看全文</a></p>
		</p>
	</div>

	<div class="article" align="center">
		<header><a href="" class="atitle">JS the Hardcore: 执行上下文(Execution Context)</a></header>
		<!-- <p><a href="" class="atitle">JS the Hardcore: 执行上下文(Execution Context)</a></p> -->
		<p>
			<span>来源于：XXXX</span>
			<span>时间：XXXXXXX</span>
		</p>
		<p class="syn">
			<span>关键字：</span>
			<span>关键字1 关键字2 关键字3 </span>
			<p><a class="more" href="">>>>查看全文</a></p>
		</p>
	</div>

	<div class="article" align="center">
		<header><a href="" class="atitle">weui.js发布</a></header>
		<!-- <p><a href="" class="atitle">weui.js发布</a></p> -->
		<p>
			<span>来源于：XXXX</span>
			<span>时间：XXXXXXX</span>
		</p>
		<p class="syn">
			<span>关键字：</span>
			<span>关键字1 关键字2 关键字3 </span>
			<p><a class="more" href="">>>>查看全文</a></p>
		</p>
	</div>
</body>
</html>

参考网站：https://www.qianduan.net/

spfLinux

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
模仿某网站做的简约风格

Document body { margin: 0; border: 0; padding: 0; background: #ECF0F1; } a { text-decoration: none; } .header { height: 50px; background: #456; } li { display:
复制链接

扫一扫

专栏目录