W3.CSS 快速指南

上一頁
下一頁

W3.CSS - 概述

什麼是 W3.CSS？

W3.CSS 是由 w3schools.com 開發的層疊樣式表 (CSS)。它有助於建立更快、更美觀、更響應迅速的網站。它受到了 Google Material Design 的啟發。

其一些主要特性如下：

  • 內建響應式設計

  • 標準 CSS

  • 受到 Google Material Design 的啟發

  • 免費使用

響應式設計

  • W3.CSS 具有內建的響應式設計，因此使用 W3.CSS 建立的網站會根據裝置大小重新設計自身。

  • W3.CSS 具有一個 12 列的移動優先流體網格，支援針對小型、大型和中型螢幕尺寸的響應式類。

  • W3.CSS 類以這樣的方式建立，使網站能夠適應任何螢幕尺寸。

  • 使用 W3.CSS 建立的網站與 PC、平板電腦和移動裝置完全相容。

標準 CSS

  • W3.CSS 只使用標準 CSS，非常容易學習。

  • 它不依賴於任何外部 JavaScript 庫，例如 jQuery。

Material Design

  • W3.CSS 受到 Google Material Design 的啟發。

  • 它支援紙張式設計。

  • 它支援陰影和大膽的色彩。

  • 顏色和色調在各種平臺和裝置上保持一致。

最重要的是，它是完全免費使用的。

W3.CSS - 環境搭建

如何使用 W3.CSS？

有兩種方法可以使用 W3.CSS：

  • 本地安裝 - 你可以將 W3.CSS 檔案下載到你的本地機器，並將其包含在你的 HTML 程式碼中。

  • 基於 CDN 的版本 - 你可以直接從內容分發網路 (CDN) 將 W3.CSS 檔案包含到你的 HTML 程式碼中。

本地安裝

示例

現在你可以將css檔案包含在你的HTML檔案中，如下所示：

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

它將產生以下結果：

基於 CDN 的版本

你可以直接從內容分發網路 (CDN) 將 W3.CSS 檔案包含到你的 HTML 程式碼中。W3Schools.com 提供最新版本的內容。

注意 - 在本教程中，我們始終使用 W3Schools.com CDN 版本的庫。

示例

現在讓我們使用來自 W3Schools.com CDN 的 jQuery 庫重寫上面的示例。

即時演示 
<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

它將產生以下結果：

W3.CSS - 容器

HTML5 具有以下容器元素：

  • <div> - 為 HTML 內容提供通用容器。

  • <header> - 代表標題部分。

  • <footer> - 代表頁尾部分。

  • <article> - 代表文章。

  • <section> - 為各種型別的部分提供通用容器。

W3.CSS 提供w3-container作為主要類來設定所有上述容器的樣式。W3.CSS 還具有其他類，如w3-border、w3-red、w3-teal、w3-padding-32，可以為容器新增更多樣式屬性。

示例

以下示例展示了使用 w3-container 類設定各種容器樣式。

w3css_containers.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-red">
         <h1>HTML5 Tutorial</h1>
      </header>
      
      <div class = "w3-container w3-border w3-teal">
         <p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
      </div>
      
      <article class = "w3-container">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </article>
      
      <section class = "w3-container">
         <p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
      </section>
      
      <footer class = "w3-container w3-red">
         <p>Copyright @TutorialsPoint.COM</p>
      </footer>
   </body>
</html>

結果

驗證結果。

W3.CSS 還提供具有隱藏/關閉功能的容器。請參見以下示例：

w3css_hide_container.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <div class = "w3-container w3-border w3-teal">
         <span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
         <p>Close container by clicking on the X in the upper right corner.</p>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 程式碼著色

W3.CSS 為以下語言提供了出色的語法高亮支援：

  • HTML - 在包含 HTML 程式碼的容器上使用類 w3-code htmlHigh。

  • CSS - 在包含 CSS 程式碼的容器上使用類 w3-code cssHigh。

  • JS - 在包含 CSS 程式碼的容器上使用類 w3-code jsHigh。

你必須包含以下指令碼才能連結到 js 檔案以獲得語法高亮支援：

<script src = "https://w3schools.tw/lib/w3codecolors.js"></script>

