W3.CSS Material(材料)

2020-12-01 17:08 更新

材料设计

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下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号