ionic list item 图片文字展示

最新推荐文章于 2024-06-20 22:03:11 发布

原创最新推荐文章于 2024-06-20 22:03:11 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了两种不同的HTML图片展示方式，一种适用于小尺寸图标展示，使用了itemitem-avatar样式；另一种适用于商品详情页的大图展示，使用了itemitem-thumbnail-left样式。通过具体的HTML代码示例，展示了如何设置图片的宽度、高度以及相关的描述信息。

显示小图片

<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 样式。