HTML5精粹练习第1章博客
第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;
}
原文地址：https://blog.csdn.net/qq_36324341/article/details/142312633
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！