直接使用代码

图片素材

css代码

 <style>


.ibuybook { background: #f4f4f4 ; zoom: 1; }

.ibuybook .ibuybookcon ul li { display: block; float: left; width: 100%; padding: 46px 0px; font-size: 14px; line-height: 28px; color: #333333; }
.ibuybook .ibuybookcon ul li .img { vertical-align: middle; float: left; height: 379px; width: 379px; padding-left: 60px; }
.ibuybook .ibuybookcon ul li .text { float: right;  padding-right: 44px; width: 550px; }
.ibuybook .ibuybookcon ul li .text h3 { font-size: 20px; color: #333; line-height: 54px; font-weight: bold; }
.ibuybook .ibuybookcon ul li .text .shoujia { font-size: 16px; line-height: 42px; padding-bottom: 8px; }
.ibuybook .ibuybookcon ul li .text .shoujia .sjnum { font-family: Tahoma, Geneva, sans-serif; color: #ff6363; }
.ibuybook .ibuybookcon ul li .text .shoujia .sjnum em { font-size: 26px; font-style: normal; font-weight: normal; }

.ibuybookcon ul li .text dl { color: #666666; padding-top: 4px; }
.ibuybook .ibuybookcon ul li .text dl dt {line-height: 25px; }
.ibuybook .ibuybookcon ul li .text dl dd { float: left; width: 280px; line-height: 20px;}
.ibuybook .ibuybookcon ul li .text .btnbox { clear: both; padding-top: 40px; display: block; text-align: center; }
.ibuybook .ibuybookcon ul li .buybtn { line-height: 42px; color: #FFF; background: #ff6364; height: 42px; width: 198px; font-size: 16px; font-weight: bold; display: inline-block; }
</style>

HTML+JS代码

 <div class="ibuybook  clearfix">
  <div class="ibuybookcon container">
    <ul>
      <li>
        <img src="http://www.bootfastui.cn/img/2021/0516-2/book1.jpg" class="img">
        <div class="text">
          <h3>2021版百日学案文科全套/官方直发/包邮</h3>
          <div class="shoujia">特惠价：<span class="sjnum">¥<em>428</em>.00</span><span style="font-size:16px;">
              定价：</span><s><span style="font-size:16px;">468.00</span></s></div>
          含：语数英政史地每科4本书，一本学案一本百日练一本答案一本考点速记手册，送单词手册及错题笔记，共26本书．一张会员卡。
          <dl>
            <dt>现在购买还赠送：</dt>
            <dd>2021年艺术类招生手册<br>
              2021高考大纲说明<br>
              2021年高考临考押题卷<br>
              2021年校考时间表<br>
              2021年高考必背英语词汇及错题笔记。</dd>
          </dl>
          <div class="btnbox"><a href="" class="buybtn">立刻购买</a></div>
        </div>
      </li>
    

    </ul>
  </div>
</div>