HTML5精粹练习第1章博客

第1章博客

用最新的HTML5标签来联系博客

HTML文件：第1章博客.html

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="这是一个HTML5案例" />
		<meta name="Keywords" content="HTML5,CSS3,JavaScript" />
		<title>博客</title>
		<link rel="stylesheet" href="css/blog.css" />
	</head>
	<body>
		<div id="container">
			<header id="header">
				<img src="img/csdn.png" alt="" />
				<h1>CSDN博客</h1>
			</header>
			<nav>
				<ul>
					<li>最近</li>
					<li>文章</li>
					<li>资源</li>
					<li>视频</li>
				</ul>
			</nav>
			<section>
				<article>
					<a href="#" target=" _blank">
						<div class="img-box">
							<figure>
								<img src="img/map,list,set.png	" alt="" />
								<figcaption>
									<!-- 文章图片 -->
								</figcaption>
							</figure>
						</div>
						<div class="box-content">
							<header>
								<hgroup>
									<h4>并发容器(Map、List、Set)实战及其原理分析</h4>
								</hgroup>
							</header>
							<div class="content">
								Java的<cite>集合</cite>容器框架中，主要有四大类别：List、Set、Queue、Map，
								大家熟知的这些集合类ArrayList、LinkedList。
							</div>
							<footer class="list-footer">
								<span>发布于22小时前</span>·
								<span>970阅读</span>·
								<span>9点赞</span>·
								<span>0评论</span>
							</footer>
						</div>
					</a>
				</article>
				<hr />
				<article>
					<a href="#" target=" _blank">
						<div class="img-box">
							<figure>
								<img src="img/伪类选择器.png" alt="" />
								<figcaption>
									<!-- 文章图片 -->
								</figcaption>
							</figure>
						</div>
						<div class="box-content">
							<header>
								<hgroup>
									<h4>伪类选择器</h4>
								</hgroup>
							</header>
							<div class="content">
								CSS中的伪类选择器就是前面带有冒号(:)的选择器。举例来说，
								伪类选择器:<cite>first-child</cite>和<mark>:last-child</mark>可以分别从父元素中选择第一个和最后一个子元素。
							</div>
							<footer class="list-footer">
								<span>发布博客 前天 11:45 ·</span>
								<span>264阅读 ·</span>
								<span>3点赞 ·</span>
								<span>0评论</span>
							</footer>
						</div>
					</a>
				</article>
			</section>
			<aside>
				<blockquote>文章1</blockquote>
				<blockquote>文章2</blockquote>
			</aside>

			<footer id="footer"><small>Copyright &copy; 2023-2024</small></footer>
		</div>
	</body>
</html>

CSS文件：blog.css

css 复制代码

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style-type: none;
}
#header,nav,section,footer {
	margin: 5px;
	border-radius: 5px;
}
#container {
	width: 1025px;
	height: 830px;
	border: 1px solid;
	margin: 0 auto;
}
#header {
	height: 100px;
	border: 1px solid;
	background-color: lightgrey;
}
#header img {
	display: block;
	float: left;
	width: 100px;
}
#header h1 {
	float: right;
	width: 800px;
	padding-left: 200px;
}
nav {
	height: 60px;
	border: 1px solid;
	clear: both;
}
nav ul {
	text-align: center;
}
nav ul li {
	float: left;
	width: 100px;
	height: 60px;
	line-height: 60px;
}
nav ul li:hover {
	background-color: lightslategrey;
}
aside {
	float: right;
	width: 300px;
	height: 540px;
	border: 1px solid;
	margin: 5px 8px 5px 0;
	border-radius: 5px;
}
section {
	float: right;
	width: 700px;
	height: 540px;
	border: 1px solid;
}

section article {
	height: 145px;
}

section article a {
	color: black;
	text-decoration: none;
	display: flex;
	margin: 0 10px;
	padding: 20px 0;
}
.img-box img{
	width: 178px;
	height: 100px;
	border: 0.5px solid grey;
	border-radius: 5px;
}

.box-content {
	display: flex;
	flex-direction: column;
	width: 470px;
	height: 100px;
	margin-left: 10px;
	justify-content: space-between;
}
.box-content h4:hover {
	color: red;
}

.box-content .content {
	color: #555666;
	overflow: hidden;
	line-height: 19px;
	white-space: normal;
	word-break: break-word;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.list-footer span {
	display: inline-block;
	margin: 0 5px;
	color: #555666;
}
.box-content .list-footer span:first-child {
	margin-left: -5px;
}
#footer {
	height: 100px;
	line-height: 100px;
	border: 1px solid;
	background-color: dimgrey;
	clear: both;
	text-align: center;
}