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.pswp.cn/web/77317.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/77317.shtml
英文地址，請注明出處：http://en.pswp.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