CSS case

Insert picture description here
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
		    .d0{
		    	width: 800px;
		    	height: 600px;
		    	/*块状元素水平居中*/
		    	margin: 0 auto;
		    }
			.span1{
				color: gray;
				font-size: 14px;
			}
			.span2{
				color: red;
				font-size: 14px;
			}
			.a1{
				color: blue;
			}
			.a2{
				color: blue;
			}
			.input1{
				color: red;
				font-size: 12px;
			}
			.input2{
				color: green;
				font-size:  12px;
				font-weight: bolder;
			}
			.p2{
				text-indent: 2em;
			}
			h1{
				text-align: center;
			}
			.p1{
				text-align: center;
			}
			.d1{
				background-color: red;
				/* font-size: 0; */
				/* line-height: 0; */
				/*font-size: 0;*/
				/*line-height: 0px;*/
			}
			img{
				/* 可以设置宽高 */
				display: block;
				/*当你在用 行内块(行内元素) 去撑起外部盒子高度的 时候 ,会出现空白节点*/
			}
		</style>
	</head>
	<body>
	 <!-- class命名不是很规范 -->
	<div class="d0">
		<h1>
			男篮中澳赛名单:郭艾伦归队&nbsp;&nbsp;澳洲6名主力出战
		</h1>
		<p class="p1">
			<span class="span1">2017年6月28日19:12</span>
			<span class="span2">
			新浪体育 评论中大奖 ( 11人参与 )
			</span>
			<a class="a1" href="#">收藏本文</a>
			<input class="input1" type="text" value="请输入查询条件">
			<input class="input2" type="submit" value="搜索">
		</p>
		<hr>
			<img src="img/avatar.jpg" alt="">

		<p class="p2">
			由中国篮协主办/中国之队商务运营方盈方公司<a class="a2" href="#">[微博]</a>作为推广单位的中澳国际男篮对抗赛开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了开始了.获得更多防火隔离带返回很多顾客的防火隔离带风急浪高的法律规范的两个dng.fdg
		</p>
	</div>
	</body>
</html>
Guess you like
