HTML+CSS博客文章列表

最新推荐文章于 2024-08-13 20:57:25 发布
最新推荐文章于 2024-08-13 20:57:25 发布
阅读量893 收藏 14
点赞数 36
文章标签： html 前端 css javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w11111xxxl/article/details/140448516
版权

源代码在图片后面 点赞❤️+收藏⭐️+关注💕

图示           感谢各位大佬支持  😘😘😘

419508071af74628b0336cb8517b319c.jpg

源代码

<!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>

睿智的海鸥
关注
  • 36
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
【HTML+CSS】CSS篇章
amethystlmy9的博客
09-02 194
层叠样式表 css语法 1.字体相关样式
HTML+CSS+JS网页设计
热门推荐
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
html+css+javascript搭建个人博客
暴力扬
01-22 3255
html+css+javascript搭建属于自己的个人博客
网页制作基础学习——HTML+CSS常用代码
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
个人博客页面设计（html + css）
05-29
个人博客页面设计（html + css）
个人博客html+css+JavaScript完整代码
05-23
在个人博客中，HTML用于创建文章的主体部分，包括标题（`<h1>`到`<h6>`）、段落（`<p>`）、引用（`<blockquote>`）、列表（`<ul>`、`<ol>`和`<li>`）、链接（`<a>`）以及图片（`<img>`）。此外，HTML5引入了更多语义...
个人博客网站html+css源码
08-22
【个人博客网站html+css源码】是一个专为初学者设计的前端项目，它提供了创建一个个性化博客的基础框架。这个项目的核心是HTML和CSS技术，它们是构建网页内容和样式的基石。HTML（HyperText Markup Language）是网页...
五套十分精美的个人博客模板（html+css+js）
04-11
这些压缩包文件包含的是用于创建个人博客的前端资源，主要基于HTML、CSS和JavaScript技术。以下是这些技术的详细说明以及如何使用这些模板进行个人博客建设的知识点。 **HTML（超文本标记语言）**：HTML是网页的...
html+css+js web博客
12-30
该web博客只有三个静态页面，使用简单的html+css+js完成，在这个页面项目中没有设置数据库和数据传递等一系列操作，绝对适合初学html+css的学生参考学习 在登录界面中，使用的是常用的登录注册滑动效果。 在博客主页...
HTML样式- CSS——WEB开发系列08
一条晒干的咸鱼的博客
08-13 761
HTML 和 CSS 是构建现代网页的基础。HTML（超文本标记语言）负责定义网页的结构，而 CSS（层叠样式表）则用于控制网页的外观和布局。
JS UI库DHTMLX Suite v8.4全新发布——图表、网格组件等API全面升级
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-13 414
本文将为大家介绍强大JavaScript UI库DHTMLX Suite v8.4新功能，欢迎下载新版体验！
salesforce rich text 字段支持html中内嵌JavaScript吗
Debug yourself!
08-13 319
如果你尝试在 Salesforce 的富文本字段中插入 JavaScript，代码会被过滤掉。推荐的方式是在适当的地方使用 Salesforce 支持的 JavaScript 功能，比如自定义按钮、Visualforce 页面或 Lightning 组件，而不是在富文本字段中直接嵌入脚本代码。
html 关于table合并外边框以及自动滚动问题汇总
lfl18326162160的博客
08-13 127
固定高度显示上下滑动。
掌握网络数据的钥匙：Python Requests-HTML库深度解析
AIGC搞起
08-13 408
是一个Python第三方库，它扩展了requests的功能，允许用户获取和操作由JavaScript动态生成的网页内容。它使用pyppeteer作为后端，使得开发者能够以同步的方式处理异步的网页内容。是一个强大的库，它扩展了Python在处理网络请求和动态内容方面的能力。通过本文的介绍，你已经了解了如何安装和使用这个库，以及如何在实际场景中应用它。记住，每个库都有其局限性，合理地使用和调试是成功的关键。希望本文能帮助你更有效地利用库，解锁网络数据的潜力。
css实现太极图
yinge0508的博客
08-13 115
【代码】css实现太极图。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 1682
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
【python】使用字符串格式化渲染html
最新发布
longforone的博客
08-13 327
将 CSS 中的“{}”全部替换为“{{}}”，这种方法是可行的。在 Python 进行字符串格式化时，“{{}}”中的“{}”及其他内容会被当作普通字符串处理，不会被格式化。但当我开启 PyCharm 的代码格式化功能时，原本的“{{}}”会被转换为“{\n{ }\n}”，因此使用起来较为麻烦，甚至不太能用。然而，由于 HTML 模板中存在 CSS 样式，其“{}”语法与 Python 格式化字符串的语法产生了冲突。接着，针对“body”部分使用关键字参数进行字符串格式化，如此一来，看起来也更为直观。
HtmlUnit：探索Web自动化的强大工具
Aaron_945的博客
08-12 642
HtmlUnit 是一个开源的“无头”（headless）浏览器，它模拟了浏览器环境，允许开发者在不需要实际浏览器界面的情况下执行JavaScript、CSS、DOM操作以及HTTP请求。它模拟了浏览器的许多方面，包括DOM操作、CSS选择器、AJAX请求等，使得开发者可以在服务器端或无需图形界面的环境中执行Web应用程序的自动化测试。通过模拟浏览器的行为，HtmlUnit使得开发者能够在无需实际浏览器界面的情况下执行复杂的Web操作。对于AJAX请求，HtmlUnit提供了。
html+css+js博客网站制作
10-04
3. 文章展示：使用HTML来创建文章的结构，可以使用标题、段落、列表等HTML标签来组织文章内容。可以使用CSS来美化文章的样式，如设置字体、行间距、段落缩进等。 4. 交互功能：使用JS来为博客网站添加交互功能，如...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

睿智的海鸥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值