timmy / Streamlit 嵌入 HTML
0 beğeniler
0 çatallar
2 dosyalar
Son aktivite 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 HTML、CSS 和 JavaScript，允許自訂 UI 元素、樣式和互動功能，使 Web 應用更具靈活性和可視化效果。
| 1 | import streamlit as st |
| 2 | |
| 3 | st.title("嵌入 HTML 的範例") |
| 4 | |
| 5 | html_code = """ |
| 6 | <div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;"> |
| 7 | <h2 style="color: #4CAF50;">這是一個 HTML 區塊</h2> |
| 8 | <p>你可以在這裡嵌入 HTML, CSS, 甚至 JavaScript。</p> |
| 9 | <button onclick="alert('Hello, Streamlit!')">點擊我</button> |
| 10 | </div> |
timmy / 增強版頁面內導航與動畫效果
0 beğeniler
0 çatallar
1 dosyalar
Son aktivite 10 months ago
這是一個帶有固定導航欄的 HTML 範例，實現了頁面內導航、滾動高亮導航連結、區塊進入視窗時的動畫效果，以及返回頂部按鈕功能，並使用 JavaScript 自訂平滑滾動效果增強用戶體驗。
| 1 | <!DOCTYPE html> |
| 2 | <html lang="zh-Hant"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <title>增強版頁面內導航範例</title> |
| 6 | <style> |
| 7 | body { |
| 8 | font-family: Arial, sans-serif; |
| 9 | /* 移除 CSS 平滑滾動，使用 JavaScript 控制 */ |
| 10 | margin: 0; |
Daha yeni
Daha eski