codecamp

W3.CSS Material（材料）

材料设计

Material Design 由 Google 在 2014 年设计，后来被许多 Google 应用程序采用。

材料设计使用的元素使我们联想到纸张和墨水。此外，这些元素还具有逼真的阴影和悬停效果。

使用 W3.CSS 的材质设计外观

W3.CSS 是使用“材料设计”外观设计应用程序的理想样式表：

实例

<div class="w3-panel w3-white w3-card w3-display-container">

<span class="w3-display-topright w3-padding w3-hover-red">X</span>

<p class="w3-text-blue"><b>email.zip</b></p>

<p>https://www.w3schools.com/lib/email.zip</p>

<p class="w3-text-blue">显示在文件夹</p>

</div>

尝试一下 »

材质设计外观（颜色主题）

实例

<div class="w3-container w3-padding-32 w3-theme-d1">

<h1>参观的地方</h1>

</div>

尝试一下 »

材料设计外观（导航栏）

实例

<div class="w3-bar w3-theme w3-xlarge">

<a class="w3-bar-item w3-button" href="#"><i class="fa fa-bars"></i></a>

<span class="w3-bar-item">标题</span>

<a class="w3-bar-item w3-button w3-right" href="#"><i class="fa fa-search"></i></a>

</div>

尝试一下 »

温馨提示

下载编程狮App，免费阅读超1000+编程语言教程

取消

确定

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }