最新的Web開發教程
 

W3.CSS例子

×


W3.CSS集裝箱

基本的容器
容器的顏色
容器頭部
集裝箱頁腳
集裝箱文章和部分
集裝箱筆記
容器板
集裝箱報價
容器<div>元素
容器語義元素
集裝箱填充
容器標題和段落
集裝箱切片
隱藏/關閉集裝箱
顯示/開口容器

舉例說明


W3.CSS國界

國界
顯示票據
顯示面板
顯示行情
顯示hoverable邊界
顯示HTML代碼
顯示CSS代碼
顯示JavaScript代碼

舉例說明


W3.CSS工具/助手

填充各方
水平填充
垂直填充
保證金公用事業
漿紗事業
公用事業四捨五入
公用事業圈
公用事業中心
浮動公用事業
顯示/隱藏公用事業

舉例說明


W3.CSS按鈕

基本按鈕
按鈕顏色
哈弗顏色
按鈕的形狀
按鈕大小
按鈕邊框
與文字效果按鈕
與陰影效果的按鈕
與苗條和寬文本效果按鈕
全寬按鈕
禁用的按鈕
按鈕組
有漣漪效應按鈕
浮動按鈕(圓形)
大型浮式按鈕

舉例說明


W3.CSS卡

基本卡
彩色卡片
照片卡
卡片內容
Hoverable卡
阿凡達卡按鈕
阿凡達卡全寬按鈕

舉例說明


W3.CSS警報

基本警報
可關閉警報
圓角警報
警示牌

舉例說明


W3.CSS表

基本表
邊框的表格(水平分隔)
條紋表
鑲上條紋表
周圍的表格邊框
翻轉條紋
表用彩色標題
表顏色
Hoverable表(灰色)
具體hoverable色表
桌牌
響應表
小桌子
小桌子
大表
XLARGE表
XXLarge表
XXXLarge表
巨型表

舉例說明


W3.CSS列表

基本列表
鑲上名單
表頭
清單卡
中心名單
彩色列表
彩色列表項
Hoverable列表(灰色)
具體hoverable列表顏色
可關閉的名單
加厚名單
頭像列表
微小的列表
小清單
大名單
XLARGE名單
XXLarge名單
XXXLarge名單
巨型名單

舉例說明


W3.CSS圖片

圓形圖像
盤旋形象
邊距圖像
Hoverable圖像
圖像卡
圖像文本
相片集

舉例說明


W3.CSS輸入

頂級品牌
底部標籤
輸入卡
綠色標籤
驗證標籤的投入
彩色標籤
輸入鑲上
邊框圓角
無邊界輸入
彩色輸入
Hoverable投入
輸入動畫
複選框
單選按鈕
選擇菜單
鑲上選擇菜單
在一個三列的網格形式的元素
兩欄佈局與標籤

舉例說明


W3.CSS徽章

徽章
標籤
與徽章名單
大標籤
大徽章
顯示字母標記

舉例說明


W3.CSS跡象

標籤作為標誌
在一排標籤
路標
大型標誌
大型標誌2
大圓形的標誌
顯示一個標誌

舉例說明


W3.CSS響應

W3的半級
在W3-三等
在W3-twothird類
W3的季度級
在W3-threequarter類
嵌套行(W3半內W3一半)
使用W3-其餘列
使用百分比列
W3的內容類
W3-行和W3-行填充的區別

舉例說明


W3.CSS動畫

熱門動漫
底部動畫
左動畫
右動畫
動畫衰落
衰落無限動畫
縮放動畫
旋轉動畫
所有淡出

舉例說明


W3.CSS下拉框

Hoverable下拉菜單
Hoverable下拉
下拉導航欄中
點擊下拉菜單
圖片下拉
卡下拉
下拉動畫

舉例說明


W3.CSS手風琴

基本手風琴
手風琴按鈕
手風琴活動
手風琴寬度
手風琴鏈接
手風琴卡列表
手風琴和下拉式的sidenav
手風琴動畫

舉例說明


W3.CSS導航

基本的導航(W3-導航欄)
有色導航欄
導航欄鑲上
在導航欄活動鏈接
Hoverable導航欄鏈接
右對齊鏈接
導航欄字體大小
導航欄填充
導航欄的寬度
導航欄圖標
導航欄下拉帶
導航欄有一個活躍的下拉和圖標
導航欄可點擊下拉
頂部導航欄中,
底部導航欄
可折疊導航欄
Topnav
Topnav帶圖標

舉例說明


W3.CSS Sidenav

基本sidenav(總是顯示)
可折疊sidenav
Sidenav隱藏頁面內容的一部分
Sidenav隱藏所有頁面內容
Sidenav內容轉移到右側
Sidenav顏色
鑲上sidenav
底部邊框sidenav(分頻器)
Sidenav卡
Hoverable sidenav鏈路(背景顏色)
Hoverable sidenav鏈接(文本顏色)
Sidenav大小
Sidenav帶圖標(圖標欄)
Sidenav與下拉
Sidenav手風琴
動畫sidenav
Sidenav與疊加效應
Sidenav與內容

舉例說明


W3.CSS標籤

基本選項卡
主動/當前標籤
垂直標籤
動畫標籤內容
分頁圖片庫
在網格標籤

舉例說明


W3.CSS分頁

基本分頁
分頁箭頭
活動分頁鏈接
分頁懸停顏色
分頁大小
分頁鑲上
圓角邊框分頁
分頁中心
下一首/上箭頭分頁
分頁菜單

舉例說明


W3.CSS進度條

基本的進度條
進度條大小
進度條的顏色
圓形進度條
進度條的標籤
動態進度條
以標籤為中心的動態進度條
左對齊的標籤動態進度條
帶有標籤動態進度條放在外面

舉例說明


W3.CSS印刷術

標題
字體大小班
重寫w3.css標準

舉例說明


W3.CSS字體

如何使用字體類
如何使用外部字體
外部谷歌字體:龍蝦
字體效果
字體效應2
改變頁面的字體

舉例說明


W3.CSS圖標

字體真棒圖標
谷歌材料設計圖標
引導圖標

舉例說明


W3.CSS幻燈片

手動播放幻燈片圖片
自動播放幻燈片圖片
自動HTML幻燈片
幻燈片標題
幻燈片指標用數字和上/下一個按鈕
幻燈片指標,圖標和子彈
圖像作為指標
幻燈片動畫
自動幻燈片與無限的衰落

舉例說明


W3.CSS文字效果

文字陰影
文字透明度

舉例說明


W3.CSS模態

基本模式(對話框/彈出窗口)
莫代爾與容器
模卡
動畫模式
淡入模式
模態圖像
莫代爾圖片庫
莫代爾登錄表單
模式選項卡
如何關閉模態

舉例說明


W3.CSS工具提示

內嵌工具提示文本
內嵌提示標籤
一個hoverable圖像之前提示文本
一個hoverable圖像後提示文本
絕對提示
有色提示
圓潤的提示
小提示
大提示

舉例說明


W3.CSS響應電網

流體電網示範
兩個相等的列
兩個不相等的列
三等分列
三個不平等列
六等於列
混合型:手機和筆記本電腦
混合型:手機,平板電腦和筆記本電腦
W3-行和W3-行填充的區別
使用W3-其餘列
使用百分比列

舉例說明