国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端培訓-初級階段-場景實戰(2019-05-16)-聊天頭像-微信頭像-群組頭像

Taste / 1182人閱讀

摘要:我們先來了解一下需求,微信大家都有吧,拉個群注意觀察群頭像。實現微信頭像布局效果地址,本來是在的,但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址,我還是個孩子,寫起來真的煩啊,我就寫前幾個好不好。

前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/JS),本著提升技術水平,打牢基礎知識的中心思想,我們開課啦(每周四)。

場景實戰這塊內容每個人的內容都不一樣。所以最近的更新基本都是我遇到并解決掉的問題。后期會吧他們的內容貼地址。

我們要講什么?

這節還是聊天消息中遇到的問題,群組消息之頭像,哈哈是不是感覺好熟悉,對的是我之前拋出的一個問題。
我們先來了解一下需求,微信大家都有吧,拉個群注意觀察群頭像。會成為如下效果。今天我們就是要實現一下它。

flex 實現微信頭像布局

效果地址,本來是在JSRun的,但是大哥最近有點不穩定老連不上。如果你說什么Flex我不會啊,之前寫的Flex的教程一發入魂。

看第一個效果(avatar3)一個在上,兩個在下,想想有什么屬性適合?flex-wrap 用來規定內容放不下,如何換行

nowrap(不換行)(默認值)

wrap(換行,第一行在上方)(兩個在上,一個在下)

wrap-reverse(換行,第一行在下方)(兩個在下,一個在上)

是不是發現,效果對了,但是排序的頭像錯了?微信頭像是加群時間升序的。不用擔心,渲染的時候取反就ok,負負得正嘛。。

頭像等分,我是參照100px。一個90px,兩個45px,三個30px。然后使用百分比實現。為什么要用百分比呢?因為你也不能保證所有地方都是100px吧。

然后你是不是發現多行的時候,間距有問題?align-content 定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。設置一下就好了

background-image 實現微信頭像布局

效果地址,我還是個孩子,寫起來真的煩啊,我就寫前幾個好不好。
這個效果的實現依賴于多重背景實現,background --MDN

absolute 實現

效果地址,寫起來感覺比上一個方案要簡單一點,但是,還是不好寫。我只寫了前幾個。

文檔流+after/before填充

效果地址,基本上屬于看到哪里不對改哪里,操作上來說,比上兩個方案要簡單一些。

其他思路

需要換行的地方插入br標簽,然后水平居中。垂直居中使用padding。

方案同上垂直居中換成table-cell。等其他方法。

grid

方案優缺點
方案 理解程度 位置控制 描述
flex 很好理解,思路清晰,但是無法對于設計稿精細微調
背景圖 高可控性,但是代碼復雜,不易理解修改
絕對定位 高可控性,但是代碼復雜,不易理解修改,比背景圖還是要好理解一點
文檔流 可控性較好,但是代碼無關聯,易于修改。不推薦。
grid
后記

你有什么方案可以在評論區留言討論
今日分享-TypeScript快速入門

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109459.html

相關文章

  • 前端培訓-初級階段-場景實戰2019-05-16)-聊天-微信-

    摘要:我們先來了解一下需求,微信大家都有吧,拉個群注意觀察群頭像。實現微信頭像布局效果地址,本來是在的,但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址,我還是個孩子,寫起來真的煩啊,我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/...

    springDevBird 評論0 收藏0
  • 前端培訓-初級階段-場景實戰2019-05-16)-聊天-微信-

    摘要:我們先來了解一下需求,微信大家都有吧,拉個群注意觀察群頭像。實現微信頭像布局效果地址,本來是在的,但是大哥最近有點不穩定老連不上。設置一下就好了實現微信頭像布局效果地址,我還是個孩子,寫起來真的煩啊,我就寫前幾個好不好。 前端最基礎的就是 HTML+CSS+Javascript。掌握了這三門技術就算入門,但也僅僅是入門,現在前端開發的定義已經遠遠不止這些。前端小課堂(HTML/CSS/...

    Drummor 評論0 收藏0

發表評論

0條評論

Taste

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<