WEB前端學習日誌第三週 Day1

2021-10-04 13:44:30 字數 1863 閱讀 2507

固定定位

固定定位很常見,幾乎每個網頁中都會涉及到,比如固定在網頁右下角的回到頂部按鈕。

position:fixed; 固定定位

a: 參照物:瀏覽器視窗。

b: 不佔據空間,脫離布局流。

讓乙個元素在瀏覽器視窗左右上下居中?

第一種方法:

position:fixed;

left:50%;top:50%;

margin-left:減去元素寬度一半;

margin-top:減去元素高度的一半;

第二種方法:

position:fixed;

left:0;right:0;

top:0;bottom:0;

margin:auto;

錨點《標籤 id="">

用固定定位和錨點兩個知識點做出了乙個類似樓層的效果。

效果如下:

粘性定位

粘性定位一般作用在網頁的導航條,導航條在網頁還沒滾動的超過他時會隨著頁面滾動,而隨著網頁向下滾動導航條就會一直處於網頁最上方,像是固定了一樣。

粘性定位:

position:sticky;

執行邏輯:

預設情況下:當瀏覽器視窗滾動條不滾動,當前元素沒有超出整個瀏覽器視窗的時候

執行的position:relative;如果元素超出當前視窗則應用的position:fixed;

pc端網頁的寬高自適應

pc端 寬度 和 高度的自適應問題:我們希望,寫html結構的寬和高,能適應不同的解析度、不同的裝置、不同的內容增刪,使我們專案更加的靈活。

預設情況下塊狀元素:

當width不設定的時候,或者width:100%;當前元素的寬跟隨父元素的變化。

高度自適應第一種情況:

當元素height不去設定或者是設定成height:auto;

元素的高度是被內容撐開的。

需求1:當內容增加的時候,內容能把容器撐開。

需求2:當內容極少或者沒有內容的時候,讓容器保持乙個最小高度。

最小高度的設定:

min-height:;

能滿足1:當內容增加的時候,內容能把容器撐開。

能滿足2:當內容極少或者沒有內容的時候,讓容器保持乙個最小高度。

banner圖超出版心時的解決方法

當banner圖過於大或者過於長時,版心放不下,此時怎麼辦?

通過如下**實現

輪播圖的結構

輪播圖在我剛學web時一直以為是在滾動,其實不然。

輪播圖的顯示效果其實是在乙個div中有著好幾張和這個div寬高相同的,而滾動的也只是這個包含的大div。

實現如下,這是我還處於學習的初級階段,還不能讓滾動起來,只是做乙個效果的展示。

在網頁中顯示如下:

前端學習之旅 第三週

2.動態引入元件 3.關鍵字async 要上手參與專案了,但是自己水平實在太低,不好意思直接寫 只能先學習前輩們的專案 但是整個專案如此龐大,裡面牽扯的又都是我不曾了解到的技術,只好先來學習惡補一下,爭取能看懂前輩的 需要根據專案執行順序來決定我研究 的順序。參考了好多篇部落格才明白了vuecli3...

第三週學習總結

這周關於深度學習的內容比較簡單,是對線性代數的簡單回顧,所以我在這裡做乙個簡單的總結。向量與矩陣 矩陣是由m n個數組成的乙個m行n列的矩形 特別地,乙個m 1矩陣也稱為乙個m維列向量 而乙個1 n矩陣 也稱為乙個n維行向量.向量可以用矩陣表示,且有時特殊矩陣就是向量.簡言之就是矩陣包含向量.矩陣加...

第三週學習總結

複習了一周唄 就感覺鞏固了一下,學習方法還是理解著背,死記硬背是不可能的,除了英語和文科這輩子都不可能死記硬背的。今天還複習了剩下的搜尋。比如拓撲排序,根據深度進行的排序?雖然又看了一遍但是還是不知道這個到底與按深度排序有什麼區別的說,總之就是先算出深度,然後從入度為0的乙個個廣搜,放進陣列就好。剩...