鐵人檔案
在上一個單元完成了一個有圖片的卡片排版，接下來將這個卡片排版修改成圖片是用背景的方式呈現，最終的成果如： 首先，延續上一個單元所完成的宣告： <div...
這個單元將繼續使用 relative 與 absolute 來製作另外一種卡片排版。這是完整的樣子： 一開始宣告 div 標籤： <div class=...
接下來這個單元要開始來討論 Dashboard 排版製作的方法，因為這是很常見的排版方式，這個單元將會完成這個排版的樣子，會呈現一個左右兩側的排版方式： 一開...
這個單元要來繼續完成 Dashboard 排版，上一個單元完成了以下的排版方式： <div class="flex h-screen"...
上一個單元介紹了左右兩側的排版，這個單元要來介紹三列式的排版，並且三列都各自獨立有自己的滑動視窗，完成之後會呈現這個樣子： 首先，老樣子，宣告 div 的架構...
這個單元要開始來討論表單的製作方式，最後呈現的樣子： 先宣告一個最基本的表單輸入框： <input class="f" type=&...
在上一個單元最終完成的表單輸入欄位樣式為： <input class="w-full rounded-lg border border-gray...
這個單元繼續討論表單的元件，checkbox。 首先先宣告一個基本的 checkbox： <input type="checkbox"...
前面兩個單元討論了如何建構出表單內的欄位，但目前只有討論到 input 與 checkbox，這個單元將會討論所有欄位的寫法。 在 Day16 討論過的 inp...
這個單元要來介紹表格的基本做法，首先，先宣告一個最基本的表格： <table> <thead> <tr>...
