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%)
}

尝试一下 »


可下载的颜色主题

以下是一些受谷歌材料设计启发而下载的色彩主题:

样式表 描述
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 颜色主题:黄色


以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号