Try   HackMD

Note : 常見佈局分析一

tags: FrameWork-Material-UI

一 . 常見的佈局 ：Header-drawer-body

Grid

  • 使用 ： 就是bootstrap的container和row、col系統。
  • container、item屬性 ： 分
Last changed by 
 
web-develop : CSS framework
CSS
0
89

Read more

Background

一 . Banner版 (一) . 成果圖 1. 效果 ： 左邊有一個顏色區框，可以填入我想要的內容。 右邊為一個圖片區域，可以填入我需要的產品圖片。 2. 實作概論 ： <span class="red">多重背景的應用</span> 為兩個背景的疊加 ：背景一為顏色漸層 ： 由有顏色到透明的內容。 ![](https://i.imgur.com/cmQzwVh.png =300x) 背景二為圖片 ： 在背景一之下，因為背景一的透明而顯示出來。

Mar 26, 2024
Side Bar

Feb 24, 2021
Modal

&#x4E00; . &#x57FA;&#x672C;&#x7248;&#x578B; (&#x4E00;) . &#x6210;&#x679C;&#x5716;&#x548C;&#x5206;&#x6790; &#x529F;&#x7528; &#xFF1A; &#x53EF;&#x4EE5;&#x662F;event trigger&#x89F8;&#x767C;&#x7684;&#x4E00;&#x500B;&#x63D0;&#x793A;&#x6846;&#x3002; &#x8DF3;&#x51FA;&#x5F8C;&#x53EF;&#x4EE5;&#x4F7F;&#x7528;&#x6309;&#x4E0B;&#x80CC;&#x666F;&#xFF0C;&#x6216;&#x63D0;&#x793A;&#x6846;&#x5167;&#x7684;&#x90E8;&#x5206;&#x5143;&#x4EF6;&#x95DC;&#x9589;&#x3002; &#x5206;&#x6790; &#xFF1A;

Jan 25, 2021
Card

&#x4E00; . &#x57FA;&#x672C;&#x7248;&#x578B; (&#x4E00;) . &#x6210;&#x679C;&#x5716; 1. &#x6548;&#x679C; &#x6709;&#x4E00;&#x500B;&#x6216;&#x591A;&#x500B;&#x5361;&#x7247;(&#x901A;&#x5E38;&#x70BA;&#x591A;&#x500B;&#x5361;&#x7247;)&#x4E26;&#x884C;&#x5B58;&#x5728;&#x3002; &#x6BCF;&#x4E00;&#x500B;&#x5361;&#x7247;&#x7684;&#x5167;&#x5BB9;&#x70BA;&#x5F71;&#x50CF;&#x8207;&#x5167;&#x5BB9;&#x3002; https://codepen.io/rfbadgnh/pen/eYdBwwb 2. &#x5BE6;&#x4F5C;&#x6982;&#x8AD6; : &#x5167;&#x5916;&#x5143;&#x4EF6;&#x7684;&#x5305;&#x88F9;

Jan 25, 2021
Read more from web-develop : CSS framework
Published on HackMD