w3css_color_coding.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>HTML Syntax Highlighted</h2>
      </header>
      <div class = "w3-code htmlHigh">
         <html>
            <head>
               <title>The W3.CSS Example</title>
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="css/w3.css">
            </head>
            
            <body>
               <header class="w3-container w3-teal">
                  <h1>Hello World!</h1>
               </header>
            </body>
         </html>
      </div>
      
      <header class="w3-container w3-teal">
         <h2>CSS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         .bold {
            font-weight:bold;
         }
         #boldLabel {
            font-weight:bold;
         }
         table, th, td {
            font-family:sans;
         }
      </div>
      
      <header class = "w3-container w3-teal">
         <h2>JS Syntax Highlighted</h2>
      </header>
      
      <div class = "w3-code cssHigh">
         <script type="text/javascript">
            function(message){
            }
            var message = "Hello, World!";
            alert(message);
         </script>
      </div>
      <script src="https://w3schools.tw/lib/w3codecolors.js"></script>
   </body>
</html>

結果

驗證結果。

W3.CSS - 卡片

W3.CSS 有幾個特殊的類可以將容器顯示為帶有陰影的紙張式卡片。

序號 類名和描述
1

w3-card

為任何帶有邊框的 HTML 內容設定容器樣式
2

w3-card-2

為任何帶有 2px 邊框陰影的 HTML 內容設定容器樣式
3

w3-card-4

為任何帶有 4px 邊框陰影的 HTML 內容設定容器樣式
4

w3-card-8

為任何帶有 8px 邊框陰影的 HTML 內容設定容器樣式
5

w3-card-12

為任何帶有 12px 邊框陰影的 HTML 內容設定容器樣式

示例

