Tailwind CSS 实战：基于 Kooboo 构建个人博客页面

在现代 web 开发中，Tailwind CSS 作为一款实用优先的 CSS 框架，能让开发者迅速搭建出具有良好视觉效果的页面；Kooboo 则是一个强大的快速开发平台，提供了便捷的页面管理和数据处理功能。本文将详细介绍如何结合 Tailwind CSS 和 Kooboo 构建个人博客模块。

1. 创建布局

在 Kooboo 平台 中，新建站点 ->  控制面板 -> 进入 “布局” 管理界面，点击 “新建布局” 按钮。创建以下几个布局文件：首页（index.html）、文章列表页（articles ）、文章详情页（article_detail.html）、关于我们页（about.html）.【源码看文章后半段】

2. 添加布局页面

    每个页面的代码独立，开发者能快速定位到对应页面的 HTML、CSS 和 JavaScript 相关代码。如：修改文章详情页的样式，直接找到 article_detail.html 即可，无需在大量混合代码中查找。

3. 页面源码

 3.1 index.html (首页)

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人博客 - 首页</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head><body class="bg-gray-100"><!-- 导航栏 --><nav class="bg-gray-800 text-white py-4 fixed top-0 left-0 right-0 z-50"><div class="container mx-auto px-4 flex justify-between items-center"><a href="index.html" class="text-2xl font-bold">个人博客</a><div class="space-x-4 hidden md:flex"><a href="index.html" class="hover:text-gray-300">首页</a><a href="articles.html" class="hover:text-gray-300">文章列表</a><a href="about.html" class="hover:text-gray-300">关于我们</a></div><button id="mobile-menu-button" class="md:hidden focus:outline-none"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg></button></div><div id="mobile-menu" class="md:hidden bg-gray-800 absolute top-full left-0 right-0 py-4 hidden"><a href="index.html" class="block py-2 px-4 hover:bg-gray-700">首页</a><a href="articles.html" class="block py-2 px-4 hover:bg-gray-700">文章列表</a><a href="about.html" class="block py-2 px-4 hover:bg-gray-700">关于我们</a></div></nav><!-- 英雄区域 --><section class="bg-gray-800 text-white py-32 mt-16"><div class="container mx-auto px-4 text-center"><h1 class="text-4xl font-bold mb-4">欢迎来到我的博客</h1><p class="text-lg mb-8">在这里，我将分享我的知识和经验。</p><a href="articles.html" class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md">查看文章</a></div></section><!-- 页脚 --><footer class="bg-gray-800 text-white py-8"><div class="container mx-auto px-4 text-center"><p>&copy; 2025 个人博客版权所有</p><div class="mt-2 space-x-4"><a href="#" class="hover:text-gray-300"><i class="fab fa-facebook-f"></i></a><a href="#" class="hover:text-gray-300"><i class="fab fa-twitter"></i></a><a href="#" class="hover:text-gray-300"><i class="fab fa-instagram"></i></a></div></div></footer><script>const mobileMenuButton = document.getElementById('mobile-menu-button');const mobileMenu = document.getElementById('mobile-menu');mobileMenuButton.addEventListener('click', () => {mobileMenu.classList.toggle('hidden');});</script>
</body></html>

代码解释：

  • 头部（<head>）：

    • meta charset="UTF-8"：规定了网页的字符编码为 UTF - 8，避免出现乱码问题。
    • meta name="viewport"：确保网页在不同设备上能正确显示，width=device-width 让页面宽度与设备宽度一致，initial - scale = 1.0 则设置初始缩放比例为 1。
    • title：设置网页的标题，会显示在浏览器的标签栏上。
    • script 标签：引入 Tailwind CSS 的 CDN 链接，使得可以使用 Tailwind 的实用类来设计样式。
    • link 标签：引入 Font Awesome 图标库，方便在页面中使用各种图标。

  • 导航栏（<nav>）：

    • 采用 bg-gray-800 类设置背景颜色为深灰色，text-white 类设置文字颜色为白色。
    • fixed 类让导航栏固定在页面顶部，z - 50 类确保导航栏处于较高的层级，不会被其他元素遮挡。
    • 借助 hidden md:flex 和 md:hidden 类实现响应式设计，在小屏幕设备上隐藏桌面菜单，显示移动端菜单按钮。
    • JavaScript 代码实现了移动端菜单的展开和收起功能，点击菜单按钮时切换 hidden 类来控制菜单的显示状态。

  • 英雄区域（<section>）：

    • 同样使用 bg-gray-800 和 text-white 类设置背景和文字颜色。
    • py-32 和 mt-16 类分别设置垂直内边距和顶部外边距，让英雄区域更加突出。
    • 包含标题、描述和一个 “查看文章” 的按钮，按钮点击后会跳转到文章列表页。

  • 页脚（<footer>）：

    • 背景和文字颜色与导航栏一致，营造统一的视觉效果。
    • 包含版权信息和社交链接图标，点击图标可跳转到相应的社交页面（这里 # 为占位符）。

