评论

css实现首尾字下沉样式

常见于电商的价格场景,比如¥3.9或3.9元的下沉美观效果,解决子元素内联换行导致间隙。

1 使用场景:

常见于电商的价格场景,比如¥3.9或3.9元的效果美观效果。


2 目标效果:


3 蓝湖样式基础代码:

width:28px;
height:28px;
font-size:28px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
font-weight:bold;
color:rgba(237,41,0,1);
line-height:28px;

3.9
width:36px;
height:28px;
font-size:56px;
font-family:MicrosoftYaHeiUI-Bold,MicrosoftYaHeiUI;
font-weight:bold;
color:rgba(237,41,0,1);
line-height:28px;

29.9
width:224px;
height:80px;
font-size:88px;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(246,35,46,1);
line-height:80px;

元
font-size:40px;


大家可以试试根据这个样式实现上面效果,我之前会遇到两个问题,一是下浮不了,二是有个间隙(格式化代码)。



4 我的代码:

¥3.9

  29.9
  元


.num-1 {
  width36rpx;
  font-size56rpx;
  font-weight: bold;
  colorrgba(2374101);
}

.num-1::first-letter{
  font-size:28rpx;
}

.num-2{
  font-size:88rpx;
  font-weight:600;
  color:rgba(246,35,46,1);
  line-height:80rpx;
}

.num-2 text:last-child{
  font-size40rpx;
  line-height:40rpx;
}

5 实现效果:


6 代码片段:

https://developers.weixin.qq.com/s/TXymsvm17qgq


7 温馨提示:

  • 公司在自行开发、运营着电商小程序,欢迎交流共同进步。
  • 不定期分享文章,欢迎关注哈。


最后一次编辑于  2020-04-10  
点赞 4
收藏
评论

1 个评论

  • Lv: Max Human
    Lv: Max Human
    2020-04-26

    flex 对于first-letter还是需要多包一层。伪类的目前就block、inline-block、table等支持

    2020-04-26
    赞同
    回复
登录 后发表内容