W3.CSS 簡介 (大雜燴)
W3.CSS Colors
w3-color 類受現代營銷、路標和便籤紙中使用的顏色啟發
W3.CSS Containers
w3-container 類是 W3.CSS 類中最重要的。它提供以下等效功能：
- 通用外邊距
- 通用內邊距
- 通用垂直對齊
- 通用水平對齊
- 通用字型
- 通用顏色
w3-container 類通常與 HTML 容器元素一起使用，例如：
<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form> 等。
這是一個標題
本文為淺灰色，文字為棕色。本文為淺灰色，文字為棕色。本文為淺灰色，文字為棕色。本文為淺灰色，文字為棕色。本文為淺灰色，文字為棕色。
這是一個頁尾。
W3.CSS 面板、筆記和引用
w3-panel 類可以顯示各種筆記和引用
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
W3.CSS Alerts
w3-panel 類也可以用於各種警報
危險！
紅色通常表示危險或負面情況。
警告！
黃色通常表示需要注意的警告。
成功！
綠色通常表示成功或積極的事物。
資訊！
藍色通常表示中性的資訊性更改或操作。
W3.CSS Cards
w3-card 類適用於影像和筆記
一輛汽車
汽車是一種帶輪子、自驅動的機動車輛，用於交通運輸。該術語的大多數定義都規定，汽車主要在道路上行駛，可供一至八人乘坐，通常有四個輪子。
（維基百科）
太棒了
法國阿爾卑斯山
示例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿爾卑斯山">
<div class="w3-container w3-center">
<p>法國阿爾卑斯山</p>
</div>
</div>
自己試試 »
W3.CSS Tables
w3-table 類可以處理各種表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | 無聊 | 100 |
W3.CSS Lists
w3-ul 類可以處理各種列表
-
Mike
網頁設計師 -
Jill
支援 -
Jane
會計 -
Jack
顧問
示例
<ul class="w3-ul w3-border">
<li><h2>姓名</h2></li>
<li>吉爾</li>
<li>夏娃</li>
<li>亞當</li>
</ul>
自己試試 »
W3.CSS Buttons
w3-button 和 w3-btn 類提供各種大小和型別的按鈕。
寬按鈕
圓形或方形按鈕
W3.CSS 標籤、標記、徽章和標誌
w3-tag 和 w3-badge 類能夠顯示各種標籤、標記、徽章和標誌
2 8 A B
新 警告 危險 資訊
呼吸
在水下
W3.CSS Responsive
響應式網格 類為所有裝置型別提供響應能力：PC、筆記型電腦、平板電腦和移動裝置。
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
剩餘
1/4
剩餘
100px
45px
剩餘
W3.CSS 還支援一個具有小型、中型和大型類的 12 列移動優先流式網格。
W3.CSS Display
w3-display 類允許您在特定位置顯示 HTML 元素
W3.CSS 模態框
w3-modal 類提供純 HTML 模態對話方塊
模態框影像
W3.CSS Progress Bars
在 W3.CSS 進度條 瞭解更多
W3.CSS Dropdowns
w3-dropdown 類提供下拉選單
W3.CSS Accordions
在 W3.CSS 手風琴選單 瞭解更多
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
帶圖片的摺疊面板
法國阿爾卑斯山
W3.CSS Tabs
選項卡 非常適合單頁 Web 應用程式，或能夠顯示不同主題的網頁。
London
倫敦是英格蘭的首都。
它是英國人口最多的城市，都會區超過 900 萬居民。
巴黎
巴黎是法國的首都。
巴黎地區是歐洲最大的聚居地之一，人口超過 1200 萬。
東京
東京是日本的首都。
它是大東京地區的核心，也是世界上人口最多的都會區。
選項卡式圖片庫（點選其中一張圖片）
W3.CSS Navigation
w3-bar 類可用於建立導航欄
帶輸入的導航欄
帶下拉選單的導航欄
w3-sidebar 類建立側邊導航
W3.CSS Pagination
W3.CSS 提供簡單的 頁面分頁 方法。
幻燈片
W3.CSS 提供 幻燈片 用於迴圈顯示影像或其他內容
燈箱
W3.CSS 動畫
w3-animate 類提供了一種簡單的方法來滑動和淡入元素
W3.CSS Images
在 W3CSS 中對 影像 進行樣式設定很容易
W3.CSS 特效
為任何元素新增特殊的 效果
不透明度
灰度
棕褐色
W3.CSS 輸入表單
w3-input 類用於輸入表單
輸入表單
輸入表單
W3.CSS Filters
使用 W3.CSS 過濾器 可以在列表、表格、下拉選單等中搜索特定元素
| 名稱 | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | 加拿大 |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
使用 W3.CSS，將 字型 新增到網頁非常容易
W3.CSS Tooltips
w3-tooltip 類可以顯示各種工具提示
將滑鼠懸停在此文字上！ 工具提示內容
將滑鼠懸停在此文字上！ 工具提示內容
顏色主題
顏色主題可以輕鬆新增到任何 Web 應用程式中
靛藍主題
電影 2014
-
冰雪奇緣
動畫的反應很荒謬
-
星運裡的錯
感人、 gripping 且製作精良
-
復仇者聯盟
對漫威和迪士尼來說是巨大的成功
主題 青色
電影 2014
-
冰雪奇緣
動畫的反應很荒謬
-
星運裡的錯
感人、 gripping 且製作精良
-
復仇者聯盟
對漫威和迪士尼來說是巨大的成功
顏色主題非常適合移動應用程式。
