今天初步學習css3的柵格系統，因為之前學過bootstraps4的柵格系統，所以基本概念是一致的，只是語法上的一些區別，做了一些筆記：
grid-template-rows:repeat(2,50%); //兩行各佔50%
grid-template-columns:repeat(5,20%); //五列各佔20%
grid-template-rows:1fr 2fr 3fr; 或 repeat(3,1fr);
grid-template-columns:1fr 2fr 2fr;
grid-row-gap:10px;
grid-colum-gap:10px; 他們等同於：grid-gap:10px 10px;
接下來我在小公尺移動端官網發現了一塊小型區域很適合柵格系統來完成。
可以看到這是乙個左側佔兩行，右側獨佔兩行的布局。
css3：
使用CSS3構建Ajax載入動畫
通常前端工程師採用 gif動畫來表現 ajax 的載入。但是現在 css3 已經引入了動畫屬性，我們可以在不採用 gif動畫的情況下，採用 css3 達到同樣的 ajax 載入動畫效果。那麼讓我們現在開始來實現想要的效果。webkit核心的瀏覽器 safari和chrome 示例 html 在這裡我...
CSS3 混合模式
css3混合模式 css blend modes 是css3新增的乙個魔法特性，可以允許多個背景或多個元素進行混合，類似於photoshop的圖層混合模式 設定多背景之間的混合模式，背景色 背景影象 漸變背景之間的混合模式。可以接受16個取值，分別為 normal multiply screen o...
CSS3 混合模式
css3混合模式 css blend modes 是css3新增的乙個魔法特性，可以允許多個背景或多個元素進行混合，類似於photoshop的圖層混合模式 設定多背景之間的混合模式，背景色 背景影象 漸變背景之間的混合模式。可以接受16個取值，分別為 normal multiply screen o...