w3css_cards.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Syntax Highlighter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
      <style>
         div {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <div class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </div>
      <div class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </div>
      <br/>
      
      <div class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <div class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </div>
      </div>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <div class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-container">
            <p>Learn HTML5</p>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 響應式設計

W3.CSS 有幾個特殊的類可以建立響應式設計。

序號 類名和描述
1

w3-half

將容器設定為在中等或大型螢幕裝置上佔據視窗的 1/2nd。如果螢幕小於 601 畫素，則將其大小調整為 100%。
2

w3-third

將容器設定為在中等或大型螢幕裝置上佔據視窗的 1/3rd。如果螢幕小於 601 畫素，則將其大小調整為 100%。
3

w3-quarter

將容器設定為在中等或大型螢幕裝置上佔據視窗的 1/4th。如果螢幕小於 601 畫素，則將其大小調整為 100%。
4

w3-col

在 12 列網格中指定一列。
5

w3-row

指定一個無填充的容器，用於響應式類。此類對於響應式類完全響應是必需的。

示例

w3css_responsive_design.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-half w3-red">
            <h2>w3-half</h2>
            <p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-half">
            <h2>w3-half</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-third w3-red">
            <h2>w3-third</h2>
            <p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>
         
         <div class = "w3-container w3-third">
            <h2>w3-third</h2>
         </div>
      </div>
      <br/>
      
      <div class = "w3-row w3-border">
         <div class = "w3-container w3-quarter w3-red">
            <h2>w3-quarter</h2>
            <p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
         </div>

         <div class = "w3-container w3-quarter">
            <h2>w3-quarter</h2>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 網格

W3.CSS 提供一個 12 列流體響應式網格。

它使用 w3-row 和 w3-col 樣式類分別定義行和列。

序號 類名和描述
1

w3-row

指定一個無填充的容器，用於響應式列。此類對於響應式類完全響應是必需的。
2

w3-col

指定帶有子類的列

w3-col 有幾個子類，用於不同型別的螢幕。

小型螢幕裝置的列

以下是小型螢幕裝置（通常是智慧手機）的列級樣式列表。

序號 類名和描述
1

s1

定義 12 列中的 1 列，寬度為 08.33%。
2

s2

定義 12 列中的 2 列，寬度為 16.66%。
3

s3

定義 12 列中的 3 列，寬度為 25.00%。
4

s4

定義 12 列中的 4 列，寬度為 33.33%。
5

s12

定義 12 列中的 12 列，寬度為 100%。小型螢幕手機的預設類。

中等螢幕裝置的列

以下是中等螢幕裝置（通常是平板電腦）的列級樣式列表。

序號 類名和描述
1

m1

定義 12 列中的 1 列，寬度為 08.33%。
2

m2

定義 12 列中的 2 列，寬度為 16.66%。
3

m3

定義 12 列中的 3 列，寬度為 25.00%。
4

m4

定義 12 列中的 4 列，寬度為 33.33%。
5

m12

定義 12 列中的 12 列，寬度為 100%。中等螢幕手機的預設類。

大型螢幕裝置的列

以下是大型螢幕裝置（通常是筆記型電腦）的列級樣式列表。

序號 類名和描述
1

|1

定義 12 列中的 1 列，寬度為 08.33%。
2

|2

定義 12 列中的 2 列，寬度為 16.66%。
3

|3

定義 12 列中的 3 列，寬度為 25.00%。
4

|4

定義 12 列中的 4 列，寬度為 33.33%。
5

|12

定義 12 列中的 12 列，寬度為 100%。大型螢幕裝置的預設類。

用法

每個子類根據裝置型別確定要使用的網格列數。考慮以下 HTML 程式碼段。

<div class = "w3-row">
   <div class = "w3-col s2 m4 l3">
      <p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
   </div>
</div>

如果在 HTML 元素的 class 屬性中未提及子類，則裝置上使用的預設列數為 12。

示例

w3css_grids.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Grids</title>
      <meta name = "viewport" content="width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>

   <body>
      <header class = "w3-container w3-teal">
         <h2>Mobile First Design Demo</h2>
         <p class = "w3-large">Resize the window to see the effect!</p>
      </header>
      <div class = "w3-row">
         <div class = "w3-col m1 w3-center w3-grey">1</div>
         <div class = "w3-col m1 w3-center">2</div>
         <div class = "w3-col m1 w3-center w3-grey">3</div>
         <div class = "w3-col m1 w3-center">4</div>
      
         <div class = "w3-col m1 w3-center w3-grey">5</div>
         <div class = "w3-col m1 w3-center">6</div>
         <div class = "w3-col m1 w3-center w3-grey">7</div>
         <div class = "w3-col m1 w3-center">8</div>
      
         <div class = "w3-col m1 w3-center w3-grey">9</div>
         <div class = "w3-col m1 w3-center">10</div>
         <div class = "w3-col m1 w3-center w3-grey">11</div>
         <div class = "w3-col m1 w3-center">12</div>
      </div>
      
      <div class = "w3-row">
         <div class = "w3-col w3-container m4 l3 w3-yellow">
            <p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
         </div>
      
         <div class = "w3-col w3-container s4 m8 l9">
            <p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 表單

W3.CSS 具有非常美觀且響應迅速的表單設計 CSS。使用以下 CSS：

序號 類名和描述
1

w3-group

表示帶邊框的容器。可用於組合標籤和輸入。
2

w3-input

美化輸入控制元件。
3

w3-label

美化標籤。
4

w3-checkbox w3-checkmark

美化複選框/單選按鈕。

示例

w3css_forms.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body>
      <form class = "w3-container w3-card-8">
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">User Name</label>
         </div>
         
         <div class = "w3-group">
            <input class = "w3-input" type = "text" style = "width:90%" required>
            <label class = "w3-label">Email</label>
         </div>
         
         <div class = "w3-group">
            <textarea class = "w3-input" style = "width:90%" required></textarea>
            <label class = "w3-label">Comments</label>
         </div>
         <div class = "w3-row">
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "checkbox" checked = "checked">
                  <div class = "w3-checkmark"></div> Married
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox">
                  <div class = "w3-checkmark"></div> Single
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "checkbox" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
               <br>
               <br>
            </div>
            
            <div class = "w3-half">
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "male" checked>
                  <div class = "w3-checkmark"></div> Male
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female">
                  <div class = "w3-checkmark"></div> Female
               </label>
               <br>
               <label class = "w3-checkbox">
                  <input type = "radio" name = "gender" value = "female" disabled>
                  <div class = "w3-checkmark"></div> Don't know (Disabled)
               </label>
            </div>
         </div>
      </form>
   </body>
</html>

結果

驗證結果。

W3.CSS - 按鈕

W3.CSS 具有非常美觀且響應迅速的 CSS，用於自定義按鈕的外觀。使用以下 CSS：

序號 類名和描述
1

w3-btn

表示標準按鈕。也可用於將連結樣式化為按鈕。
2

w3-btn-floating

表示設計為圓形的浮動按鈕。
3

w3-btn-floating-large

表示大型浮動按鈕。

示例

w3css_buttons.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Standard Buttons</h2>
      <button class = "w3-btn">Click Me</button>
      <button class = "w3-btn w3-teal">Click Me</button>
      <button class = "w3-btn w3-disabled">I am disabled</button>
      
      <h2>Links as Buttons</h2>
      <a class = "w3-btn">Link</a>
      <a class = "w3-btn w3-teal">Link</a>
      <a class = "w3-btn w3-disabled">Disabled Link</a>
      
      <h2>Floating Buttons</h2>
      <a class = "w3-btn-floating">+</a>
      <a class = "w3-btn-floating w3-teal">+</a>
      <a class = "w3-btn-floating w3-disabled">+</a>
      
      <h2>Large Floating Buttons</h2>
      <a class = "w3-btn-floating-large">+</a>
      <a class = "w3-btn-floating-large w3-teal">+</a>
      <a class = "w3-btn-floating-large w3-disabled">+</a>
   </body>
</html>

結果

驗證結果。

W3.CSS - 工具提示

W3.CSS 使用 w3-tooltip 類支援不同型別的工具提示。請檢視以下示例。在這裡，我們已將 tooltiptext 放入 div 和影像中，並在父 div 上應用了 w3-tooltip。

<div class = "w3-tooltip">
   <div class = "w3-text w3-container w3-teal" style = "width:255px;">
      <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
   </div>
   <div>
      <img src = "html5-mini-logo.jpg" alt = "html5">
   </div>
</div>

示例

w3css_tooltips.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Tooltips</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Hover Demo</h2>
      <div class = "w3-tooltip">
         <div class = "w3-text w3-container w3-teal" style = "width:255px;">
            <p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
         </div>
         
         <div>
            <img src = "html5-mini-logo.jpg" alt = "html5">
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 模態對話方塊

W3.CSS 可用於顯示可自定義的模態對話方塊，而不是標準的 JavaScript 警報。

它使用 w3-row 和 w3-col 樣式類分別定義行和列。

序號 類名和描述
1

modal-dialog

表示定義對話方塊的主要父視窗。
2

w3-modal-dialog

表示對話方塊內容容器。

3

w3-modal-content

表示對話方塊內容。

示例

w3css_modal_dialog.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Modal dialog</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Modal dialog Demo</h2>
      <a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
      <div id = "model-dialog" class = "w3-modal">
         <div class = "w3-modal-dialog">
            <div class = "w3-modal-content w3-card-8">
               <header class = "w3-container w3-teal">
                  <a href = "#" class = "w3-closebtn">×</a>
                  <h2>TutorialsPoint</h2>
               </header>
               <div class = "w3-container">
                  <p>Hello World!</p>
               </div>
               <footer class = "w3-container w3-teal">
                  <p>@TutorialsPoint.COM</p>
               </footer>
            </div>
         </div>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 表格

W3.CSS 可用於使用 w3-table 上的各種樣式顯示不同型別的表格。

序號 類名和描述
1

w3-table

表示沒有任何邊框的基本表格。
2

w3-striped

顯示條紋表。
3

w3-bordered

繪製一個在行之間有邊框的表格。
4

w3-border

繪製帶有邊框的表格。
5

w3-card

將表格繪製為卡片。
6

w3-responsive

繪製一個響應式表格，如果螢幕太小而無法顯示內容，則顯示水平捲軸。
7 w3-tiny

繪製一個字型非常小的表格。
8

w3-small

繪製一個字型較小的表格。
9

w3-large

繪製一個字型較大的表格。
10

w3-xlarge

繪製一個字型特大的表格。
11

w3-xxlarge

繪製一個字型非常大的表格。
12

w3-xxxlarge

繪製一個字型特大的表格。
13

w3-jumbo

繪製一個特大號字型的表格。

示例

w3css_tables.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Tables</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
      <table class = "w3-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Stripped Table with borders</h3>
      <table class = "w3-table w3-striped w3-bordered w3-border">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      <hr/>
      
      <h3>Table as Card</h3>
      <table class = "w3-table w3-card-4">
         <thead>
            <tr>
            <th>Student</th>
            <th>Class</th>
            <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
      
      <h3>Responsive table</h3>
      <div class = "w3-responsive">
         <table class = "w3-table w3-card-4">
            <thead>
               <tr>
                  <th>Student</th>
                  <th>Class</th>
                  <th>Data #1</th>
                  <th>Data #2</th>
                  <th>Data #3</th>
                  <th>Data #4</th>
                  <th>Data #5</th>
                  <th>Data #6</th>
                  <th>Data #7</th>
                  <th>Data #8</th>
                  <th>Data #9</th>
                  <th>Data #10</th>
               </tr>
            </thead>
            
            <tbody>
               <tr>
                  <td>Mahesh Parashar</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Rahul Sharma</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
               <tr>
                  <td>Mohan Sood</td>
                  <td>VI</td>
                  <td>10</td>
                  <td>11</td>
                  <td>12</td>
                  <td>13</td>
                  <td>14</td>
                  <td>15</td>
                  <td>16</td>
                  <td>17</td>
                  <td>19</td>
                  <td>20</td>
               </tr>
            </tbody>
         </table>
      </div>
      
      <h3>Table with very small font</h3>
      <table class = "w3-table w3-tiny">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
               </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

結果

驗證結果。

W3.CSS - 列表

W3.CSS 可用於使用 w3-ul 上的各種樣式顯示不同型別的列表。

序號 類名和描述
1

w3-ul

表示沒有任何邊框的基本列表。
2

w3-striped

顯示條紋列表。
3

w3-bordered

繪製一個在行之間有邊框的列表。
4

w3-border

繪製帶有邊框的列表。
5

w3-card

將列表繪製為卡片。
6

w3-tiny

繪製一個字型非常小的列表。
7

w3-small

繪製一個字型較小的列表。
8

w3-large

繪製一個字型較大的列表。
9

w3-xlarge

繪製一個字型特大的列表。
10

w3-xxlarge

繪製一個字型非常大的列表。
11

w3-xxxlarge

繪製一個字型特大的列表。
12

w3-jumbo

繪製一個特大號字型的列表。

示例

w3css_lists.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <li>Mahesh Parashar</li>
         <li>Rahul Sharma</li>
         <li>Mohan Sood</li>
      </ul>
   </body>
</html>

結果

驗證結果。

W3.CSS - 圖片

W3.CSS 提供了使用 w3-image 作為主要類以美觀有趣的方式顯示影像的選項。

序號 類名和描述
1

w3-image

表示沒有任何邊框的基本樣式影像。
2

w3-circle

在圓圈內顯示影像
3

w3-title

用於在影像上放置文字。
4

w3-card

將影像繪製為卡片。

示例

w3css_images.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>Images Demo</h2>
      <hr/>
      <h3>Simple Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5">
      </div>
      
      <h3>Circled Image</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      
      <h3>Text over image</h3>
      <div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
         <div class = "w3-title w3-text-black">Learn HTML5</div>
      </div>
      
      <h3>Image as a card</h3>
      <div class = "w3-image">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 圖示

W3.CSS 支援以下流行的圖示庫：

  • Font Awesome 圖示

  • Google Material 圖示

  • Bootstrap 圖示

用法

要使用圖示，請將圖示名稱放在 HTML <i> 元素的類中。要控制圖示的大小，可以使用以下類：

序號 類名和描述
1

w3-tiny

繪製非常小的圖示。
2

w3-small

繪製小型圖示。
3

w3-large

繪製大型圖示。
4

w3-xlarge

繪製特大型圖示。
5

w3-xxlarge

繪製非常大的圖示。
6

w3-xxxlarge

繪製特大的圖示。

示例

w3css_icons.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Icons</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1"> 
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
   
   <body class = "w3-container">
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud w3-large"></i>
      <i class = "fa fa-cloud w3-xlarge"></i>
      <i class = "fa fa-cloud w3-xxlarge"></i>
      <i class = "fa fa-cloud w3-xxxlarge"></i>
      <i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
      
      <h3>Google Material Design Icon Demo</h3>
      <i class = "material-icons w3-large">cloud</i>
      <i class = "material-icons">cloud</i>
      <i class = "material-icons w3-xlarge">cloud</i>
      <i class = "material-icons w3-xxlarge">cloud</i>
      <i class = "material-icons w3-xxxlarge">cloud</i>
      <i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
      
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
      <i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
      <i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
   </body>
</html>

結果

驗證結果。

W3.CSS - 顏色

W3.CSS 支援豐富的顏色類。這些顏色類是在考慮營銷、道路標誌和便利貼中使用的顏色而設計和開發的。

  • w3-red

  • w3-pink

  • w3-purple

  • w3-deep-purple

  • w3-靛藍

  • w3-藍色

  • w3-淺藍色

  • w3-青色

  • w3-藍綠色

  • w3-綠色

  • w3-淺綠色

  • w3-黃綠色

  • w3-卡其色

  • w3-黃色

  • w3-琥珀色

  • w3-橙色

  • w3-深橙色

  • w3-藍灰色

  • w3-棕色

  • w3-淺灰色

  • w3-灰色

  • w3-深灰色

  • w3-黑色

顏色主題

W3.CSS 使用其公共領域主題 CSS 提供了對網站主題應用的出色支援。以下是一些示例：

序號 CSS 名稱和描述
1

w3-theme-indigo.css

包含靛藍變體顏色的 CSS
2

w3-theme-red.css

包含紅色變體顏色的 CSS

要使用主題，請訪問https://w3schools.tw/w3css/w3css_downloads.asp下載所需的 CSS 檔案。

示例

w3css_colors.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Color Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
      <link rel = "stylesheet" href = "css/w3-theme-red.css">
   </head>
   
   <body class = "w3-container">
      <h2>Color Theme Demo</h2>
      <hr/>
      <div class = "w3-card-4">
         <div class = "w3-container w3-theme w3-card-2">
            <h1>Red Colored Theme</h1>
         </div>
         
         <div class = "w3-container w3-text-theme">
            <h2>w3-text-theme - Theme for Text</h2>
         </div>
         
         <ul class = "w3-ul w3-border-top">
            <li class = "w3-theme-l5" style = "position:relative">
            <a class = "w3-btn-floating-large w3-theme-action w3-right"
            style = "position:absolute;top:-28px;right:16px;">+</a>
            <p>Using w3-theme-l5 / w3-theme-light style</p>
            </li>
            <li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
            <li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
            <li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
            <li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
            <li class = "w3-theme"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
            <li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
         </ul>
      </div>
   </body>
</html>

結果

驗證結果。

W3.CSS - 導航

W3.CSS 有幾個特殊的類，可以快速地在網站上顯示導航欄或選單。

序號 類名和描述
1

w3-topnav

將列表樣式化為水平選單/導航欄。
2

w3-sidenav

將列表樣式化為垂直選單/導航欄。

示例

w3css_navigation.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Navigation</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body class = "w3-container">
      <h2>Navigation Demo</h2>
      <hr/>
      <h3>Horizontal top navigation bar</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using font awesome icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using material icons</h3>
      <nav class = "w3-topnav w3-red">
         <a href="#"><i class="material-icons">home</i></a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
      
      <h3>Using Side Navigation</h3>
      <nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
         <a href="#">Home</a>
         <a href="#">Overview</a>
         <a href="#">Environment</a>
         <a href="#">Containers</a>
         <a href="#">Grids</a>
      </nav>
   </body>
</html>

結果

驗證結果。

W3.CSS - 實用工具

W3.CSS 有幾個實用程式類，對於日常設計需求非常有用。

  • 顏色實用程式類 - 例如：w3-red，w3-yellow

  • 填充實用程式類 - 例如：w3-padding-jumbo，w3-padding-16

  • 邊距實用程式類 - 例如：w3-margin-8，w3-margin-64

  • 邊框實用程式類 - 例如：w3-border-left，w3-border-right

  • 尺寸實用程式類 - 例如：w3-tiny，w3-small

  • 圓形實用程式類 - 例如：w3-circle

  • 居中實用程式類 - 例如：w3-center

示例

w3css_utilities.htm

即時演示 
<html>
   <head>
      <title>The W3.CSS Utilities</title>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>W3.CSS Utilities</h2>
      <hr/>
      <h3>Color Utilities Demo</h3>
      <div class = "w3-container w3-red">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Padding Utilities Demo</h3>
      <div class = "w3-container w3-red w3-padding-jumbo">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-padding-16">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Margin Utilities Demo</h3>
      <div class = "w3-container w3-margin-64">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-margin-8">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
      
      <h3>Border Utilities Demo</h3>
      <div class = "w3-container w3-red w3-border-left w3-border-right">
         <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
      </div>
      <div class = "w3-container w3-green w3-border">
         <p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
      </div>
 
      <h3>Size Utilities Demo</h3>
      <div class = "w3-container">
         <p class = "w3-small">Using w3-small font.</p>
         <p>Using Default (medium).</p>
         <p class = "w3-large">Using w3-large font.</p>
         <p class = "w3-xlarge">Using w3-xlarge font.</p>
      </div>

      <h3>Circle Utility Demo</h3>
      <div class = "w3-container">
         <img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
      </div>
      <h3>Center Utility Demo</h3>
      <div class = "w3-container w3-center w3-black w3-card-2">
         <img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
      </div>
   </body>
</html>

結果

驗證結果。

列印頁面
上一頁
下一頁
廣告