免费AI编程助手
W3.CSS Color (主题)
2020-11-10 17:18 更新
颜色主题
W3.CSS，它很容易定制您的应用程序的颜色主题。
Movies 2014
Frozen
人们对动画的反应很荒谬人们对动画的反应很荒谬
The Fault in Our Stars
感人、扣人心弦、制作精良
The Avengers
这是漫威和迪士尼的巨大成功
<<>>
Movies 2014
Frozen
人们对动画的反应很荒谬人们对动画的反应很荒谬
The Fault in Our Stars
感人、扣人心弦、制作精良
The Avengers
这是漫威和迪士尼的巨大成功
<<>>
你所要做的就是添加一个链接到预定义的(或自制的)主题:
实例
<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3.css">
<link rel="stylesheet" href="https://7npmedia.w3cschool.cn/w3-theme-indigo.css">尝试一下 »
预定义的主题
这些是W3.CSS中预定义的主题:
w3-theme-红色
w3-theme-粉色
w3-theme-紫色
w3-theme-深紫色
w3-theme-靛蓝色
w3-theme-蓝色
w3-theme-浅蓝色
w3-theme-青色
w3-theme-青绿色
w3-theme-绿色
w3-theme-浅绿色
w3-theme-石灰色
w3-theme-卡其色
w3-theme-黄色
w3-theme-琥珀色
w3-theme-橙色
w3-theme-深橙色
w3-theme-蓝灰色
w3-theme-棕色
w3-theme-灰色
w3-theme-暗灰色
w3-theme-黑色
添加渐变
一位读者向我们提出了这样的建议:你可以考虑为每个主题添加一个渐变。
我使用了蓝色主题中的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%) }
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%) }
尝试一下 »
可下载的颜色主题
以下是一些受谷歌材料设计启发而下载的色彩主题:
| 样式表 | 描述 |
| 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 | 颜色主题：黄色
|
以上内容是否对您有帮助：
更多建议：