W3.CSS 简介 (万花筒)
W3.CSS 颜色
The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes
W3.CSS 容器
The w3-container class is the most important of the W3.CSS classes. It provides equality like
- 公共外边距
- 公共内边距
- 公共垂直对齐
- 公共水平对齐
- 公共字体
- 公共颜色
The w3-container class is typically used with HTML container elements, like
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.
这是一个标题
这篇文章是浅灰色，文字是棕色。 这篇文章是浅灰色，文字是棕色。 这篇文章是浅灰色，文字是棕色。 这篇文章是浅灰色，文字是棕色。 这篇文章是浅灰色，文字是棕色。
这是一个页脚。
W3.CSS 面板、注释和引号
The w3-panel class can display all kinds of notes and quotes
伦敦是英国人口最多的城市，都市区人口超过 900 万。
伦敦是英国人口最多的城市，都市区人口超过 900 万。
W3.CSS 警告
The w3-panel class can also be used for all kinds of alerts
危险！
红色通常表示危险或负面的情况。
警告！
黄色通常表示可能需要关注的警告。
成功！
绿色通常表示成功或积极的事情。
信息！
蓝色通常表示中性的信息性变更或操作。
W3.CSS 卡片
The w3-card classes are suitable for both images and notes
一辆汽车
汽车是一种有轮子的、自驱动的机动车辆，用于运输。 大多数关于该术语的定义都规定汽车设计主要在道路上行驶，可容纳 1 至 8 人，通常有 4 个轮子。
(维基百科)
令人惊叹
法国阿尔卑斯山
示例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="阿尔卑斯山">
<div class="w3-container w3-center">
<p>法国阿尔卑斯山</p>
</div>
</div>
自己试试 »
W3.CSS 表格
The w3-table classes can handle all kinds of tables
| 名字 | 姓氏 | 分数 |
|---|---|---|
| 吉尔 | 史密斯 | 50 |
| 伊芙 | 杰克逊 | 94 |
| 亚当 | 约翰逊 | 67 |
| 安雅 | 波尔 | 100 |
W3.CSS 列表
The w3-ul class can handle all kinds of lists
-
迈克
网页设计师 -
吉尔
支持 -
简
会计 -
杰克
顾问
示例
<ul class="w3-ul w3-border">
<li><h2>姓名</h2></li>
<li>吉尔</li>
<li>伊芙</li>
<li>亚当</li>
</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 显示
The w3-display classes allow you to display HTML elements in specific positions
W3.CSS 模态框
The w3-modal class provides modal dialog in pure HTML
模态框图片
W3.CSS 进度条
在 W3.CSS 进度条 中了解更多信息
W3.CSS 下拉菜单
The w3-dropdown classes provide dropdowns
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 年电影
-
冰雪奇缘
动画的响应非常棒
-
星运里的错
感人，扣人心弦，真正做得好
-
复仇者联盟
漫威和迪士尼取得了巨大成功
颜色主题非常适合移动应用程序。
