W3.CSS 颜色主题
颜色主题
使用 W3.CSS，可以轻松地使用颜色主题自定义您的应用程序。
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
«»
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
«»
您所要做的就是添加指向预定义（或自制）主题的链接:
实例
<link rel="stylesheet"
href="https://www.w3ccoo.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3ccoo.com/lib/w3-theme-indigo.css">
预定义主题
这些是 W3.CSS 中预定义的主题:
| w3-theme-red | 测试一下 |
| w3-theme-pink | 测试一下 |
| w3-theme-purple | 测试一下 |
| w3-theme-deep-purple | 测试一下 |
| w3-theme-indigo | 测试一下 |
| w3-theme-blue | 测试一下 |
| w3-theme-light-blue | 测试一下 |
| w3-theme-cyan | 测试一下 |
| w3-theme-teal | 测试一下 |
| w3-theme-green | 测试一下 |
| w3-theme-light-green | 测试一下 |
| w3-theme-lime | 测试一下 |
| w3-theme-khaki | 测试一下 |
| w3-theme-yellow | 测试一下 |
| w3-theme-amber | 测试一下 |
| w3-theme-orange | 测试一下 |
| w3-theme-deep-orange | 测试一下 |
| w3-theme-blue-grey | 测试一下 |
| w3-theme-brown | 测试一下 |
| w3-theme-grey | 测试一下 |
| w3-theme-dark-grey | 测试一下 |
| w3-theme-black | 测试一下 |
| w3-theme-w3schools | 测试一下 |
添加渐变
一位读者向我们发送了这样的建议:您可能需要考虑为每个主题添加渐变。
我使用了蓝色主题中的 l2 和 l1 颜色来创建这个渐变:
实例
.w3-theme-gradient {
color: #000 !important;
background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-moz-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-o-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background:-ms-linear-gradient(top,#64B5F6
25%,#42A5F5 75%)}
.w3-theme-gradient {
color: #000 !important;
background: linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}
可下载的颜色主题
以下是一些受 Google Material Design 启发的可下载颜色主题:
| 样式表 | 描述 |
|---|---|
| w3-theme-amber.css | 颜色主题琥珀色 |
| w3-theme-black.css | 颜色主题黑 |
| w3-theme-blue.css | 颜色主题蓝色 |
| w3-theme-blue-grey.css | 颜色主题蓝灰色 |
| w3-theme-brown.css | 颜色主题棕色 |
| w3-theme-cyan.css | 颜色主题青色 |
| w3-theme-dark-grey.css | 颜色主题深灰色 |
| w3-theme-deep-orange.css | 颜色主题深橙色 |
| w3-theme-deep-purple.css | 颜色主题深紫色 |
| w3-theme-green.css | 颜色主题绿色 |
| w3-theme-grey.css | 颜色主题灰色 |
| w3-theme-indigo.css | 颜色主题靛蓝 |
| w3-theme-khaki.css | 颜色主题卡其色 |
| w3-theme-light-blue.css | 颜色主题淡蓝色 |
| w3-theme-light-green.css | 颜色主题浅绿色 |
| w3-theme-lime.css | 颜色主题石灰色 |
| w3-theme-orange.css | 颜色主题橙色 |
| w3-theme-pink.css | 颜色主题粉色 |
| w3-theme-purple.css | 颜色主题紫色 |
| w3-theme-red.css | 颜色主题红色 |
| w3-theme-teal.css | 颜色主题蓝绿色 |
| w3-theme-yellow.css | 颜色主题黄色 |