3.2 articles.html（文章列表页）article-detail.html（文章详情页）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人博客 - 文章列表</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head><body class="bg-gray-100"><!-- 导航栏 --><nav class="bg-gray-800 text-white py-4 fixed top-0 left-0 right-0 z-50"><!-- 导航栏内容与 index.html 相同 --></nav><!-- 文章列表 --><main class="container mx-auto px-4 py-8 pt-20"><div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"><!-- 文章卡片示例 --><div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow"><img src="https://picsum.photos/200/150" alt="文章配图" class="w-full h-48 object-cover mb-4"><h2 class="text-xl font-bold mb-2">文章标题 1</h2><p class="text-gray-600 mb-4">这是文章的摘要内容，简单介绍文章的大致主题。</p><p class="text-sm text-gray-500">发布时间：2025-04-23</p><a href="article-detail.html" class="text-blue-500 hover:underline">阅读全文</a></div><div class="bg-white p-6 rounded-lg shadow hover:shadow-xl transition-shadow"><!-- 另一篇文章卡片 --></div><!-- 可添加更多文章卡片 --></div></main><!-- 分页 --><div class="container mx-auto px-4 py-4 flex justify-center"><a href="#" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-l-md">上一页</a><a href="#" class="bg-gray-300 text-gray-700 py-2 px-4">1</a><a href="#" class="bg-gray-300 text-gray-700 py-2 px-4">2</a><a href="#" class="bg-gray-300 text-gray-700 py-2 px-4 rounded-r-md">下一页</a></div><!-- 页脚 --><footer class="bg-gray-800 text-white py-8"><!-- 页脚内容与 index.html 相同 --></footer><script>const mobileMenuButton = document.getElementById('mobile-menu-button');const mobileMenu = document.getElementById('mobile-menu');mobileMenuButton.addEventListener('click', () => {mobileMenu.classList.toggle('hidden');});</script>
</body></html>
代码解释

  • 导航栏和页脚：与 index.html 中的导航栏和页脚代码相同，实现了统一的页面布局和导航功能。

  • 文章列表（<main>）：

    • grid 类创建了一个网格布局，grid - cols - 1 md:grid - cols - 2 lg:grid - cols - 3 类根据不同的屏幕尺寸调整列数，在小屏幕上显示 1 列，中等屏幕显示 2 列，大屏幕显示 3 列。
    • gap - 6 类设置网格项之间的间距为 6 个单位。
    • 每篇文章使用一个 <div> 元素作为卡片，包含文章配图、标题、摘要、发布时间和 “阅读全文” 链接。
    • hover:shadow-xl 和 transition-shadow 类为文章卡片添加了鼠标悬停时的阴影效果，增强了交互性。

  • 分页（<div>）：

    • 使用 flex 和 justify - center 类将分页链接居中显示。
    • 包含 “上一页”、页码和 “下一页” 链接，点击链接可切换文章页面（这里 # 为占位符）。

