什麼是 W3.CSS？
現代響應式 CSS
所有瀏覽器平等：Chrome. Firefox Edge. IE. Safari. Opera。
所有裝置平等：桌上型電腦. 筆記型電腦. 平板電腦. 手機。
僅標準 CSS (無 jQuery 或 JavaScript 庫)。
W3.CSS 快速入門
W3.CSS 是一個現代化的 CSS 框架，內建響應式設計。它預設支援響應式移動優先設計，並且比類似的 CSS 框架更小、更快。
W3.CSS 還可以加快和簡化 Web 開發，因為它比其他 CSS 框架更容易學習和使用。
示例
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>我的 W3.CSS 頁面</h1>
<p>調整此頁面大小以檢視響應式效果！</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>倫敦</h2>
<p>倫敦是英格蘭的首都。</p>
<p>它是英國人口最多的城市，</p>
<p>都會區超過 1300 萬居民。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法國的首都。</p>
<p>巴黎地區是歐洲最大的聚居地之一，</p>
<p>人口超過 1200 萬。</p>
</div>
<div class="w3-third">
<h2>東京</h2>
<p>東京是日本的首都。</p>
<p>它是大東京地區的核心，</p>
<p>也是世界上人口最多的都會區。</p>
</div>
</div>
嘗試 W3.CSS » 嘗試 Bootstrap »單擊“Try it Yourself”按鈕檢視其工作原理。
W3.CSS Containers
w3-container 類是 W3.CSS 中最重要的類之一。
它為大多數 HTML 元素提供了正確的邊距、內邊距、對齊方式等。
示例
<div class="w3-container">
<h1>這是一個段落</h1>
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
<p>這是一個段落</p>
</div>
嘗試 W3.CSS » 嘗試 Bootstrap »W3.CSS Colors
w3-color 類靈感來源於現代色彩
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
倫敦是英國人口最多的城市，都會區超過 900 萬居民。
示例
<div class="w3-container w3-indigo">
<p>倫敦是英國人口最多的城市。</p>
</div>
<div class="w3-container w3-blue">
<p>倫敦是英國人口最多的城市。</p>
</div>
<div class="w3-container w3-red">
<p>倫敦是英國人口最多的城市。</p>
</div>
<div class="w3-container w3-amber">
<p>倫敦是英國人口最多的城市。</p>
</div>
嘗試 W3.CSS » 嘗試 Bootstrap »W3.CSS 警告、註釋和引用
w3-panel 類可以顯示各種警告和註釋以及引用
危險！
紅色通常表示危險或負面情況。
警告！
黃色通常表示需要注意的警告。
成功！
綠色通常表示成功或積極的事物。
資訊！
藍色通常表示中性的資訊性更改或操作。
危險！
紅色通常表示危險或負面情況。
警告！
黃色或橙色通常表示需要注意的警告。
成功！
綠色通常表示成功或積極的事物。
資訊！
藍色通常表示中性的資訊性更改或操作。
示例
<div class="w3-panel w3-red">
<h3>危險！</h3>
<p>紅色通常表示危險或負面情況。</p>
</div>
<div class="w3-panel w3-yellow">
<h3>警告！</h3>
<p>黃色或橙色通常表示需要注意的警告。</p>
</div>
嘗試 W3.CSS » 嘗試 Bootstrap »倫敦是英國人口最多的城市，都會區超過 900 萬居民。
示例
<div class="w3-panel w3-light-grey w3-border w3-round-xlarge">
<p>倫敦是英國人口最多的城市，都會區超過 900 萬居民。</p>
</div>
<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
<p>倫敦是英國人口最多的城市，都會區超過 900 萬居民。</p>
</div>
自己動手試一試 »
W3.CSS Cards
w3-card 類適用於圖片和註釋
令人驚歎
法國阿爾卑斯山
一輛汽車
汽車是一種帶有車輪、可自行驅動的機動車，用於交通運輸。該術語的大多數定義都規定，汽車設計用於主要在道路上行駛，可容納一至八人，並且通常有四個車輪。
(維基百科)
John
建築師和工程師
示例
<div class="w3-card-4" style="max-width:300px;">
<img src="img_avatar3.png" alt="頭像" style="width:100%">
<div class="w3-container">
<h4><b>John</b></h4>
<p>建築師和工程師</p>
</div>
</div>
嘗試 W3.CSS » 嘗試 Bootstrap »W3.CSS Tables
w3-table 類可以處理各種表格
| 名字 | 姓氏 | 分數 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
示例
<table class="w3-table w3-bordered w3-striped w3-border">
<thead class="w3-dark-grey">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
嘗試 W3.CSS » 嘗試 Bootstrap »W3.CSS Lists
w3-ul 類可以處理各種列表
-
Mike
網頁設計師 -
Jill
支援 -
Jane
會計 -
Jack
顧問
W3.CSS Buttons
w3-button 和 w3-btn 類提供了各種尺寸和型別的按鈕。
寬按鈕
圓形或方形按鈕
W3.CSS 標籤、標籤頁、徽章和標識
w3-tag 和 w3-badge 類能夠顯示各種型別的標籤、標籤頁、徽章和標識
2 8 A B
New Warning Danger Info
呼吸
在水下
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 且製作精良
-
復仇者聯盟
對漫威和迪士尼來說是巨大的成功
顏色主題非常適合移動應用程式。
完整的 W3.CSS 教程
這只是對 W3.CSS 的簡要介紹。
有關完整的 W3.CSS 教程，請訪問 W3Schools W3.CSS 教程。
有關完整的 W3.CSS 參考，請訪問 W3Schools W3.CSS 參考。
