W3.CSS Reference(參考)

2020-12-08 16:30 更新

容器 (Container)分類


定義
w3-container 具有左右 16px 填充的 HTML 容器 嘗試一下 ?
  用作標題 嘗試一下 ?
  用作頁腳 嘗試一下 ?
w3-panel
HTML 容器,其左右邊距為 16px,頂部和底部邊距為 16px 嘗試一下 ?
  用于顯示注釋 嘗試一下 ?
  用于顯示引用 嘗試一下 ?
w3-badge 圓形徽章 嘗試一下 ?
w3-tag
矩形標簽 嘗試一下 ?
w3-ul 無序列表 嘗試一下 ?
w3-display-container
w3-display- class 的容器(啟用元素在容器內的定位) 嘗試一下 ?
w3-block 可用于為任何元素定義全寬的類 嘗試一下 ?
w3-code
代碼容器 嘗試一下 ?
w3-codespan
內聯代碼容器(用于代碼段) 嘗試一下 ?
w3-content
固定大小居中內容的容器 嘗試一下 ?
w3-auto 以響應為中心的內容容器 嘗試一下 ?
w3-stretch 消除左右邊距的類(對于拉伸填充行(w3-row-padding)特別有用) 嘗試一下 ?


表格 (Table)分類

定義
w3-table
HTML 表格的容器
嘗試一下 ?
w3-striped
條紋表 嘗試一下 ?
w3-border
邊框表 嘗試一下 ?
w3-bordered
邊框線 嘗試一下 ?
w3-centered
居中表 嘗試一下 ?
w3-hoverable
懸停表格 嘗試一下 ?
w3-table-all 所有屬性設置 嘗試一下 ?
  使用 w3-striped, w3-border 和 w3-bordered 嘗試一下 ?
  使用 彩色表頭 嘗試一下 ?
  使用 w3-responsive  嘗試一下 ?
  使用 w3-tiny
嘗試一下 ?
  使用 w3-small 嘗試一下 ?
  使用 w3-large
嘗試一下 ?
  使用 w3-xlarge 嘗試一下 ?
  使用 w3-tiny-xxlarge 嘗試一下 ?
  使用 w3-xxxlarge
嘗試一下 ?
  使用 color 嘗試一下 ?
  使用 w3-jumbo
嘗試一下 ?
w3-responsive 創(chuàng)建一個響應表 嘗試一下 ?

卡片(Cards)分類

定義

w3-card 與 w3-card-2一致 嘗試一下 ?
w3-card-2 任何 html 內容的容器(2px 邊框陰影) 嘗試一下 ?
w3-card-4 任何 html 內容的容器(4px 邊框陰影) 嘗試一下 ?

響應式(Responsive)分類


定義

w3-row 一行流體響應式內容的容器 嘗試一下 ?
w3-row-padding 所有列都有默認填充的行 嘗試一下 ?
w3-auto 以響應為中心的內容容器 嘗試一下 ?
w3-stretch 刪除左右邊距的類 嘗試一下 ?
w3-half 二分之一 (1/2) 屏幕容器 嘗試一下 ?
w3-third 三分之一(1/3) 屏幕容器 嘗試一下 ?
w3-twothird 三分之二 (2/3) 屏幕容器 嘗試一下 ?
w3-quarter 四分之一 (1/4) 屏幕容器 嘗試一下 ?
w3-threequarter 四分之三 (3/4) 屏幕容器 嘗試一下 ?
w3-col 任何HTML內容的容器 嘗試一下 ?
w3-rest 占用列寬度的其余部分 嘗試一下 ?
     
l1 - l12 大屏幕的自適應尺寸 嘗試一下 ?
m1 - m12 中屏幕的自適應尺寸 嘗試一下 ?
s1 - s12 小屏幕的自適應尺寸 嘗試一下 ?
   
w3-hide-small 在小屏幕上隱藏內容 (小于 601px) 嘗試一下 ?
w3-hide-medium 在中屏幕上隱藏內容 嘗試一下 ?
w3-hide-large 在大屏幕上隱藏內容 (大于 992px) 嘗試一下 ?
   
w3-image 響應式圖像 嘗試一下 ?
   
w3-mobile 為任何元素添加移動優(yōu)先響應
在移動設備上將元素顯示為塊元素
嘗試一下 ?

布局(Layout)分類


