什么是 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>它是英国人口最多的城市，</p>
<p>都会区超过 1300 万居民。</p>
</div>
<div class="w3-third">
<h2>巴黎</h2>
<p>巴黎是法国的首都。</p>
<p>巴黎地区是欧洲最大的聚居地之一，</p>
<p>人口超过 1200 万。</p>
</div>
<div class="w3-third">
<h2>东京</h2>
<p>东京是日本的首都。</p>
<p>它是大东京地区的核心，</p>
<p>也是世界上人口最多的都会区。</p>
</div>
</div>
尝试 W3.CSS » 尝试 Bootstrap »单击“Try it Yourself”按钮查看其工作原理。
W3.CSS Containers
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 Colors
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 Cards
w3-card 类适用于图片和注释
令人惊叹
法国阿尔卑斯山
一辆汽车
汽车是一种带有车轮、可自行驱动的机动车，用于交通运输。该术语的大多数定义都规定，汽车设计用于主要在道路上行驶，可容纳一至八人，并且通常有四个车轮。
(维基百科)
John
建筑师和工程师
示例
<div class="w3-card-4" style="max-width:300px;">
<img src="img_avatar3.png" alt="头像" style="width:100%">
<div class="w3-container">
<h4><b>John</b></h4>
<p>建筑师和工程师</p>
</div>
</div>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS Tables
w3-table 类可以处理各种表格
| 名字 | 姓氏 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
示例
<table class="w3-table w3-bordered w3-striped w3-border">
<thead class="w3-dark-grey">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
</table>
尝试 W3.CSS » 尝试 Bootstrap »W3.CSS Lists
w3-ul 类可以处理各种列表
-
Mike
网页设计师 -
Jill
支持 -
Jane
会计 -
Jack
顾问
W3.CSS Buttons
w3-button 和 w3-btn 类提供了各种尺寸和类型的按钮。
宽按钮
圆形或方形按钮
W3.CSS 标签、标签页、徽章和标识
w3-tag 和 w3-badge 类能够显示各种类型的标签、标签页、徽章和标识
2 8 A B
New Warning Danger Info
呼吸
在水下
W3.CSS Responsive
响应式网格类为所有设备类型提供响应式：PC、笔记本电脑、平板电脑和手机。
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 Display
w3-display 类允许您将 HTML 元素显示在特定位置
W3.CSS 模态框
w3-modal 类提供纯 HTML 的模态对话框
模态框图像
W3.CSS Progress Bars
在 W3.CSS 进度条 阅读更多
W3.CSS Dropdowns
w3-dropdown 类提供下拉菜单
W3.CSS Accordions
在 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 Tabs
选项卡非常适合单页 Web 应用程序，或适合能够显示不同主题的网页。
London
伦敦是英格兰的首都。
它是英国人口最多的城市，都会区超过 900 万居民。
巴黎
巴黎是法国的首都。
巴黎地区是欧洲最大的聚居地之一，人口超过 1200 万。
东京
东京是日本的首都。
它是大东京地区的核心，也是世界上人口最多的都会区。
带选项卡的图片库 (单击其中一张图片)
W3.CSS Navigation
w3-bar 类可用于创建导航栏
带输入的导航栏
带下拉菜单的导航栏
w3-sidebar 类创建侧边导航
W3.CSS Pagination
W3.CSS 提供简单的分页方法。
幻灯片
W3.CSS 提供幻灯片来循环显示图片或其他内容
灯箱
W3.CSS 动画
w3-animate 类提供了一种简单的方式来滑动和淡入元素
W3.CSS Images
在 W3CSS 中样式化图片很容易
W3.CSS 特效
为任何元素添加特殊效果
不透明度
灰度
棕褐色
W3.CSS 输入表单
w3-input 类用于输入表单
输入表单
输入表单
W3.CSS Filters
使用W3.CSS 过滤器在列表、表格、下拉菜单等中搜索特定元素
| 名称 | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | 加拿大 |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
有了 W3.CSS，将字体添加到网页中将变得极其容易
W3.CSS Tooltips
w3-tooltip 类可以显示各种工具提示
将鼠标悬停在此文本上！ 工具提示内容
将鼠标悬停在此文本上！ 工具提示内容
颜色主题
颜色主题可以轻松添加到任何 Web 应用程序中
靛蓝主题
电影 2014
-
冰雪奇缘
动画的反应很荒谬
-
星运里的错
感人、 gripping 且制作精良
-
复仇者联盟
对漫威和迪士尼来说是巨大的成功
青色主题
电影 2014
-
冰雪奇缘
动画的反应很荒谬
-
星运里的错
感人、 gripping 且制作精良
-
复仇者联盟
对漫威和迪士尼来说是巨大的成功
颜色主题非常适合移动应用程序。
完整的 W3.CSS 教程
这只是对 W3.CSS 的简要介绍。
有关完整的 W3.CSS 教程，请访问 W3Schools W3.CSS 教程。
有关完整的 W3.CSS 参考，请访问 W3Schools W3.CSS 参考。
