源代码在图片后面 点赞❤️+收藏⭐️+关注💕
图示 感谢各位大佬支持 😘😘😘
源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>博客文章列表</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
table {
border-collapse: collapse;
width: 80%;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
.category-badge {
display: inline-block;
color: white;
padding: 5px 10px;
margin-right: 5px;
border-radius: 5px;
}
.category-badge.frontend { background-color: orange; }
.category-badge.opensource { background-color: red; }
.category-badge.vue { background-color: blue; }
a {
color: black;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>博客文章名</th>
<th>类别</th>
<th>发布时间</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="blog1.html">文章标题1</a></td>
<td>
<span class="category-badge frontend">前端</span>
<span class="category-badge opensource">开源</span>
<span class="category-badge vue">博客</span>
</td>
<td>2024年1月3日</td>
<td>睿智的海鸥</td>
</tr>
<!-- 重复以下行三次 -->
<tr>
<td><a href="blog1.html">文章标题2</a></td>
<td>
<span class="category-badge frontend">前端</span>
<span class="category-badge opensource">开源</span>
<span class="category-badge vue">博客</span>
</td>
<td>2024年1月3日</td>
<td>睿智的海鸥</td>
</tr>
<tr>
<td><a href="blog1.html">文章标题3</a></td>
<td>
<span class="category-badge frontend">前端</span>
<span class="category-badge opensource">开源</span>
<span class="category-badge vue">博客</span>
</td>
<td>2024年1月3日</td>
<td>睿智的海鸥</td>
</tr>
<tr>
<td><a href="blog1.html">文章标题4</a></td>
<td>
<span class="category-badge frontend">前端</span>
<span class="category-badge opensource">开源</span>
<span class="category-badge vue">博客</span>
</td>
<td>2024年1月3日</td>
<td>睿智的海鸥</td>
</tr>
</tbody>
</table>
</body>
</html>