定義
w3-cell-row 布局列(單元格)的容器 嘗試一下 ?
w3-cell 布局列(單元格) 嘗試一下 ?
w3-cell-top 在列(單元格)的頂部對齊內容 嘗試一下 ?
w3-cell-middle 在列(單元格)的垂直中間對齊內容。 嘗試一下 ?
w3-cell-bottom 在列(單元格)的底部對齊內容 嘗試一下 ?

 導航欄標簽(Navigation)分類


定義
w3-bar 水平欄 嘗試一下 ?
w3-bar-block 垂直欄 嘗試一下 ?
w3-bar-item 提供通用的風格 嘗試一下 ?
w3-sidebar 側欄邊 嘗試一下 ?
  側邊欄可以包含所有類型的內容 嘗試一下 ?
  側邊欄可以覆蓋主要內容 嘗試一下 ?
  側邊欄可以覆蓋所有主要內容 嘗試一下 ?
  側邊欄主要內容向右移動 嘗試一下 ?
  側邊欄帶有疊加的背景 嘗試一下 ?
  側邊欄位于右側 嘗試一下 ?
w3-collapse 與 w3-sidebar 一起使用可創(chuàng)建全自動的響應式側面導航。為了使此類工作,頁面內容必須在"w3-main"類之內 嘗試一下 ?
w3-main 使用 w3-collapse 類進行響應式側邊欄時頁面內容的容器 嘗試一下 ?
  全自動右側響應式側邊導航欄 嘗試一下 ?

下拉菜單(Dropdown)分類


定義
w3-dropdown-click 可點擊的下拉元素 嘗試一下 ?
w3-dropdown-hover 懸浮式下拉元素 嘗試一下 ?

可懸停的下拉元素(用于w3-bar) 嘗試一下 ?

可懸停的下拉元素(用于w3-bar-block) 嘗試一下 ?

可懸停的下拉元素(用于w3-sidebar) 嘗試一下 ?

按鈕(Button)分類


定義
w3-button 懸停時帶有灰色背景色的矩形按鈕 嘗試一下 ?
w3-btn 帶有懸停陰影的矩形按鈕 嘗試一下 ?
w3-circle 可用于創(chuàng)建圓形按鈕 嘗試一下 ?
w3-ripple 帶有波紋效果的矩形按鈕 嘗試一下 ?
  具有波紋效果的圓形浮動按鈕 嘗試一下 ?
w3-bar 可用于將水平欄中的元素(如按鈕)分組 嘗試一下 ?
w3-block 該類可用于定義全寬度 w3-button 嘗試一下 ?
  全寬度 w3-btn 嘗試一下 ?
  全寬度圓形按鈕 嘗試一下 ?

表單(Input) 分類


定義
w3-input 輸入元素 嘗試一下 ?
  輸入表格作為卡 嘗試一下 ?
  輸入元素(頂部標簽) 嘗試一下 ?
  輸入元素(底部標簽) 嘗試一下 ?
w3-check 復選框輸入類型 嘗試一下 ?
w3-radio 單選按鈕輸入類型 嘗試一下 ?
w3-select 選擇列表輸入類型 嘗試一下 ?
w3-animate-input 動畫輸入的寬度為100% 嘗試一下 ?

模態(tài)(Modal) 分類


定義
w3-modal 模態(tài)容器 嘗試一下 ?
w3-modal-content 模態(tài)彈出元素 嘗試一下 ?
w3-tooltip 工具提示元素 嘗試一下 ?
w3-text 工具提示文字 嘗試一下 ?

動畫(Animation)分類


定義
w3-animate-top 從頂部-300px到0px對元素進行動畫處理 嘗試一下 ?
w3-animate-left 從左-300px到0px對元素進行動畫處理 嘗試一下 ?
w3-animate-bottom 從底部-300px到0px對元素進行動畫處理 嘗試一下 ?
w3-animate-right 一個從-300px到0px的動畫元素 嘗試一下 ?
w3-animate-opacity 從0到1對元素的不透明度進行動畫處理 嘗試一下 ?
w3-animate-zoom 動畫大小從0到100%的元素 嘗試一下 ?
w3-animate-fading 從0到1和1到0(淡入和淡出)對元素的不透明度進行動畫處理 嘗試一下 ?
w3-spin 將圖標旋轉360度 嘗試一下 ?
  旋轉任何元素360度 嘗試一下 ?
