2023年9月16日

原创

天线_m 2023-09-16 23:09:07 博主文章分类：HTML界面 ©著作权

文章标签 html css HTML 排版 文章分类 Html/CSS 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者天线_m的原创作品，请联系作者获取转载授权，否则将追究法律责任

效果

2023年9月16日_排版

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>2023年9月16日</title>
		<link rel="stylesheet" href="./css/index_style.css">
	</head>
	<body>
		<div id="top">
			<div class="dc">头部区域</div>
		</div>
		<div id="main">
			<div class="mdc3">
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
				<div class="ct">
					<p></p>
					<span>test</span>
				</div>
			</div>
			<div class="mdc1">
				<div class="dcL"></div>
				<div class="dcR">
				</div>
			</div>
			
			<div class="mdc2">
				<div>
					<h3>标题</h3>
					<span>2023年9月16日</span>
					<p>内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					</p>
				</div>
				<div>
					<h3>标题</h3>
					<span>2023年9月16日</span>
					<p>内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					内容内容内容内容内容
					</p>
				</div>
					<div>
						<h3>标题</h3>
						<span>2023年9月16日</span>
						<p>内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						</p>
					</div>
					<div>
						<h3>标题</h3>
						<span>2023年9月16日</span>
						<p>内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						内容内容内容内容内容
						</p>
					</div>
			</div>
		</div>
	</body>
</html>

CSS

#top{
	width: 100%;
	height: 60px;
	background-color: white;
	border-bottom: 1px solid red;
}
#top > div.dc{
	width: 1200px;
	height: 60px;
	margin: 0 auto;
	background-color: black;
	color: white;
	text-align: center;
	line-height: 60px;
}

*{
	margin: 0;
	padding: 0;
}

#main{
	width: 1200px;
	/* background-color: #ababab; */
	margin: 30px auto;
}
#main > div.mdc1{
	width: 1200px;
	height: 300px;
	background-color: blue;
	overflow: hidden;
	margin: 30px 0;
}
#main > div.mdc1 > div.dcL{
	width: 1000px;
	height: 300px;
	background-color: skyblue;
	float: left;
}
#main > div.mdc1 > div.dcR{
	width: 200px;
	height: 300px;
	background-color: #ff5500;
	float: right;
}
#main > div.mdc2{
	width: 700px;
	background-color: aqua;
	padding: 50px;
}
#main > div.mdc2 > div > p{
	margin: 10px;
	text-indent: 2em;
}
#main > div.mdc3{
	width: 1200px;
	/* background-color: red; */
	overflow: hidden;
}
body{
	background-color: #f7f7f7;
}
#main > div.mdc3 > div.ct{
	width: 300px;
	height: 180px;
	/* background-color: orange; */
	border-radius: 10px;
	padding-top: 20px;
	text-align: center;
	float: left;
}
#main > div.mdc3 > div.ct:hover{
	background-color: #d8d8d8;
	color: white;
}
#main > div.mdc3 > div.ct > p{
	width: 260px;
	height: 130px;
	background-color: yellow;
	margin: 0 auto 6px;
	border-radius: 10px;
}

仅供学习，参考使用，可一起交流，前进！前进！前进！