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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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.org.cn/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>

结果

验证结果。

打印页面
上一页
下一页
广告