timmy / 使用 Lit 與 Tailwind CSS 建立自訂 Web 元件
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML 結合 Lit 和 Tailwind CSS，建立了一個 自訂 Web Component <beach-house-card>，用於顯示 海灘別墅的資訊卡片。它包含 標題、房屋圖片集、評價、地點、描述與按鈕，適用於 房屋租賃平台、旅遊網站或 Airbnb 風格的 UI，並支援 響應式設計與深色模式。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | <title>Beach House Card</title> |
| 7 | <!-- 引入 Tailwind CSS --> |
| 8 | <script src="https://cdn.tailwindcss.com"></script> |
| 9 | <!-- 引入 Lit --> |
| 10 | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> |
timmy / 使用 Lit 建立互動式年份時間軸
0 Favoriten
0 Forks
1 Dateien
Zuletzt aktiv 10 months ago
這段 HTML + Lit 程式碼使用 Web Components 技術，建立了一個 年份時間軸 (<timeline-element>)，用於 以視覺化方式顯示歷史事件或時間序列。它包含 多個事件 (<event-element>)，每個事件都有標題和描述，並根據奇偶數自動 排列在時間軸的左右兩側。此時間軸支援 動態效果（懸停陰影、點擊事件），並針對 手機響應式調整顯示方式，適用於 歷史紀錄、產品發展時間軸、事件展示 等場景，提供 互動性高、現代化的時間軸視覺呈現。
| 1 | <!doctype html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>年份時間軸 - Lit 元素</title> |
| 7 | <style> |
| 8 | body { |
| 9 | font-family: "Microsoft JhengHei", Arial, sans-serif; |
| 10 | background-color: #f0f0f0; |
Neuer
Älter