顏色庫
顏色庫是小型 CSS 文件,包含常用的顏色值,如安全標(biāo)準(zhǔn)、交通指示牌顏色、時尚顏色、偽裝顏色等。
禁止
通行
注意
指令
如何使用顏色庫
顏色庫很容易使用。只需在你的網(wǎng)頁中添加一個到顏色庫的鏈接:
<link rel="stylesheet" >
接著給你想著色的HTML元素添加一個類名:
實例
<div class="w3-highway-red">禁止</div>
<div class="w3-highway-green">通行</div>
<div class="w3-highway-yellow">注意</div>
<div class="w3-highway-blue">指令</div>
嘗試一下 ?
中國交通標(biāo)志指示牌的顏色,下載此CSS
w3-higtway-棕色
w3-higtway-紅色
w3-higtway-橙色
w3-higtway-綠色
w3-higtway-藍(lán)色
w3-higtway-白色
w3-higtway-金色
w3-higtway-熒光色
w3-higtway-黑色
w3-higtway-紅色
w3-higtway-綠色
w3-higtway-黃色
w3-higtway-藍(lán)色
w3-signal-黃色
w3-signal-橙色
w3-signal-紅色
w3-signal-紫羅蘭色
w3-signal-藍(lán)色
w3-signal-綠色
w3-signal-灰色
w3-signal-棕色
w3-signal-白色
w3-signal-黑色
實例
<div class="w3-signal-red">禁止</div>
<div class="w3-signal-yellow">等待</div>
<div class="w3-signal-green">通行</div>
嘗試一下 ? 嘗試所有 ?
2019秋冬時尚色/ 2020秋冬時尚色 下載此CSS
Chili Fiesta
Biking Red
Crème de Pêche
Peach Pink
Rocky Road
Fruit Dove
Sugar Almond
Dark Cheddar
Galaxy Blue
Bluestone
Orange Tiger
Eden
2019年秋/ 2020年冬
Vanilla Custard
Evening Blue
Paloma
Guacamole
實例
<div class="w3-2019-dark-cheddar">黑暗的切達(dá)干酪</div>
<div class="w3-2019-bluestone">青石</div>
嘗試一下 ? 嘗試所有 ?
2019年春夏流行色
Fiesta
Jester Red
Turmeric
Living Coral
Pink Peacock
Pepper Stem
Aspen Gold
Princess Blue
Toffee
Mango Mojito
Terrarium Moss
Sweet Lilac
Soybean
Eclipse
Sweet Corn
Brown Granite
實例
<div class="w3-2019-fiesta">假日紅</div>
<div class="w3-2019-princess-blue">公主藍(lán)</div>
嘗試一下 ? 嘗試所有 ?
w3-2018-red-pear
w3-2018-valiant-poppy
w3-2018-nebulas-blue
w3-2018-ceylon-yellow
w3-2018-martini-olive
w3-2018-russet-orange
w3-2018-ultra-violet
w3-2018-crocus-petal
w3-2018-limelight
w3-2018-quetzal-green
w3-2018-sargasso-sea
w3-2018-tofu
w3-2018-almond-buff
w3-2018-quiet-gray
w3-2018-meerkat
w3-2018-meadowlark
w3-2018-cherry-tomato
w3-2018-little-boy-blue
w3-2018-chili-oil
w3-2018-blooming-dahlia
w3-2018-arcadia
w3-2018-pink-emperador
w3-2018-almost-mauve
w3-2018-spring-crocus
w32018-lime-punch
w3-2018-sailor-blue
w3-2018-harbor-mist
w3-2018-warm-sand
w3-2018-coconut-milk
實例
<div class="w3-2018-ultra-violet">紫外線</div>
<div class="w3-2018-cherry-tomato">櫻桃番茄</div>
嘗試一下 ? 嘗試所有 ?
w3-2017-greenery
w3-2017-grenadine
w3-2017-tawny-port
w3-2017-ballet-slipper
w3-2017-butterum
w3-2017-navy-peony
w3-2017-neutral-grey
w3-2017-shaded-spruce
w3-2017-golden-lime
w3-2017-marina
w3-2017-autumn-maple
w3-2017-niagra
w3-2017-primrose-yellow
w3-2017-lapis-blue
w3-2017-flame
w3-2017-island-paradise
w3-2017-pale-dogwood
w3-2017-pink-yarrow
w3-2017-kale
w3-2017-hazelnut
實例
<div class="w3-2017-greenery">綠色植物</div>
<div class="w3-2017-flame">火焰</div>
嘗試一下 ? 嘗試所有 ?
w3-鮮艷-粉色
w3-鮮艷-紅色
w3-鮮艷-橙色
w3-鮮艷-黃色
w3-鮮艷-綠色
w3-鮮艷-藍(lán)色
w3-鮮艷-紫羅蘭色
w3-鮮艷-紫色
w3-鮮艷-黑色
w3-鮮艷-白色
w3-鮮艷-淡黃粉色
w3-鮮艷-橘紅色
w3-鮮艷-橘黃色
w3-鮮艷-青綠色
w3-鮮艷-黃綠色
w3-鮮艷-綠黃色
w3-鮮艷-藍(lán)綠色
w3-鮮艷-綠藍(lán)色
w3-鮮艷-紫藍(lán)色
w3-鮮艷-紅紫色
w3-鮮艷-紫紅色
實例
<div class="w3-vivid-red">
<p>倫敦是英國人口最多的城市,其都市區(qū)人口超過900萬。</p>
</div>
嘗試一下 ?
w3-食物-青蘋果
w3-食物-蘆筍
w3-食物-杏子
w3-食物-茄子
w3-食物-鱷梨
w3-食物-香蕉
w3-食物-黃油
w3-食物-藍(lán)莓
w3-食物-櫻桃
w3-食物-巧克力
w3-食物-蔓越莓
w3-食物-咖啡
w3-食物-雞蛋
w3-食物-葡萄
w3-食物-獼猴桃
w3-食物-檸檬
w3-食物-酸橙
w3-食物-芒果
w3-食物-蘑菇
w3-食物-芥末
w3-食物-薄荷
w3-食物-橄欖
w3-食物-橙子
w3-食物-豌豆
w3-食物-桃子
w3-食物-梨
w3-食物-開心果
w3-食物-李子
w3-食物-覆盆子
w3-食物-藏紅花
w3-食物-大馬哈魚
w3-食物-綠薄荷
w3-食物-南瓜
w3-食物-草莓
w3-食物-番茄
w3-食物-小麥
w3-食物-葡萄酒
實例
<div class="w3-food-apple">青蘋果</div>
<div class="w3-food-banana">香蕉</div>
嘗試一下 ? 嘗試所有 ?
w3-迷彩-棕色
w3-迷彩-紅色
w3-迷彩-紫羅蘭色
w3-迷彩-田野色
w3-迷彩-土色
w3-迷彩-沙色
w3-迷彩-古銅色
w3-迷彩-砂巖色
w3-迷彩-暗綠色
w3-迷彩-森林色
w3-迷彩-青綠色
w3-迷彩-綠色
w3-迷彩-暗灰色
w3-迷彩-灰色
w3-迷彩-黑色
實例
<div class="w3-camo-earth">偽裝卡車</div>
<div class="w3-camo-grey">偽裝船</div>
嘗試一下 ? 嘗試所有 ?
更多建議: