ionic list item 图片文字展示（实用）

最新推荐文章于 2020-11-17 18:37:36 发布

chelen_jak

最新推荐文章于 2020-11-17 18:37:36 发布

阅读量1k

点赞数

分类专栏： Ionic3 实用

实用同时被 2 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

本文展示了如何使用HTML和CSS创建不同大小的图片展示效果，包括小图片列表和大图片商品展示，通过具体代码实例，详细介绍了itemitem-avatar和itemitem-thumbnail-left样式的应用。

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

原文出处：https://blog.youkuaiyun.com/hbiao68/article/details/52683339#

显示小图片

<ul class="list">
    <li class="item item-avatar">
        <img src="public/img/appliance_wash.png" 
            class=" img_responsive"         
            style="width: 70px; height: auto;">
        <h2>山水庭院</h2>
        <p class="font_10">雨花区井湾路618号（环保学院附近）</p>
    </li>
</ul>

备注：item item-avatar 样式。

显示大图片

<div class="list">
    <a class="item item-thumbnail-left" href="#">
        <img src="{{item.img}}">
        <h2>{{item.goods_name}}</h2>
        <p>￥{{item.shop_price}}</p>
        <p>购买人:黄飞鸿</p>
        <p>提出比例：27%</p>
    </a>
</div>

备注：item item-thumbnail-left 样式。