nth选择器

4 15 20 1C

于 2022-05-17 11:11:35 发布

阅读量94

点赞数

文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/M40153c/article/details/124817382

版权

这篇博客展示了如何在页面中使用<img>标签展示图片，并通过CSS进行布局和尺寸调整。内容包括图片的排列方式、尺寸设定及间距处理，适用于前端网页开发中的图像展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<view class="imgbox">
        <image src="@/static/aboutusimg1.png" alt="" />
        <image src="@/static/aboutusimg2.png" alt="" />
        <image src="@/static/aboutusimg3.png" alt="" />
        <image src="@/static/aboutusimg4.png" alt="" />
</view>

.imgbox {
      margin-top: 35rpx;
      image:nth-of-type(1) {
        width: 290px;
        height: 217px;
      }
      image:nth-of-type(2) {
        width: 290px;
        height: 192px;
        margin-top: 30rpx;
      }
      image:nth-of-type(3) {
        width: 290px;
        height: 218px;
        margin-top: 30rpx;
      }
      image:nth-of-type(4) {
        width: 290px;
        height: 431px;
        margin-top: 30rpx;
      }
}