3.3 article-detail.html（文章详情页） 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人博客 - 文章详情</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head><body class="bg-gray-100"><!-- 导航栏 --><nav class="bg-gray-800 text-white py-4 fixed top-0 left-0 right-0 z-50"><!-- 导航栏内容与 index.html 相同 --></nav><!-- 文章详情 --><article class="container mx-auto px-4 py-8 pt-20"><h1 class="text-4xl font-bold mb-4">文章标题</h1><p class="text-sm text-gray-500">发布时间：2025-04-23</p><img src="https://picsum.photos/800/400" alt="文章大图" class="w-full h-auto object-cover mb-4"><div class="mt-8 text-gray-700 leading-relaxed"><p>这是文章的详细内容，你可以在这里分享更多的知识和经验。</p><p>继续详细阐述文章的主题，提供更多的细节和分析。</p></div></article><!-- 页脚 --><footer class="bg-gray-800 text-white py-8"><!-- 页脚内容与 index.html 相同 --></footer><script>const mobileMenuButton = document.getElementById('mobile-menu-button');const mobileMenu = document.getElementById('mobile-menu');mobileMenuButton.addEventListener('click', () => {mobileMenu.classList.toggle('hidden');});</script>
</body></html>

 代码解释：

  • 导航栏和页脚：与其他页面保持一致，提供统一的导航和页脚信息。

  • 文章详情（<article>）：

    • 包含文章标题、发布时间、大图和详细内容。
    • text-4xl 和 font-bold 类设置标题的字体大小和加粗效果。
    • text-sm 和 text-gray-500 类设置发布时间的字体大小和颜色。
    • 图片使用 w-full 和 h-auto 类确保图片宽度自适应，高度按比例缩放。
    • 文章内容使用 text-gray-700 和 leading-relaxed 类设置文字颜色和行高，提高可读性。

 3.4 about.html（关于我们页）

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人博客 - 关于我们</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head><body class="bg-gray-100"><!-- 导航栏 --><nav class="bg-gray-800 text-white py-4 fixed top-0 left-0 right-0 z-50"><!-- 导航栏内容与 index.html 相同 --></nav><!-- 关于我们内容 --><section class="container mx-auto px-4 py-8 pt-20"><h1 class="text-4xl font-bold mb-4">关于我们</h1><p class="text-gray-700 leading-relaxed">这里是关于我们的介绍，你可以在这里分享博客的背景、目标和团队信息等。我们致力于为用户提供有价值的知识和经验分享，希望能够帮助到更多的人。</p></section><!-- 页脚 --><footer class="bg-gray-800 text-white py-8"><!-- 页脚内容与 index.html 相同 --></footer><script>const mobileMenuButton = document.getElementById('mobile-menu-button');const mobileMenu = document.getElementById('mobile-menu');mobileMenuButton.addEventListener('click', () => {mobileMenu.classList.toggle('hidden');});</script>
</body></html>

 代码解释：

  • 导航栏和页脚：与其他页面相同，保证了页面的一致性。

  • 关于我们内容（<section>）：

    • 包含一个标题和一段描述性文字，介绍博客的背景、目标和团队信息等。
    • text-4xl 和 font-bold 类设置标题的样式，text-gray-700 和 leading-relaxed 类设置文字的颜色和行高，使内容易于阅读。

总结：

        这 4 个 HTML 文件构成了一个简单的个人博客系统，通过 Tailwind CSS 实现了响应式设计和美观的界面效果。每个页面都有统一的导航栏和页脚，方便用户在不同页面之间切换。文章列表页使用网格布局展示文章卡片，文章详情页显示文章的详细内容，关于我们页介绍博客的相关信息。同时，通过 JavaScript 实现了移动端菜单的交互功能。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/77317.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

嵌入式面试核心考点：从 C 语言基础到芯片资源深度剖析

嵌入式面试核心考点：从 C 语言基础到芯片资源深度剖析

嵌入式系统开发涉及知识面广&#xff0c;面试题常涵盖 C 语言基础、Linux 操作、内存管理、通信协议等。本文针对常见面试题&#xff0c;逐题解析&#xff0c;助力新手系统掌握核心知识点。 1. 用预处理指令交换两个参数的值 在 C 语言中&#xff0c;我们可以利用预处理指令 …
阅读更多...
Java 程序运行和类路径处理

Java 程序运行和类路径处理

PS D:\java_test> java .\java\Dog 错误: 找不到或无法加载主类 .\java\Dog 原因: java.lang.ClassNotFoundException: /\java\DogJava 程序运行和类路径处理 问题描述 在运行 Java 程序时&#xff0c;可能会遇到 ClassNotFoundException 错误&#xff0c;这是因为 Java 虚…
阅读更多...
测试OMS(订单管理系统)时，对Elasticsearch(ES)数据和算法数据进行测试（如何测试几百万条数据）

测试OMS(订单管理系统)时，对Elasticsearch(ES)数据和算法数据进行测试（如何测试几百万条数据）

