模仿文章框

最新推荐文章于 2025-04-27 08:15:00 发布

原创最新推荐文章于 2025-04-27 08:15:00 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS 文章框

css 专栏收录该内容

45 篇文章

订阅专栏

要模仿的框：

<!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;
			padding: 0;
		}
		ul li, li{
			list-style: none;
			margin-right: 10px;    /* 换一个单位 */
		} 
		a {
			text-decoration: none;
		}
		header,section {
			margin: 0;
			padding: 0;
		}
		.dh {
			font-size: 18px;
			margin-bottom: 10px;
			background-color: #1E90FF;
		}
		.tab1{
			margin-left: 10px;
			border-spacing: 10px 5px;
		}
		tr td {
			position: relative;  /* 可以这样子 */
			top: 5px;
			line-height: 44px;
		}
		tr td a{
			color: #D9D9D9;
		}
		.list_a a:hover {
			color: red;
		}
		.active {
			border-bottom: 2px solid #FFFFFF;
			position: relative;  /* 可以这样子 */
			top: 5px;
			line-height: 44px;
		}
		.article {
			margin-left: 10%;
			width: 80%;
			border: 1px #c3c3c3 solid;
		}
		

	</style>
</head>
<body>
	
	<div class="dh">
		<div align="center">
			网站标题
		</div>
		<table class="tab1">
			<tr>
				<td class="active"><a href="1.html" style="color:#FFFFFF;">标题1</a></td>
				<td><a href="2.html">标题2</a></td>
				<td><a href="3.html">标题3</a></td>
				<td><a href="4.html">标题4</a></td>
			</tr>
		</table>
		
	</div>
	

	<section class="article">
		<header align="center">
			<p><h2>2017成功设计奖范石钟捧三大奖(图文)</h2></p>
			<p>创建于：XXX  来源于：XXXXX</p>
		</header>
		
		<section>
			<p>10月14日，在上海世博会博物馆举行的《2017年度成功设计奖》颁奖典礼上，我校设计艺术学院研究生范石钟一举获得三项大奖：“2017年度最成功设计大奖”（最高奖），“2017年度青年设计师”（唯一获奖者），2017年度“成功设计大奖”。</p>
			<p>创办于2006年的成功设计大赛是全球性的设计奖项，由来自八个国家和地区的设计大师联合发起。创办以来，23个国家和地区以及中国42个地区12000多名优秀设计工作者积极参与。独创SPR评审体系，评估设计对商业和社会产生的价值，每年的颁奖典礼成为了解设计最新风向，设计资源对接的年度盛事。</p>
			<p>据了解，大赛今年开赛以来，受到国内外设计界的广泛关注，来自世界各地的优秀参赛作品比往年增加了一倍。除了一些知名品牌如飞利浦、世博会英国馆、上汽荣威、锤子手机、名爵MG、九牧、海尔、中国中车等外，众多创业品牌也参与其中并取得了优秀的成绩。</p>
		</section>

		<footer>
			<p align="center">浏览量：</p>
		</footer>
	</section>
</body>
</html>

效果：