黑松山资源网 Design By www.paidiu.com
我们需要达到的效果:
需要什么
1张图片的, 2张图片的, 3张图片的样式各不相同。可以使用js完成子元素的判断,但是这里我使用css来完成
核心知识点
使用css选择器完成子元素的判断
例子:
用css选择器匹配只有一个元素
div { &:last-child:nth-child(1) { // 相关样式 } }
很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗?
用css选择器匹配只有两个子元素
div{ &:nth-last-child(2):nth-child(2) { } }
依样画瓢:最后第二个元素也是第二个元素不就代表,这个div下只有两个元素吗
完成样式
html部分
<div class="box" v-for="(item,index) in list" :key="index"> <div class="header"> <img :src="item.userImage" alt=""> <span>{{item.name}}</span> </div> <div class="content"> <img :src="v" alt="" v-for="(v, i) in item.imageUrl" :key="i"> </div> <div class="bottom"> <span class="left-icon">{{item.createTime}}</span> <div class="right"> <img src="./img/6.1.png" alt=""> <span>{{item.fabulousNumber}}</span> </div> </div> </div>
css部分
.box { padding: 0.26rem; .header { display: flex; align-items: center; img { width: 0.58rem; height: 0.58rem; margin-right: 0.17rem; } } .bottom { display: flex; justify-content: space-between; align-items: center; color: #999999; font-size: 0.17rem; img { width: 0.17rem; height: 0.17rem; } } .content { display: flex; margin: 0.17rem 0; img { flex: 1; height: 1.37rem; width: 0; margin-right: 0.09rem; &:last-child { margin-right: 0; } &:last-child:nth-child(1) { height: 2.75rem; } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 老头杯第二届规则是什么 英雄联盟老头杯第二届规则介绍
- 王崴-爵士听堂.蓝色波萨(HQCD)[WAV+CUE]
- 群星《欧美动听情歌·柔情第5季》2CD【DTS-WAV分轨】
- [极品珍藏]德意志进行曲集卡拉扬SACD[WAV+CUE]
- 前暴雪制作人呼吁反击DEI 玩家:夺回文化!
- 腾讯证实子公司Sharkmob大规模裁员:整个市场很低迷
- 荣耀加冕 问鼎冠军 中国代表队获第四届东亚电竞锦标赛团体总冠军
- 污甩乐队.2024-Let.the.dirt.left【摩登天空】【FLAC分轨】
- 杜德伟.1994-ALL.FOR.YOU(英)【滚石】【WAV+CUE】
- 群星.2013-百代好声音ADMSCD1【EMI百代】【WAV+CUE】
- 群星《私人音乐精选示范碟》PRIVATEMUSIC 发烧唱片名碟[WAV+CUE][1.1G]
- 山口百惠《あなたへの子守唄》日本索尼钢刻字首版[WAV分轨][1.1G]
- 群星《宝丽金20周年特别发烧版》1:1母盘直刻限量编号[低速原抓WAV+CUE][1G]
- 凤飞飞.1984-仲夏(夏艳)[WAV]
- 常安《民歌红·江南燕》DTS-ES6.1[WAV]