Materialize

重要度:⭐⭐⭐難度:⭐⭐

Materialize 是一個現代且好用 CSS 框架。

以下是 Materialize 的 CDN。

 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

在materializecss的JS組件中可以將模態做各種組合應用。

在固定在右下的按鈕中連結模態。

 <!-- Modal Trigger -->
  <a class="waves-effect waves-light btn" href="#modal1">模態</a>

  <!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
	<p></p>
     </div>
  </div>

<div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
     <li><a href="#modal1" class="btn-floating btn waves-effect waves-light blue"><i class="tooltipped" data-position="top" data-tooltip="發表文章"><i class="material-icons">mode_edit</i></i></a></li>
    </ul>
  </div>

在此處下載模板並將其打造成個人頁面。

個人頁面包含自我介紹、技能與過去製作的專案等。

你可以參考此篇 [筆記] 從零學習 Materialize 打造個人頁面。

圓角卡片 配合標籤、按鈕組合成以下卡片

.card
 {
   border:2px solid #8B4513;
   padding:0px 20px; 
   background:#dddddd;
   border-radius:25px;
 }

border:邊框粗細 背景色票

background:背景色票

padding:上下內邊框距離 左右內邊框距離

border-radius:邊框圓角

其中padding的0px表示上下內邊框距離,20px表示左右內邊框距離