商品连接列表模块结构

<a href="#" class="box fl">

            <!-- a盒子浮动  给宽高  里面分上下盒子 -->

            <div class="pic">

                <img src="./images/jd01.webp" alt="">

            </div>

            <!-- 下盒子 -->

            <div class="info">

                <h4>智利原箱进口车厘子JJ级 2.5kg礼盒装 果径约28-30mm 新鲜水果礼盒</h4>

                <div class="price clearfix">

                    <!-- 里面小盒子浮动，给父元素设定高度，清除浮动影响 -->

                    <!-- 或者父元素不设置高度 给父元素自己设置清除浮动影响属性 -->

                    <!-- 最好给里面子元素em单独设置需要的行高，因为x文本默认自带行高比em内容小，所以可以避免基线对齐问题产生行高错位撑开父元素 -->

                    <div class="sale fl">￥x<em>369.00</em></div>

                    <div class="off fl">¥699.00</div>

                </div>

            </div>

        </a>