第1章博客
用最新的HTML5标签来联系博客
HTML文件：第1章博客.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 © 2023-2024</small></footer></div></body>
</html>CSS文件：blog.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;
}