w3-animate-input 將輸入字段的寬度設置為100%的動畫 嘗試一下 ?

字體和文本(Font and Text)分類


定義
w3-tiny 指定字體大小為10像素 嘗試一下 ?
w3-small 指定字體大小為12像素 嘗試一下 ?
w3-large 指定字體大小為18像素 嘗試一下 ?
w3-xlarge 指定字體大小為24像素 嘗試一下 ?
w3-xxlarge 指定字體大小為32像素 嘗試一下 ?
w3-xxxlarge 指定字體大小為48像素 嘗試一下 ?
w3-jumbo 指定字體大小為64像素 嘗試一下 ?
w3-wide 指定了更寬的文本 嘗試一下 ?
w3-serif 將字體更改為 serif 嘗試一下 ?

顯示(display)分類


定義
w3-center 中心內容 嘗試一下 ?
w3-left 將元素浮動到左側(浮動:左側) 嘗試一下 ?
w3-right 將元素浮動到右側(浮動:右側) 嘗試一下 ?
w3-left-align 左對齊文字 嘗試一下 ?
w3-right-align 右對齊文字 嘗試一下 ?
w3-justify 左右對齊的文字 嘗試一下 ?
w3-block 可用于為任何元素定義全寬的類 嘗試一下 ?
w3-circle 圓圈內容 嘗試一下 ?
w3-hide 隱藏的內容(顯示:無) 嘗試一下 ?
w3-show 隱藏的內容(顯示:塊元素) 嘗試一下 ?
w3-show-block  w3-show 的別稱 (顯示:塊元素) 嘗試一下 ?
w3-show-inline-block 以內聯塊顯示內容(顯示:內聯塊) 嘗試一下 ?
w3-top 固定內容位于頁面頂部 嘗試一下 ?
w3-bottom 固定內容位于頁面底部 嘗試一下 ?
w3-display-container 容器為 w3-display-classes (position: relative) 嘗試一下 ?
w3-display-topleft 在 w3-display-container 的左上角顯示內容 嘗試一下 ?
w3-display-topright 在 w3-display-container 的右上角顯示內容 嘗試一下 ?
w3-display-bottomleft 在 w3-display-container 的左下角顯示內容 嘗試一下 ?
w3-display-bottomright 在 w3-display-container 的右下角顯示內容 嘗試一下 ?
w3-display-left 在 w3-display-container 的左側(左中)顯示內容 嘗試一下 ?
w3-display-right 將內容顯示在 w3-display-container 的右側(中間右側) 嘗試一下 ?
w3-display-middle 在w3-display-container的中間(中間)顯示內容 嘗試一下 ?
w3-display-topmiddle 在w3-display-container的中上方顯示內容 嘗試一下 ?
w3-display-bottommiddle 在w3-display-container的底部中間顯示內容 嘗試一下 ?
w3-display-position 在w3-display-container中的指定位置顯示內容 嘗試一下 ?
w3-display-hover 在W3-Display-Container內的懸停上顯示內容 嘗試一下 ?

效果(Effect)分類


定義
w3-opacity 為元素添加不透明度/透明度(不透明度:0.6)
嘗試一下 ?
  為文本添加不透明度/透明度 嘗試一下 ?
w3-opacity-off 關閉不透明度/透明度 (opacity: 1) 嘗試一下 ?
w3-opacity-min 為元素添加不透明度/透明度 (opacity: 0.75) 嘗試一下 ?
w3-opacity-max 為元素添加不透明度/透明度 (opacity: 0.25) 嘗試一下 ?
w3-grayscale-min 向元素添加灰色效果 (grayscale: 50%) 嘗試一下 ?
w3-grayscale 向元素添加灰色效果 (grayscale: 75%) 嘗試一下 ?
w3-grayscale-max 向元素添加灰色效果 (grayscale: 100%) 嘗試一下 ?
w3-sepia-min 為元素添加深褐色效果 (sepia: 50%) 嘗試一下 ?
w3-sepia 為元素添加深褐色效果 (sepia: 75%) 嘗試一下 ?
w3-sepia-max 為元素添加深褐色效果 (sepia: 100%) 嘗試一下 ?
w3-overlay 創(chuàng)建疊加效果 嘗試一下 ?

背景顏色(Background Color)分類


