第四周
第一天:
1.旋轉(zhuǎn)軸:默認(rèn)是中線篮幢,可以通過transform-origin進(jìn)行調(diào)整
2.2d變形詳細(xì)講解:旋轉(zhuǎn)變形transform:rotate(45deg);縮放變形transform:scale(0.1)/scale(1.5)放大數(shù)值大于等于1糯崎,縮小是0到1之間氓扛;
斜切邊形transform:skew(30deg,30deg)
3.多列:設(shè)置頁面布局秩霍,跨幾列先口,設(shè)置列寬向胡。
column-count:4窒典;列數(shù)為4
column-gap:20Px;列間隔
column-rule:1px red solid;列邊框
column-width:auto;默認(rèn)隨列數(shù)調(diào)整寬度
column-span:all;合并標(biāo)題
4.動畫
語法:animation:yundong 2s linear os alternate forwards infinite ;
定義動畫@-webkit-keyframes funding{
0%{}40%{}100%{}
5.講解了旋轉(zhuǎn) 跳跳按鈕 連續(xù)滾動 正方體等動畫特效案例
第二天
講解css3PPT
注意點(diǎn)有
1.漸變:background-image:linear-gradient(top bottom red white)
不是background-color
第三天
接著講解css3PPT
注意點(diǎn)有
1.target目標(biāo)偽類阿趁,與錨點(diǎn)結(jié)合可以實現(xiàn)簡單的js效果膜蛔,突出顯示活動的錨,用于選取當(dāng)前的活動目標(biāo)
2.補(bǔ)充講解偽類:元素狀態(tài)偽類脖阵,結(jié)構(gòu)偽類皂股,否定偽類
3.補(bǔ)充學(xué)習(xí)計數(shù)器的用法
4.自定義字體 font-face的用法
第四天
重點(diǎn):
1.彈性盒子模型
在未知大小容器中,可以控制容器中元素的對齊方式命黔,設(shè)置元素的寬高和排列方式屑墨,排列順序和方向。
注意父元素要設(shè)置聲明
father { display: inline-box;}
box-orient用來確定子元素的方向纷铣。是橫著排還是豎著走≌阶可選的值有:horizontal | vertical | inline-axis | block-axis | inherit其中搜立,inline-axis是默認(rèn)值。且horizontal與inline-axis的表現(xiàn)似乎一致的槐秧,讓子元素橫排啄踊;而vertical與block-axis的表現(xiàn)也是一致的,讓元素縱列
box-direction是用來確定子元素的排列順序刁标,可選值有:normal | reverse | inherit其中normal是默認(rèn)值颠通,表示按照正常順序排列。所謂正常順序膀懈,就是我們看書寫文字的順序顿锰,從左往右,由上至下,先出現(xiàn)的元素硼控,就上面或是左邊刘陶。而reverse表示反轉(zhuǎn),原本從左往右應(yīng)該是1-2-3的牢撼,結(jié)果顯示確實3-2-1匙隔。
box-lines是用來決定子元素是可以換行顯示
box-align與box-pack都是決定盒子內(nèi)部剩余空間怎么使用的。
box-pack決定了父標(biāo)簽水平遺留空間的使用熏版。
2.鏈接外部樣式link和@import的區(qū)別
祖先不同纷责,加載文件格式不同,加載順序不同撼短,加載存在的兼容性問題再膳。
第五天
1.補(bǔ)充分享了微信小程序
2.下午考察博雅界面(不能固定外圍盒子寬度)