前端培训-初级阶段-场景实战(2019-05-16)-聊天头像-微信头像-群组头像

栏目: Html · 发布时间: 5年前

内容简介:前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。这节还是聊天消息中遇到的问题,

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知识的中心思想,我们开课啦(每周四)。

场景实战这块内容每个人的内容都不一样。所以最近的更新基本都是我遇到并解决掉的问题。后期会吧他们的内容贴地址。

我们要讲什么?

这节还是聊天消息中遇到的问题, 群组消息之头像 ,哈哈是不是感觉好熟悉,对的是我之前抛出的一个问题。

我们先来了解一下需求,微信大家都有吧,拉个群注意观察群头像。会成为如下效果。今天我们就是要实现一下它。

前端培训-初级阶段-场景实战(2019-05-16)-聊天头像-微信头像-群组头像

flex 实现微信头像布局

效果地址 ,本来是在 JSRun 的,但是大哥最近有点不稳定老连不上。如果你说 什么Flex我不会啊 ,之前写的Flex的教程一发入魂。

  1. 看第一个效果(avatar3)一个在上,两个在下,想想有什么属性适合? flex-wrap 用来规定内容放不下,如何换行

    1. nowrap(不换行)(默认值)
    2. wrap(换行,第一行在上方)(两个在上,一个在下)
    3. wrap-reverse(换行,第一行在下方)(两个在下,一个在上)
  2. 是不是发现,效果对了,但是 排序 的头像错了?微信头像是加群时间升序的。不用担心,渲染的时候取反就ok, 负负得正嘛 。。
  3. 头像等分,我是参照100px。一个90px,两个45px,三个30px。然后使用 百分比 实现。为什么要用百分比呢?因为你也不能保证所有地方都是100px吧。
  4. 然后你是不是发现多行的时候,间距有问题? align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。设置一下就好了

background-image 实现微信头像布局

效果地址 ,我还是个孩子,写起来真的烦啊,我就写前几个好不好。

这个效果的实现依赖于多重背景实现, background --MDN

absolute 实现

效果地址 ,写起来感觉比上一个方案要简单一点,但是,还是不好写。我只写了前几个。

文档流+after/before填充

效果地址 ,基本上属于看到哪里不对改哪里,操作上来说,比上两个方案要简单一些。

前端培训-初级阶段-场景实战(2019-05-16)-聊天头像-微信头像-群组头像

其他思路

  1. 需要换行的地方插入br标签,然后水平居中。垂直居中使用padding。
  2. 方案同上垂直居中换成table-cell。等其他方法。
  3. grid

方案优缺点

方案 理解程度 位置控制 描述
flex 很好理解,思路清晰,但是无法对于设计稿精细微调
背景图 高可控性,但是代码复杂,不易理解修改
绝对定位 高可控性,但是代码复杂,不易理解修改,比背景图还是要好理解一点
文档流 可控性较好,但是代码无关联,易于修改。不推荐。
grid

后记

你有什么方案可以在评论区留言讨论


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Clean Code

Clean Code

Robert C. Martin / Prentice Hall / 2008-8-11 / USD 49.99

Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code......一起来看看 《Clean Code》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器