W3.CSS Material（材料）

2020-12-01 17:08 更新

材料設(shè)計

Material Design 由 Google 在 2014 年設(shè)計，后來被許多 Google 應(yīng)用程序采用。

材料設(shè)計使用的元素使我們聯(lián)想到紙張和墨水。此外，這些元素還具有逼真的陰影和懸停效果。

使用 W3.CSS 的材質(zhì)設(shè)計外觀

W3.CSS 是使用“材料設(shè)計”外觀設(shè)計應(yīng)用程序的理想樣式表：

實例

<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>


嘗試一下 ?

材質(zhì)設(shè)計外觀（顏色主題）

實例

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

  <h1>參觀的地方</h1>

</div>


嘗試一下 ?

材料設(shè)計外觀（導(dǎo)航欄）

實例

<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">標(biāo)題</span>

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

</div>


嘗試一下 ?








以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號