簡(jiǎn)介:本課程帶領(lǐng)大家學(xué)習(xí)新一代的網(wǎng)頁(yè)布局方案,彌補(bǔ)了之前網(wǎng)頁(yè)布局的很多不足。CSS網(wǎng)格布局(又名“網(wǎng)格”)是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng),其目的只在于完全改變我們?cè)O(shè)計(jì)基于網(wǎng)格的用戶界面的方式。
第1章 Grid布局介紹
本章節(jié)主要介紹Grid布局的發(fā)展趨勢(shì)與前景、優(yōu)勢(shì)、以及兼容性。
第2章 一些概念
本章節(jié),主要介紹了網(wǎng)格布局中的一些常見概念,便于大家學(xué)習(xí)更加專業(yè)的內(nèi)容,以及很好的掌握布局內(nèi)容。
第3章 容器中的屬性
本章節(jié)主要帶領(lǐng)大家學(xué)習(xí)Grid布局中的一些常用屬性,并結(jié)合案例為大家展示Grid布局的精妙之處。
- 視頻: 3-1 display (11:06)
- 視頻: 3-2 grid-template 定義行與列的軌道大小 (19:41)
- 視頻: 3-3 grid-template 定義網(wǎng)格線名字 (06:05)
- 視頻: 3-4 grid-template-areas (10:46)
- 視頻: 3-5 grid-template 簡(jiǎn)寫 (10:45)
- 視頻: 3-6 gap 行與列的間距 (06:15)
- 視頻: 3-7 gap 簡(jiǎn)寫 (02:59)
- 視頻: 3-8 items (10:22)
- 視頻: 3-9 content (08:33)
- 視頻: 3-10 grid-auto (07:58)
- 視頻: 3-11 grid簡(jiǎn)寫形式 (04:17)
第4章 CSS函數(shù)
本章節(jié),主要帶領(lǐng)大家學(xué)習(xí)Grid布局中的的三個(gè)函數(shù),并結(jié)合例子進(jìn)行剖析。
第5章 網(wǎng)格項(xiàng)上的屬性
本章節(jié),主要帶領(lǐng)大家學(xué)習(xí)網(wǎng)格項(xiàng)上的屬性,并結(jié)合實(shí)例進(jìn)行分析。