Stack Overflow小名片实现

amiable
403 阅读2分钟

本文参与4月更文挑战, 打卡day1, 第一篇

效果图如下：

分析结构

这个小名片分为以下板块：

其中各种成就那个板块的英文提示语是reputation score

效果实现

文档结构

image.png

html部分 image.png

css部分 image.png image.png

处理用户头像与其右边部分位于同一行

  1. 让头像变成宽高均为32px，第一次设置错误，图片的大小没有任何改变； 
.user-card-body-photo {
    width: 32px;
    height: 32px;
}

此处应该是针对图像img标签的宽高进行修改，而不是修改img标签所在的div标签。因此应该用到.user-card-body-photo > img复合选择器（选择到父标签是.user-card-body-photo的所有img）

正确代码如下：

.user-card-body-photo > img {
   width: 32px;
   height: 32px;
}
  1. 用户名、浏览量、各种成就与用户头像在一行，可以通过让用户名左浮动来实现；

image.png

开始只给.user-card-body-photo>img写了float:left，能够实现用户名、浏览量、各种成就与用户头像在一行展示，但是老师的教程在这一步就给.user-card-body-photo和.user-card-body-info都写了浮动。

此处有疑问：

为什么.user-card-body-photo和.user-card-body-info都写了浮动，只给photo写也能实现效果，两个都写是不是没有必要？
在后续发现头像与信息之间有一个8px的外边距时只给username加了左外边距8px，得到了下图样式。

image.png

很显然，这个外边距只给到了username，reputation还是紧紧贴着photo，理想效果是将8px加到.user-card-body-info就能够达到想要的效果了。 但是外边距并没有生效，在给.user-card-body-info加了浮动之后才生效。 image.png image.png

  1. 各种成就前的项目符号 可以使用div，再用border-radius改成圆形然后加上相应的颜色实现； float会脱离文档流得到不是想要的效果

image.png

可以使用inline-block解决这个问题。 image.png

!注意：
1. 书写内外边距（margin、padding）属性值需要带单位px；
2. 单独一个属性可以使用行内式
3. line-height是针对文字在竖直方向居中的，对于div不生效，需要div为之改变可以使用position：relative；然后修改top/right/bottom/left的值。让其相对于自身原本所在位置进行一个偏移。
最后实现的效果

本文的效果也可以参考码上掘金：Stack Overflow小名片实现

avatar
文章
阅读
粉丝