1. 测试目标 在测试OMS中的ES数据和算法数据时&#xff0c;主要目标包括&#xff1a; 数据完整性 数据完整性&#xff1a;确保所有需要的数据都被正确采集、存储和索引。 数据准确性&#xff1a;确保数据内容正确无误&#xff0c;符合业务逻辑。 性能&#xff1a;确保系统在处…
阅读更多...
19.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--当前项目拆分规划

19.【.NET 8 实战--孢子记账--从单体到微服务--转向微服务】--单体转微服务--当前项目拆分规划

随着业务规模的不断扩大和系统复杂度的提升&#xff0c;孢子记账系统需要进行微服务架构的转型。本文将详细规划从单体应用向微服务架构迁移的具体方案&#xff0c;包括功能模块分析、服务拆分、技术选型以及实施步骤等内容。通过合理的服务拆分和架构设计&#xff0c;未来我们…
阅读更多...
Eigen稀疏矩阵类 (SparseMatrix)

Eigen稀疏矩阵类 (SparseMatrix)

1. SparseMatrix 核心属性与初始化 模板参数 cpp SparseMatrix<Scalar, Options, StorageIndex> Scalar&#xff1a;数据类型&#xff08;如 double, float&#xff09;。 Options&#xff1a;存储格式&#xff08;默认 ColMajor&#xff0c;可选 RowMajor&#xff0…
阅读更多...
如何监控和分析MySQL数据库的性能？

如何监控和分析MySQL数据库的性能？

文章目录 前言1.环境配置2. 使用 MySQL 自带工具SHOW STATUS 命令SHOW PROCESSLIST 命令EXPLAIN 命令 3. 开启慢查询日志操作步骤 4. 使用第三方监控工具MySQL Enterprise MonitorPercona ToolkitNagiosZabbix 5. 分析系统资源使用情况工具及方法 前言 要监控和分析 MySQL 数据…
阅读更多...
高中数学联赛模拟试题精选第17套几何题

高中数学联赛模拟试题精选第17套几何题

在四边形 A B C D ABCD ABCD 中, A B A D AB AD ABAD, B C ⊥ A B BC \perp AB BC⊥AB, ∠ D C B \angle DCB ∠DCB 的平分线与 A B AB AB 交于 E E E, 过点 A A A 且垂直于 C D CD CD 的直线与 D E DE DE 交于 F F F, M M M 是 B D BD BD 的中点. 求证: F M ∥…
阅读更多...
ZYNQ笔记（十三）：双核 AMP 通信实验

ZYNQ笔记（十三）：双核 AMP 通信实验

版本&#xff1a;Vivado2020.2&#xff08;Vitis&#xff09; ZYNQ 裸机双核 AMP 实验&#xff1a; CPU0 接收串口的数据&#xff0c;并写入 OCM 中&#xff0c;然后利用软件产生中断触发 CPU1&#xff1b;CPU1 接收到中断后&#xff0c;根据从 OCM 中读出的数据控制呼吸灯的频…
阅读更多...
桌面端开发技术栈选型：开启高效开发之旅

桌面端开发技术栈选型：开启高效开发之旅

在数字化浪潮中&#xff0c;桌面端应用依然占据重要地位&#xff0c;而选择合适的技术栈是打造优质桌面端应用的关键一步。以下是多种主流桌面端开发技术栈的介绍与对比&#xff0c;希望能为大家提供有价值的参考。 基于 Web 技术的跨平台框架 • Electron&#xff1a; • 特…
阅读更多...
C++ 的 输入输出流（I/O Streams）

C++ 的 输入输出流（I/O Streams）

什么是输入输出流 C 的输入输出操作是通过 流&#xff08;stream&#xff09; 机制实现的。 流——就是数据的流动通道&#xff0c;比如&#xff1a; 输入流&#xff1a;从设备&#xff08;如键盘、文件&#xff09;读取数据 → 程序 输出流&#xff1a;程序将数据写入设备&…
阅读更多...
软件测评中心如何保障软件质量与安全性？

软件测评中心如何保障软件质量与安全性？

