今天上午主要學習了css居中對齊的方式和css3的邊框與動畫製作。
1.margin設定區塊元素水平居中
2.position屬性設定元素的左右對齊
3.float屬性設定左右對齊
4.padding屬性設定水平垂直居中
5.line-height屬性設定水平垂直居中
6.絕對定位和transform屬性設定水平垂直居中
1.圓角邊框
2.邊框陰影
3.漸變動畫
4.animation動畫
最後的實踐階段,我們還稍微引入了一點js的內容。
css的劇種對齊主要講了margin,position,float,padding,line-height和「絕對定位與transform調整水平居中」。這幾種垂直居中與水平居中都有各自的使用環境,需要我們在平時使用時多加注意,以免發生報錯。
css3的邊框與動畫效果,可以讓我們設計出來的頁面顯得更加的生動,並且加大了學習的樂趣。邊框與動畫的效果我們可以按照自己的意願去設計。
這上面的內容需要我們課後多做練習,做到熟能生巧,才能在以後的工作中信手拈來。
最後一節課製作的側邊框的移動使用到了即將學習的js內容,看上去略顯深奧,還需要等後期課程的學習,慢慢領悟。
下午的練習也讓我對新學的知識有了更深的認識。以後還需要多加練習來鞏固今天的學習內容。
十一月七日課堂筆記 居中和對齊 CSS3新特性
1.margin設定區塊元素水平居中 margin 0 auto 設定左右外邊距的大小,控制元素的水平居中。center style class center 使用margin進行元素的居中p div body 注 width不能設定為100 是沒有效果的。2.position屬性設定元素的左右對齊...
十一月一日課堂筆記
計算機軟體概論 1.科學分類 2.軟體分類 3.學習重點 4.b s結構應用原理 電腦科學的分類 計算機硬體 計算機網路 計算機軟體 計算機硬體 認識計算機的組成 控制器 運算器 儲存器 輸入輸出裝置 1.儲存器 記憶體是在執行時儲存資料的,輸入輸出效率是非常高的。硬碟是持久化儲存,斷電後依舊存在。...
PGL七日打卡營心得
關於圖神經網路 近年來,人們對深度學習方法在圖上的擴充套件越來越感興趣。在多方因素的成功推動下,研究人員借鑑了卷積網路 迴圈網路和深度自動編碼器的思想,定義和設計了用於處理圖資料的神經網路結構,由此乙個新的研究熱點 圖神經網路 graph neural networks,gnn 應運而生。圖神經網路...