定義
w3-red 背景色紅色 嘗試一下 ?
w3-pink 背景色粉紅色 嘗試一下 ?
w3-purple 背景色紫色 嘗試一下 ?
w3-deep-purple 背景色深紫色 嘗試一下 ?
w3-indigo 背景色靛藍色 嘗試一下 ?
w3-blue 背景色藍色 嘗試一下 ?
w3-light-blue 背景色淺藍色 嘗試一下 ?
w3-cyan 背景色青色 嘗試一下 ?
w3-aqua 背景色亮綠色 嘗試一下 ?
w3-teal 背景色深青色 嘗試一下 ?
w3-green 背景色綠色 嘗試一下 ?
w3-light-green 背景色淺綠色 嘗試一下 ?
w3-lime 背景色石灰色 嘗試一下 ?
w3-sand 背景色砂色 嘗試一下 ?
w3-khaki 背景色卡其色 嘗試一下 ?
w3-yellow 背景色黃色 嘗試一下 ?
w3-amber 背景色琥珀色 嘗試一下 ?
w3-orange 背景色橙色 嘗試一下 ?
w3-deep-orange 背景色深橙色 嘗試一下 ?
w3-blue-grey 背景色藍灰色 嘗試一下 ?
w3-brown 背景色棕色 嘗試一下 ?
w3-light-grey 背景色淺灰色 嘗試一下 ?
w3-grey 背景色灰色 嘗試一下 ?
w3-dark-grey 背景色深灰色 嘗試一下 ?
w3-black 背景色黑色 嘗試一下 ?
w3-pale-red 背景色淡紅色 嘗試一下 ?
w3-pale-yellow 背景色淺黃色 嘗試一下 ?
w3-pale-green 背景色淺綠色 嘗試一下 ?
w3-pale-blue 背景色淡藍色
嘗試一下 ?
w3-transparent 透明背景色  

懸停顏色(Hover Color)分類

上面的顏色也可以用作懸停類:


定義
w3-hover-white 懸停顏色白色 嘗試一下 ?
w3-hover-black 懸停顏色黑色
嘗試一下 ?
w3-hover-red 懸停顏色紅色 嘗試一下 ?
w3-hover-blue 懸停顏色藍色 嘗試一下 ?
w3-hover-green 懸停顏色綠色 嘗試一下 ?
w3-hover-aqua 懸停顏色淺綠色 嘗試一下 ?
w3-hover-orange 懸停顏色橙色 嘗試一下 ?
w3-hover-grey 懸停顏色灰色 嘗試一下 ?
w3-hover-pale-green 懸停顏色淡綠色 嘗試一下 ?

文字顏色(Text Color)分類


定義
w3-text-red 文字顏色為紅色 嘗試一下 ?
w3-text-green 文字顏色為綠色 嘗試一下 ?
w3-text-blue 文字顏色為藍色 嘗試一下 ?
w3-text-yellow 文字顏色為黃色 嘗試一下 ?
w3-text-light-grey 文字顏色為淺灰色 嘗試一下 ?
w3-text-grey 文字顏色為灰色 嘗試一下 ?
w3-text-dark-grey 文字顏色深灰色 嘗試一下 ?
w3-text-black 文字顏色黑色 嘗試一下 ?
w3-text-white 文字顏色白色 嘗試一下 ?
w3-text-pink 文字顏色粉紅色 嘗試一下 ?
w3-text-purple 文字顏色紫色 嘗試一下 ?
w3-text-teal 文字顏色藍綠色 嘗試一下 ?
w3-text-light-green 文字顏色淺綠色
嘗試一下 ?
w3-text-lime 文字顏色石灰 嘗試一下 ?
w3-text-deep-purple 文字顏色深紫色 嘗試一下 ?
w3-text-indigo 文字顏色為靛藍 嘗試一下 ?
w3-text-light-blue 文字顏色淺藍色 嘗試一下 ?
w3-text-blue-grey 文字顏色藍灰色 嘗試一下 ?
w3-text-cyan 文字顏色青色 嘗試一下 ?
w3-text-aqua 文字水藍色 嘗試一下 ?
w3-text-amber 文字顏色為琥珀色 嘗試一下 ?
w3-text-orange 文字顏色橙色 嘗試一下 ?
w3-text-deep-orange 文字顏色深橙色 嘗試一下 ?
w3-text-sand 文字顏色沙色 嘗試一下 ?
w3-text-khaki 文字顏色卡其色 嘗試一下 ?
w3-text-brown 文字顏色棕色 嘗試一下 ?