软件测评中心是一个专注于保障软件质量、稳定性和安全性的专业机构。在整个软件的生命周期中&#xff0c;它扮演着极其关键的角色。它运用科学的方法和严格的准则&#xff0c;对软件进行全面而细致的检测和评估&#xff0c;确保用户获得可靠的保障。 测评核心工作 软件测评中…
阅读更多...
论人际关系发展的阶段

论人际关系发展的阶段

朋友关系的建立和发展是一个渐进的过程&#xff0c;通常需要经历情感积累、信任磨合和价值观融合等阶段。以下是朋友关系发展的详细阶段划分及核心特征&#xff1a; 一、表层接触阶段&#xff08;社交试探期&#xff09; 核心特征&#xff1a;以信息交换为主&#xff0c;关系停…
阅读更多...
网络IP冲突的成因与解决方案

网络IP冲突的成因与解决方案

网络IP冲突的成因与解决方案 一、IP冲突的常见现象与危害二、IP冲突的常见原因三、6种实用解决方案四、预防IP冲突的4个最佳实践五、总结 前言 肝文不易&#xff0c;点个免费的赞和关注&#xff0c;有错误的地方请指出&#xff0c;看个人主页有惊喜。 作者&#xff1a;神的孩子…
阅读更多...
前端节流、防抖函数

前端节流、防抖函数

节流 什么是节流&#xff1f; 节流就是同一个事件 一秒钟他执行了很多次。但是我不想他执行这么多次&#xff0c;我只想让他执行一次 或者两次。 那该怎么办&#xff1f; why baby why 那我想就是他执行的时候 我就设置一个定时器&#xff0c;如果定时器是空的&#xff0c;等会…
阅读更多...
LeetCode第171题_Excel表列序号

LeetCode第171题_Excel表列序号

LeetCode 第171题&#xff1a;Excel表列序号 题目描述 给你一个字符串 columnTitle&#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号。 例如&#xff1a; A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ...难度 简单 题目链…
阅读更多...
基于YOLO与PySide6的道路缺陷检测系统（源码）

基于YOLO与PySide6的道路缺陷检测系统（源码）

道路基础设施的健康状况直接影响交通安全与城市运营效率。传统人工巡检方式存在效率低、覆盖范围有限等问题，而基于深度学习的自动化检测技术为道路缺陷识别提供了创新解决方案。本文介绍一个结合YOLO目标检测模型与PySide6图形界面的道路塌陷检测系统，实现了高效、可视化的缺…
阅读更多...
04_jQuery

04_jQuery

文章目录 一、jQuery介绍1.1、jQuery概述1.2、jQuery特点1.3 为什么要用jQuery 二、引入jQuery2.1、直接引入2.2、CDN引入 三、jQuery语法3.1、基本使用3.2、jQuery事件及常用事件方法3.3、jQuery选择器&#xff08;重点&#xff09;3.3.1、基本选择器3.3.2、层次选择器3.3.3、…
阅读更多...
Adruino：传感器及步进电机

Adruino：传感器及步进电机

一、传感器* 1、温湿度传感器 DHT11它采用专用的数字采集技术和温湿度传感器技术&#xff0c;包括一个电阻式感湿元件和NTC测温元件&#xff0c;并与一个高性能的8位单片机连接。DATA端采用串行接口&#xff08;单线双向&#xff09;与微控制器进行同步和通信。 DHT11的供电电…
阅读更多...
高中数学联赛模拟试题精选第18套几何题

高中数学联赛模拟试题精选第18套几何题

在 △ A B C \triangle ABC △ABC 中, A B < A C AB< AC AB<AC, 点 K K K, L L L, M M M 分别是边 B C BC BC, C A C A CA, A B AB AB 的中点. △ A B C \triangle ABC △ABC 的内切圆圆心为 I I I, 且与边 B C BC BC 相切于点 D D D. 直线 l l l 经过线段…
阅读更多...
ubantu18.04（Hadoop3.1.3）之Spark安装和编程实践

ubantu18.04（Hadoop3.1.3）之Spark安装和编程实践

说明&#xff1a;本文图片较多&#xff0c;耐心等待加载。&#xff08;建议用电脑&#xff09; 注意所有打开的文件都要记得保存。 第一步&#xff1a;准备工作 本文是在之前Hadoop搭建完集群环境后继续进行的&#xff0c;因此需要读者完成我之前教程的所有操作。 以下所有操…
阅读更多...
最新文章

Copyright @ 2022~2023