pura.pro 系統 CSS 預設樣式

today 2023-06-01
visibility 415
這邊提供了一些 pura.pro網站 的 預設樣式
可使用HTML語法 搭配 元件 class 樣式,快速設計元件

對齊

left

center

right

字體大小 f

f8
f9
f10
f11
f12
f14
f15
f16
f20
f22
f24
f36


寬度

w寬度(px)

w50 w100 w150 w200 .... 每間隔50 .... w1000
w100

w500


p寬度(%)

p10 p20 .... 每間隔10 .... p100
p10

p50

p100


顏色

預設顏色

red、orange、yellow、green、blue、purple、gold、white、black、gary 等10個顏色

文字顏色

red

orange

yellow

green

blue

purple

gold

white

black

gary


背景顏色 bg-顏色

bg-red
bg-orange
bg-yellow
bg-green
bg-blue
bg-purple
bg-gold
bg-white
bg-black
bg-gary

混合使用

bg-orange white

bg-green yellow

按鈕 btn 

btn-顏色

按鈕
按鈕
 

btn-顏色-border

按鈕
按鈕

混合使用

按鈕1 按鈕2


分隔線

分隔線

信息框框 msg-顏色

msg-red
msg-orange
msg-yellow
msg-green
msg-blue
msg-purple
msg-gold
msg-white
msg-black
msg-gary


標籤

tag-顏色

tag-red tag-orange tag-yellow tag-green tag-blue tag-purple tag-gold tag-white tag-black tag-gary

tag-顏色-border

tag-red-border tag-orange-border tag-yellow-border tag-green-border tag-blue-border tag-purple-border tag-gold-border tag-white-border tag-black-border tag-gary -border

漸層背景

1.插入 Style 自定義 Class名稱
2.插入div標籤 引入 自定義 class名稱
我有漂亮的漸層背景
可參考 https://siktsui.com/color/gradient

漸層文字 gradient-text 

1.插入 Style 自定義 Class名稱
2.插入b標籤 引入 自定義 class名稱 與 gradient-text 


我是一段漂亮的漸層文字
可參考 https://siktsui.com/color/gradient

圖片文字 也適用 gradient-text 

1.插入 Style 自定義 Class名稱
2.插入b標籤 引入 自定義 class名稱 與 gradient-text 


我是一段圖片底圖的文字