什么是 W3.CSS?
现代响应式 CSS
所有浏览器平等：Chrome。Firefox Edge。IE。Safari。Opera。
所有设备平等：台式机。笔记本电脑。平板电脑。移动设备。
仅标准 CSS（无 jQuery 或 JavaScript 库）。
W3.CSS 快速入门
W3.CSS 是一个现代 CSS 框架，具有内置的响应式功能。默认情况下，它支持响应式移动优先设计，并且比类似的 CSS 框架更小、更快。
W3.CSS 还可以加快和简化 Web 开发，因为它比其他 CSS 框架更易于学习和使用。
示例
<div class="w3-center w3-padding-64 w3-light-grey">
<h1>我的 W3.CSS 页面</h1>
<p>调整此页面大小以查看响应式效果！</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>伦敦</h2>
<p>伦敦是英格兰的首都。</p>
<p>它是英国人口最多的城市，
大都市区人口超过 1300 万。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的一个人口中心，
人口超过 1200 万。</p>
</div>
<div class="w3-third">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是东京大都市区的中心，
也是世界上人口最多的都市区。</p>
</div>
</div>
尝试 W3.CSS » 尝试 Bootstrap »点击“尝试一下”按钮查看其工作原理。
W3.CSS 容器
w3-container 类是 W3.CSS 中最重要的类之一。
它为大多数 HTML 元素提供了正确的边距、填充、对齐等。
示例
<div class="w3-container">
<h1>这是一段文字</h1>
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>
</div>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS 颜色
w3-color 类灵感来自现代颜色
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
示例
<div class="w3-container w3-indigo">
<p>伦敦是英国人口最多的城市。</p>
</div>
<div class="w3-container w3-blue">
<p>伦敦是英国人口最多的城市。</p>
</div>
<div class="w3-container w3-red">
<p>伦敦是英国人口最多的城市。</p>
</div>
<div class="w3-container w3-amber">
<p>伦敦是英国人口最多的城市。</p>
</div>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS 警告、提示和引用
w3-panel 类可以显示各种警告和提示以及引用
危险！
红色通常表示危险或负面的情况。
警告！
黄色通常表示可能需要关注的警告。
成功！
绿色通常表示成功或积极的事情。
信息！
蓝色通常表示中性的信息变更或操作。
危险！
红色通常表示危险或负面的情况。
警告！
黄色或橙色通常表示可能需要关注的警告。
成功！
绿色通常表示成功或积极的事情。
信息！
蓝色通常表示中性的信息变更或操作。
示例
<div class="w3-panel w3-red">
<h3>危险！</h3>
<p>红色通常表示危险或负面的情况。</p>
</div>
<div class="w3-panel w3-yellow">
<h3>警告！</h3>
<p>黄色或橙色通常表示可能需要关注的警告。</p>
</div>
尝试 W3.CSS » 尝试 Bootstrap »伦敦是英国人口最多的城市，大都市区人口超过 900 万。
示例
<div class="w3-panel w3-light-grey w3-border w3-round-xlarge">
<p>伦敦是英国人口最多的城市，大都市区人口超过 900 万。</p>
</div>
<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
<p>伦敦是英国人口最多的城市，大都市区人口超过 900 万。</p>
</div>
尝试一下 »
W3.CSS 卡片
w3-card 类适用于图像和笔记
太棒了
法国阿尔卑斯山
一辆汽车
汽车是一种带轮子的、自驱动的机动车，用于运输。大多数对该词的定义都规定汽车设计主要在道路上行驶，可容纳 1 到 8 人，通常有四个轮子。
（维基百科）
约翰
建筑师和工程师
示例
<div class="w3-card-4" style="max-width:300px;">
<img src="img_avatar3.png" alt="头像" style="width:100%">
<div class="w3-container">
<h4><b>约翰</b></h4>
<p>建筑师和工程师</p>
</div>
</div>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS 表格
w3-table 类可以处理各种表格
| 名字 | 姓氏 | 积分 |
|---|---|---|
| 吉尔 | 史密斯 | 50 |
| 夏娃 | 杰克逊 | 94 |
| 亚当 | 约翰逊 | 67 |
| 安雅 | 博尔 | 100 |
示例
<table class="w3-table w3-bordered w3-striped w3-border">
<thead class="w3-dark-grey">
<tr>
<th>名字</th>
<th>姓氏</th>
<th>积分</th>
</tr>
</thead>
<tbody>
<tr>
<td>吉尔</td>
<td>史密斯</td>
<td>50</td>
</tr>
<tr>
<td>夏娃</td>
<td>杰克逊</td>
<td>94</td>
</tr>
</tbody>
</table>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS 列表
w3-ul 类可以处理各种列表
-
迈克
网页设计师 -
吉尔
支持 -
简
会计师 -
杰克
顾问
W3.CSS 按钮
The w3-button and w3-btn class provides buttons of all sizes and types.
宽按钮
圆形或方形按钮
W3.CSS 标签、标签、徽章和标志
The w3-tag and the w3-badge classes are capable of displaying all kinds of tags, labels, badges and signs
2 8 A B
新 警告 危险 信息
呼吸
在水下
W3.CSS 响应式
The Responsive Grid classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50px
其余
1/4
其余
100px
45px
其余
W3.CSS 还支持一个 12 列移动优先流体网格，包含小、中和大类。
W3.CSS 显示
的 w3-display 类允许您将 HTML 元素显示在特定位置
W3.CSS 模态框
的 w3-modal 类提供纯 HTML 模态对话框
模态图像
W3.CSS 进度条
阅读更多内容，请访问 W3.CSS 进度条
W3.CSS 下拉菜单
的 w3-dropdown 类提供下拉菜单
W3.CSS 手风琴
阅读更多内容，请访问 W3.CSS 手风琴
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
带有图像的手风琴
法国阿尔卑斯山
W3.CSS 标签
标签 非常适合单页 Web 应用程序，或适合显示不同主题的网页。
伦敦
伦敦是英国的首都。
它是英国人口最多的城市，大都市区人口超过 900 万。
巴黎
巴黎是法国的首都。
巴黎地区是欧洲最大的一个人口中心之一，拥有超过 1200 万人口。
东京
东京是日本的首都。
它是大东京地区的中心，也是世界上人口最多的都市区。
带标签的图像画廊（点击其中一张图片）
W3.CSS 导航
的 w3-bar 类可用于创建导航栏
带输入的导航栏
带下拉菜单的导航栏
的 w3-sidebar 类创建一个侧边导航
W3.CSS 分页
W3.CSS 提供了用于 页面分页 的简便方法。
幻灯片
W3.CSS 提供 幻灯片 用于循环浏览图像或其他内容
灯箱
将 模态框 和 幻灯片 结合使用，以创建灯箱（模态图像画廊）
W3.CSS 动画
的 w3-animate 类提供了一种简单的方法来滑动和淡入元素
W3.CSS 图像
在 W3CSS 中设置 图像 的样式非常容易
W3.CSS 效果
为任何元素添加特殊的 效果
不透明度
灰度
棕褐色
W3.CSS 输入表单
的 w3-input 类用于输入表单
输入表单
输入表单
W3.CSS 过滤器
使用 W3.CSS 过滤器 在列表、表格、下拉菜单等中搜索特定元素
| 姓名 | 国家 |
|---|---|
| Alfreds Futterkiste | 德国 |
| Berglunds snabbkop | 瑞典 |
| Island Trading | 英国 |
| Koniglich Essen | 德国 |
| Laughing Bacchus Winecellars | 加拿大 |
| Magazzini Alimentari Riuniti | 意大利 |
| 北方/南方 | 英国 |
| Paris specialites | 法国 |
W3.CSS 字体
使用 W3.CSS，在网页中添加 字体 非常容易
W3.CSS 工具提示
的 w3-tooltip 类可以显示各种工具提示
将鼠标悬停在此文本上！ 工具提示内容
将鼠标悬停在此文本上！ 工具提示内容
颜色主题
颜色主题可以轻松添加到任何 Web 应用程序中
靛蓝色主题
2014 年电影
-
冰雪奇缘
对动画的反应太夸张了
-
星运里的错
感人、扣人心弦，制作精良
-
复仇者联盟
漫威和迪士尼取得了巨大成功
青绿色主题
2014 年电影
-
冰雪奇缘
对动画的反应太夸张了
-
星运里的错
感人、扣人心弦，制作精良
-
复仇者联盟
漫威和迪士尼取得了巨大成功
颜色主题非常适合移动应用程序。
完整 W3.CSS 教程
这是一个简短的 W3.CSS 描述。
要获取完整的 W3.CSS 教程，请访问 W3Schools W3.CSS 教程。
要获取完整的 W3.CSS 参考，请访问 W3Schools W3.CSS 参考。
