前端學習 仿寫乙個知乎頁面

2022-04-11 05:01:52 字數 2140 閱讀 2574

並不適合 ,還是老老實實寫吧

冗談冗談

3.看一下注意的點

vertical-align 用來指定行內元素(inline)或**單元格(table-cell)元素的垂直對齊方式

注意 vertical-align 只對行內元素、**單元格元素生效:不能用它垂直對齊塊級元素

1.實現水平居中 div中img居中 試了好多還不行

就使用transform那一套了

2.讓搜尋框更加舒服的方式 設定padding:0 5px

input

3.發現乙個問題 div中的input會導致div出現不符合希望的問題如圖

設定div的vertical-align為top就變成

再設定line-height與height等高就可以居中了

4.有些input的框是不支援偽元素的

譬如text框

5.還有乙個問題 我寫的這個不適應縮小瀏覽器器寬度與高度 之後得解決這個問題

像這樣正常情況

非正常情況

上面這個問題 是因為我沒有顯式的設定 浮動元素的父元素的寬度 導致縮小瀏覽器後 會導致元素下移 (這種說法好像並不準確 應該有專門的術語)

那麼 設定寬度後 就是這樣子了 (margin是不包含在你設定的width中的)

6.寫的過程中發現其實這個介面並不適合雙飛翼

我現在發現利用百分比實現雙飛翼會帶來乙個問題 就是如果我們想讓所有元素固定在頁面中 不想在縮放頁面後導致出現奇怪的表現 利用百分比好像並不是乙個明智的選擇當然也有可能是我道行太淺

10·margin border-color 接收三個值代表 上 右和左 下 (這個我給忘了)

11.偽元素:after 需要有content屬性 不然可能會不顯示

12.遇到img標籤無法和p標籤並列 設定p標籤為inline也不行

測試後發現 並不是無法並列 是p標籤底邊與img標籤底邊對齊了

像這樣解決方法是使用改變img的 vertical-align屬性 為top 就可以了

同理, middle bottom 也有類似效果

13.也是和上面類似的問題 div中包裹img 與另乙個div對齊於一行

同樣也是利用 設定 vertical-align的方法 不過要設定到img的那個div上

如果設定到img上 會出現

搜了一下據說是因為 文字等inline元素默許是和父級元素的baseline對齊之類的(大概是這個原因)

(要寫的部落格逐漸增加)

自己對著知乎註冊頁面也模仿出了乙個!!

看了知乎的 註冊頁後,就模仿著做了乙個出來,不喜勿噴 body background url img sign bg.db29b0fbd2f78dd8c1b7.png no repeat fixed background size cover background color rgb 184,229...

自己仿寫乙個ucosii (一)

簡單談談我對uc 的一些認識級對於部分原始碼的分析和除錯,作為對近一段時間學習的階段性總結。下文將分兩部分介紹,前半部分主要談談我個人對一些問題的認識以及一些疑惑,後半部分是通過閱讀 ucosii 按照ucosii 的思路自己編寫或者除錯的一些原始碼的分析,這些原始碼可以實現任務按照優先順序定時切換...

逛知乎,記乙個演算法的題目

知乎鏈結是 題目資訊 一副從1到n的牌,每次從牌堆頂取一張放桌子上,再取一張放牌堆底,直到手裡沒牌,最後桌子上的牌是從1到n有序,設計程式,輸入n,輸出牌堆的順序陣列 發現題目比較有意思,小時候還真這麼玩過,當時也是一張一張的試出來,然後秀給小夥伴們看,拿到題目自己就琢磨的開始寫 static vo...