W3.CSS 简介
W3.CSS 颜色
W3颜色 类别的灵感来自现代色彩，用于标记、路标以及便签：
实例
<div class="w3-container w3-pink w3-center w3-padding-16"><p> </p></div>
<div class="w3-container w3-teal w3-center w3-padding-16"><p> </p></div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 容器
在 W3容器 类是最重要的 W3.CSS 类。它提供如下的相等性：
- 共同利润
- 常用填充
- 常见的垂直对齐
- 常见的水平路线
- 常用字体
- 常用颜色
w3-container 类通常与 HTML 容器元素一起使用，例如：
<div>，<header>，<footer>，<article>，<section>，<blockquote>，<form>等。
实例
<div class="w3-container w3-dark-grey">
<h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">这是标题</font></font></h2>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 面板，注释和引号
在 W3面板 类可以显示各种票据及报价：
实例
<div class="w3-container w3-round w3-border">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">伦敦是英国人口最多的城市，拥有超过900万居民。</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 警报
在 W3面板 类也可用于各种警报：
实例
<div class="w3-panel w3-red w3-display-container">
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-red w3-large w3-display-topright"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">危险！</font></font></h3>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色通常表示危险或负面情况。</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-panel w3-yellow">
<h3>警告！</h3>
<p>黄色通常表示可能需要注意的警告。</p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 卡片
在 W3卡片 类适用于图像和注意事项：
实例
<div class="w3-panel w3-red w3-display-container">
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-red w3-large w3-display-topright"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">危险！</font></font></h3>
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">红色通常表示危险或负面情况。</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿尔卑斯山">
<div class="w3-container w3-center">
<p>意大利/奥地利阿尔卑斯山</p>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 表
在 W3表 类可处理各种表：
W3.CSS 列表
在 W3-UL 类可以处理所有类型的列表：
实例
<li class="w3-padding-16 w3-hover-light-grey">
<span onclick="this.parentElement.style.display='none'" class="w3-button w3-white w3-xlarge w3-right w3-hover-red"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">×</font></font></span>
<img src="https://atts.w3cschool.cn/img_avatar2.png" class="w3-left w3-circle w3-margin-right" style="width:50px">
<span class="w3-large"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">迈克</font></font></span><br>
<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">网页设计师</font></font></span>
</li>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<ul class="w3-ul w3-border">
<li><h2>名字</h2></li>
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 按钮
W3-按钮和 W3-BTN 类提供所有尺寸和类型的按钮。
实例
<button class="w3-button w3-ripple w3-red w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">纽扣</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
宽按钮：
实例
<button class="w3-button w3-block w3-border"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">纽扣</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
圆形或方形按钮：
实例
<p><a class="w3-button w3-xlarge w3-circle w3-ripple w3-black"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">+</font></font></a></p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 标签，标签，徽章和标志
在 W3标签 和 W3-徽章 类是能够显示各种吊牌，标签，徽章和标志：
实例
<span class="w3-badge w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></span>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例：
实例
<p>
<span class="w3-badge w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2</font></font></span>
</p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 响应式
该 响应网格 类提供了所有设备类型的响应：PC，笔记本电脑，平板电脑和移动。
实例
<div class="w3-col s6 w3-green w3-center">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">1/2</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 还支持 具有小，中和大类的 12列移动优先流体网格 。
W3.CSS 显示
在 W3显示 类，可以显示特定位置的 HTML 元素：
实例
<div class="w3-display-topleft w3-padding"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">左上方</font></font></div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 模
在 W3模态 类提供了纯 HTML 模态对话框：
实例
<button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-dark-grey w3-hover-black w3-padding-16"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点击打开模态</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
模态图片：
实例
<div class="w3-modal-content w3-card-4 w3-animate-zoom">
<img src="img_nature_wide.jpg" alt="自然" style="width:100%">
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 进度条
在 W3.CSS进度栏上 阅读更多内容：
实例
<div class="w3-container w3-green w3-center w3-padding" style="width:25%"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">25％</font></font></div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-dark-grey">
<div class="w3-container w3-green w3-center w3-padding" style="width:25%"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">25％</font></font></div>
</div>
<br>
<button class="w3-button w3-dark-grey" onclick="move()"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">点击我</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 下拉菜单
在 W3-下拉列表 类提供的下拉列表：
实例
<button class="w3-button w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">悬停我！</font></font></button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
实例
<div class="w3-col s6">
<div class="w3-dropdown-hover">
<button class="w3-button w3-dark-grey"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">悬停我！</font></font></button>
</div>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 折叠块
在 W3.CSS 折叠块上 阅读更多内容：
实例
<button onclick="myFunction('Demo1')" class="w3-btn w3-block w3-black w3-left-align">打开第一节</button>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 标签
标签 非常适合单页 Web 应用程序或能够显示不同主题的网页。
实例
function openCity(evt, cityName) {
var i, x, tablinks;
x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
尝试一下 »
点击“尝试一下”按钮查看在线实例
选项卡式图像库（单击其中一张图片）：
实例
<div class="w3-col s3 w3-container">
<a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');">
<img src="img_nature.jpg" alt="Nature" style="width:100%">
</a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 导航
在 W3导航 类可以用来创建一个导航栏：
实例
<div class="w3-bar w3-black">
<a href="javascript:void(0)" class="w3-bar-item w3-button"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
带有输入的导航栏：
实例
<div class="w3-bar w3-light-grey w3-border">
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-green w3-mobile"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
带有下拉菜单的导航栏：
实例
<div class="w3-bar w3-light-grey">
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-mobile"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">家</font></font></a>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 分页
W3.CSS 提供了用于 页面分页的 简单方法:
实例
<a class="w3-bar-item w3-button" href="javascript:void(0)"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">«</font></font></a>
尝试一下 »
点击“尝试一下”按钮查看在线实例
幻灯片放映
W3.CSS 提供了用于循环浏览图像或其他内容的 幻灯片：
实例
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-white", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-white";
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
灯箱
实例
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS动画
的 W3-动画 类提供了一种简单的方法来滑动和在元件褪色：
实例
<div class="w3-container">
<h2>动画淡入和淡出</h2>
<p>w3动画淡入类每10秒（连续）淡入和淡出元素。</p>
<img class="w3-animate-fading" src="https://www.w3schools.com/w3css/img_rr_01.jpg" style="width:100%">
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS 图像
在 W3CSS 中样式化 图像 很容易：
实例
<div class="w3-col m3 s4">
<img src="img_lights.jpg" class="w3-round testsm" alt="北极光" style="width:85%">
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS效果
为任何元素添加特殊 效果 ：
实例
div class="w3-red w3-container">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">正常</font></font></p>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS输入表格
在 W3输入 类的输入形式：
实例
<input class="w3-input w3-border w3-light-grey" type="text" placeholder="名称">
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS过滤器
使用 W3.CSS过滤器 在列表，表格，下拉列表等中搜索特定元素：
实例
<th style="width:60%;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">名称</font></font></th>
<th style="width:40%;"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">国家</font></font></th>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS字体
使用W3.CSS，将字体添加到网页非常容易：
实例
<div class="w3-tangerine"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
使网络美丽！
</font></font>
</div>
<div class="w3-lobster"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
制作网页！
</font></font>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
W3.CSS工具提示
在W3-提示 类可以显示各种提示的：
实例
<p class="w3-tooltip"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">将鼠标悬停在此文本上！
</font></font><span class="w3-text w3-tag"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">工具提示内容</font></font></span></p>
<p class="w3-tooltip"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">将鼠标悬停在此文本上！
</font></font><span class="w3-text w3-tag w3-theme w3-animate-opacity w3-round-large"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">工具提示内容</font></font></span></p>
尝试一下 »
点击“尝试一下”按钮查看在线实例
颜色主题
颜色主题可以轻松添加到任何Web应用程序中：
实例
<div class="w3-container w3-indigo">
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">主题靛蓝</font></font></h3>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例