免費(fèi)AI編程助手
Materialize 顏色
2018-01-05 10:12 更新
Materialize支持豐富的顏色類(lèi)集。這些顏色類(lèi)別的靈感和發(fā)展考慮到營(yíng)銷(xiāo)，路標(biāo)和粘滯便箋中使用的顏色。
紅
粉
紫色
深紫色
靛青色
藍(lán)色
淺藍(lán)色
青色
藍(lán)綠色
綠色
淺綠色
青檸色
黃色
琥珀色
橙色
深橙色
棕色
灰色
藍(lán)灰色
黑色
白色
透明
以下是亮度/暗度類(lèi)別的列表，其可以用于改變所應(yīng)用的顏色。
用法
lighten-1
lighten-2
lighten-3
lighten-4
lighten-5
darken-1
darken-2
darken-3
darken-4
accent-1
accent-2
accent-3
accent-4
以下示例展示如何使用上述類(lèi)來(lái)渲染背景或更改文本的顏色。在背景的情況下，添加類(lèi)本身，如果是文本，后綴“-text”到顏色類(lèi)和前綴“text-”到亮度類(lèi)。
例子
materialize_colors.html
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Colors Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="/attachments/tuploads/materialize/jquery-2.1.1.min.js"></script>
<script src="/attachments/tuploads/materialize/materialize.min.js"></script>
</head>
<body>
<h2>Color Theme Demo</h2>
<hr/>
<div class="card-panel">
<div class="card-panel red lighten-2">
<h1>Red Colored Theme</h1>
</div>
<span class="red-text text-darken-2">
<h2>Red Colored Text</h2>
</span>
<ul>
<li class="red lighten-5"><p>Using red lighten-5</p></li>
<li class="red lighten-4"><p>Using red lighten-4</p></li>
<li class="red lighten-3"><p>Using red lighten-3</p></li>
<li class="red lighten-2"><p>Using red lighten-2</p></li>
<li class="red lighten-1"><p>Using red lighten-1</p></li>
<li class="red"><p>Using red</p></li>
<li class="red darken-1"><p>Using red darken-1</p></li>
<li class="red darken-2"><p>Using red darken-2</p></li>
<li class="red darken-3"><p>Using red darken-3</p></li>
<li class="red darken-4"><p>Using red darken-4</p></li>
<li class="red accent-1"><p>Using red accent-1</p></li>
<li class="red accent-2"><p>Using red accent-2</p></li>
<li class="red accent-3"><p>Using red accent-3</p></li>
<li class="red accent-4"><p>Using red accent-4</p></li>
</ul>
</div>
</body>
</html>
結(jié)果
驗(yàn)證結(jié)果，如下圖所示。
以上內(nèi)容是否對(duì)您有幫助：
更多建議：