懸停文字(Hover Text)分類

上面的文本類也可以用作懸停類:

定義
w3-hover-text-red 懸停文字顏色紅色 嘗試一下 ?
w3-hover-text-green 懸停文字顏色為綠色 嘗試一下 ?
w3-hover-text-blue 懸停文字顏色為藍色 嘗試一下 ?
w3-hover-text-yellow 懸停文字顏色黃色 嘗試一下 ?

其他懸停(Other Hover) 分類


定義
w3-hover-border-color 懸浮邊框顏色 嘗試一下 ?
w3-hover-opacity 為懸停的元素添加透明度(不透明度:0.6) 嘗試一下 ?
w3-hover-opacity-off 從懸停的元素中移除透明度(100%不透明度) 嘗試一下 ?
w3-hover-shadow 為懸停的元素添加陰影 嘗試一下 ?
w3-hover-grayscale 為元素添加黑白(100%灰度)效果 嘗試一下 ?
w3-hover-sepia 為懸停的元素添加一個棕褐色效果 嘗試一下 ?
w3-hover-none 從元素中移除懸停效果 嘗試一下 ?



圓角(Round)分類

定義
w3-round 元素圓角 (border-radius) 4px 嘗試一下 ?
w3-round-small 元素圓角 (border-radius) 2px 嘗試一下 ?
w3-round-medium 元素圓角 (border-radius) 4px 嘗試一下 ?
w3-round-large 元素圓角 (border-radius) 8px 嘗試一下 ?
w3-round-xlarge 元素圓角 (border-radius) 16px 嘗試一下 ?
w3-round-xxlarge 元素圓角 (border-radius) 32px 嘗試一下 ?

填充(Padding )分類


定義
w3-padding-small 頂部和底部分別填充4px,左右分別填充8px。 嘗試一下 ?
w3-padding 頂部和底部分別填充8px,左右分別填充16px。 嘗試一下 ?
w3-padding-large 頂部和底部分別填充12px,左側和右側分別填充24px。 嘗試一下 ?
w3-padding-16 頂部和底部填充16px 嘗試一下 ?
w3-padding-24 頂部和底部填充24px 嘗試一下 ?
w3-padding-32 頂部和底部填充32px 嘗試一下 ?
w3-padding-48 頂部和底部填充48px 嘗試一下 ?
w3-padding-64 頂部和底部填充64px 嘗試一下 ?
w3-padding-top-64 頂部填充64px 嘗試一下 ?
w3-padding-top-48 頂部填充48px 嘗試一下 ?
w3-padding-top-32 頂部填充32px 嘗試一下 ?
w3-padding-top-24 頂部填充24px 嘗試一下 ?

邊距(Margin)分類

定義
w3-margin 向元素添加16px的邊距 嘗試一下 ?
w3-margin-top 向元素添加16px的上邊距 嘗試一下 ?
w3-margin-right 向元素添加16px的右邊距 嘗試一下 ?
w3-margin-bottom 向元素添加16px的底邊距 嘗試一下 ?
w3-margin-left 向元素添加16px的左邊距 嘗試一下 ?
w3-section 向元素添加16px的上邊距和下邊距 嘗試一下 ?

邊框(Border) 分類

定義
w3-border 邊框(上,右,下,左) 嘗試一下 ?
w3-border-top 上邊框 嘗試一下 ?
w3-border-right 右邊框 嘗試一下 ?
w3-border-bottom 底邊框 嘗試一下 ?
w3-border-left 左邊框 嘗試一下 ?
w3-border-0 刪除所有邊框 嘗試一下 ?
w3-border-color 以指定的顏色(例如紅色等)顯示所有定義的邊框 嘗試一下 ?
w3-bottombar 向元素添加粗底邊框(條形) 嘗試一下 ?
w3-leftbar 向元素添加粗的左邊框(條形) 嘗試一下 ?
w3-rightbar 向元素添加粗的右邊框(條形) 嘗試一下 ?
w3-topbar 在元素上添加粗邊框(條形) 嘗試一下 ?
w3-hover-border-color 可懸停的邊框顏色 嘗試一下 ?


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號