最新上架(P1)

Flex練習

一、page1.html:Flex練習

範例結果

S1:html結構

S2:利用Flex進行排版美化

SCSS美化

SCSS @for 循環【參考連結

for循環有兩種形式,分別為:@for $var from through 和@for $var from to 。
$i表示變量,start表示起始值,end表示結束值,這兩個的區別是關鍵字through表示包括end這個數,而to則不包括end這個數。

S3:Flexbox li 打開時,【.title】改為橫向、【p】置於li 中央

直書CSS參考:【參考1】、【參考2

SCSS美化

S4:JQ設定

S4-1:在html結構中,將p動畫改變方向的元素,在其父元素【li】中加入【class=”toLeft”】或【class=”toTop”】

S4-1:CSS預設美化

S4-1:JQ參考: is( ) 方法animate()方法jQuery動畫說明selectors選取器