W3.CSS - 快速指南

W3.CSS - 概述

什么是W3.CSS？

W3.CSS 是由w3schools.com开发的层叠样式表 (CSS) 。它有助于创建更快、美观且响应灵敏的网站。它的灵感来自谷歌材料设计。

其一些显着特征如下 -

  • 内置响应式设计

  • 标准CSS

  • 灵感来自谷歌材料设计

  • 免费使用

响应式设计

  • W3.CSS 具有内置的响应式设计，因此使用 W3.CSS 创建的网站将根据设备尺寸重新设计。

  • W3.CSS 具有 12 列移动优先流体网格，支持小、大和中屏幕尺寸的响应式类。

  • W3.CSS 类的创建方式使网站可以适应任何屏幕尺寸。

  • 使用W3.CSS创建的网站完全兼容PC、平板电脑和移动设备。

标准CSS

  • W3.CSS仅使用标准CSS，非常容易学习。

  • 不依赖任何外部 JavaScript 库，例如 jQuery。

材料设计

  • 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://www.w3schools.com/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://www.w3schools.com/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://www.w3schools.com/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://www.w3schools.com/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://www.w3schools.com/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://www.w3schools.com/lib/w3codecolors.js"></script>
   </body>
</html>

结果

验证结果。

W3.CSS - 卡片

W3.CSS 有几个特殊的类，可将容器显示为带阴影的纸质卡片。

先生。没有。 类名和描述
1

w3卡

为任何带边框的 HTML 内容设置容器样式
2

w3-卡-2

为任何带有 2px 边框阴影的 HTML 内容设置容器样式
3

w3-卡-4

为任何带有 4px 边框阴影的 HTML 内容设置容器样式
4

w3-卡-8

为任何带有 8px 边框阴影的 HTML 内容设置容器样式
5

w3-卡-12

为任何带有 12 像素边框阴影的 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://www.w3schools.com/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-半

将容器设置为在中型或大屏幕设备上占据窗口的 1/2。如果屏幕小于 601 像素，则会将容器大小调整为 100%。
2

w3-第三

将容器设置为在中型或大屏幕设备上占据窗口的1/3 。如果屏幕小于 601 像素，则会将容器大小调整为 100%。
3

第三季度

将容器设置为在中型或大屏幕设备上占据窗口的1/4 。如果屏幕小于 601 像素，则会将容器大小调整为 100%。
4

w3-列

指定 12 列网格中的一列。
5

w3行

指定用于响应类的无填充容器。为了使响应类完全响应，该类是必需的。

例子

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://www.w3schools.com/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行

指定用于响应列的无填充容器。为了使响应类完全响应，该类是必需的。
2

w3-列

指定具有子类的列

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

米1

定义 12 列中的 1 列，宽度为 08.33%。
2

平方米

定义 12 列中的 2 列，宽度为 16.66%。
3

立方米

定义 12 列中的 3 列，宽度为 25.00%。
4

米4

定义 12 列中的 4 列，宽度为 33.33%。
5

米12

定义 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://www.w3schools.com/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组

代表一个有边框的容器。可用于对标签和输入进行分组。
2

w3-输入

美化输入控件。
3

w3标签

美化标签。
4

w3-复选框 w3-复选标记

美化复选框/单选按钮。

例子

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://www.w3schools.com/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按钮

代表一个标准按钮。也可用于将链接设置为按钮样式。
2

w3-btn-浮动

表示设计为圆形的浮动按钮。
3

w3-btn-浮动-大

代表一个大的浮动按钮。

例子

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://www.w3schools.com/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 类支持不同类型的工具提示。看一下下面的例子。在这里，我们在 div 和图像中放置了一个工具提示文本，并在父 div 上应用了 w3- 工具提示。

<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://www.w3schools.com/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

模态对话框

代表定义对话框的主父窗口。
2

w3-模态对话框

代表对话框内容容器。

3

w3-模态内容

代表对话框内容。

例子

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://www.w3schools.com/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表

表示没有任何边框的基本表格。
2

w3条纹

显示剥离的表。
3

w3 边框

绘制一个带有跨行边框的表格。
4

w3边框

绘制一个带有边框的表格。
5

w3卡

绘制一张桌子作为一张卡片。
6

w3响应式

如果屏幕太小而无法显示内容，则绘制响应式表格以显示水平滚动条。
7 w3-小

绘制一个字体非常小的表格。
8

w3-小号

绘制一个小字体的表格。
9

w3-大号

绘制一个大字体的表格。
10

w3-超大

绘制一个带有超大字体的表格。
11

w3-xxlarge

绘制一个带有非常大字体的表格。
12

w3-xxxlarge

绘制一个非常高的超大字体的表格。
13

w3-巨型

绘制一个带有巨型大字体的表格。

例子

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://www.w3schools.com/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条纹

显示剥离列表。
3

w3 边框

绘制一个带有跨行边框的列表。
4

w3边框

绘制一个带边框的列表。
5

w3卡

将列表绘制为卡片。
6

w3-小

用非常小的字体绘制一个列表。
7

w3-小号

用小字体绘制一个列表。
8

w3-大号

绘制一个大字体的列表。
9

w3-超大

用超大字体绘制列表。
10

w3-xxlarge

用非常大的字体绘制一个列表。
11

w3-xxxlarge

用非常高的超大字体绘制一个列表。
12

w3-巨型

用巨型大字体绘制一个列表。

例子

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://www.w3schools.com/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-图像

表示没有任何边框的基本样式图像。
2

w3-圆

显示圆圈内的图像
3

w3-标题

用于将文本放在图像上。
4

w3卡

将图像绘制为卡片。

例子

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://www.w3schools.com/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 支持以下流行的图标库 -

  • 字体真棒图标

  • 谷歌材质图标

  • 引导图标

用法

要使用图标，请将图标的名称放入 HTML <i> 元素的类中。要控制图标的大小，您可以使用以下类 -

先生。没有。 类名和描述
1

w3-小

绘制一个非常小的图标。
2

w3-小号

绘制一个小尺寸的图标。
3

w3-大号

绘制一个大尺寸的图标。
4

w3-超大

绘制一个超大尺寸的图标。
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://www.w3schools.com/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-红色

  • W3-粉色

  • w3-紫色

  • w3-深紫色

  • 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-主题-indigo.css

CSS 具有 Indigo 变体颜色
2

w3-主题-red.css

CSS 具有红色变体颜色

为了使用主题，请访问https://www.w3schools.com/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://www.w3schools.com/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-顶部导航

将列表样式设置为水平菜单/导航栏。
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://www.w3schools.com/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