W3.CSS 简介 (大杂烩)
W3.CSS Colors
w3-color 类受现代营销、路标和便签纸中使用的颜色启发
W3.CSS Containers
w3-container 类是 W3.CSS 类中最重要的。它提供以下等效功能：
- 通用外边距
- 通用内边距
- 通用垂直对齐
- 通用水平对齐
- 通用字体
- 通用颜色
w3-container 类通常与 HTML 容器元素一起使用，例如：
<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form> 等。
这是一个标题
本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。本文为浅灰色，文字为棕色。
这是一个页脚。
W3.CSS 面板、笔记和引用
w3-panel 类可以显示各种笔记和引用
伦敦是英国人口最多的城市，都会区超过 900 万居民。
伦敦是英国人口最多的城市，都会区超过 900 万居民。
W3.CSS Alerts
w3-panel 类也可以用于各种警报
危险！
红色通常表示危险或负面情况。
警告！
黄色通常表示需要注意的警告。
成功！
绿色通常表示成功或积极的事物。
信息！
蓝色通常表示中性的信息性更改或操作。
W3.CSS Cards
w3-card 类适用于图像和笔记
一辆汽车
汽车是一种带轮子、自驱动的机动车辆，用于交通运输。该术语的大多数定义都规定，汽车主要在道路上行驶，可供一至八人乘坐，通常有四个轮子。
（维基百科）
太棒了
法国阿尔卑斯山
示例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿尔卑斯山">
<div class="w3-container w3-center">
<p>法国阿尔卑斯山</p>
</div>
</div>
自己试试 »
W3.CSS Tables
w3-table 类可以处理各种表格
| 名字 | 姓氏 | 分数 |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | 无聊 | 100 |
W3.CSS Lists
w3-ul 类可以处理各种列表
-
Mike
网页设计师 -
Jill
支持 -
Jane
会计 -
Jack
顾问
示例
<ul class="w3-ul w3-border">
<li><h2>姓名</h2></li>
<li>吉尔</li>
<li>夏娃</li>
<li>亚当</li>
</ul>
自己试试 »
W3.CSS Buttons
w3-button 和 w3-btn 类提供各种大小和类型的按钮。
宽按钮
圆形或方形按钮
W3.CSS 标签、标记、徽章和标志
w3-tag 和 w3-badge 类能够显示各种标签、标记、徽章和标志
2 8 A B
新 警告 危险 信息
呼吸
在水下
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 且制作精良
-
复仇者联盟
对漫威和迪士尼来说是巨大的成功
颜色主题非常适合移动应用程序。
