直接使用代码
图片素材
点击下载本素材所包含的图片,js文件
css代码
<style>
.row-8 li{overflow:hidden;margin-bottom:50px}
.row-8 li .pic{width:400px;height:400px;line-height:400px;overflow:hidden;border:1px solid #ddd;float:left;margin-right:103px;text-align:center}
.row-8 li .pic a{display:block}
.row-8 li .pic img{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;-webkit-transition:all .3s;-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;transition:all .3s}
.row-8 li .pic:hover img{-webkit-transform:scale(1.08);-ms-transform:scale(1.08);-o-transform:scale(1.08);transform:scale(1.08)}
.row-8 li .txt{overflow:hidden;font-size:14px;line-height:24px;color:#666;padding-top:25px}
.row-8 li .txt h3 a{display:block;font-size:22px;color:#000;font-weight:400;margin-bottom:7px}
.row-8 li .txt .bq{margin-bottom:12px;overflow:hidden}
.row-8 li .txt .bq span{display:inline-block;font-size:16px;color:#f77026;height:28px;padding:0 9px;margin-right:10px;border:1px solid #f77026;border-radius:3px;overflow:hidden}
.row-8 li .txt .many{line-height:22px;font-size:16px;color:#333;margin-bottom:29px}
.row-8 li .txt .many p{display:inline-block;color:#ff6363}
.row-8 li .txt .many p span{font-size:26px}
.row-8 li .txt .top{overflow:hidden;margin-bottom:112px}
.row-8 li .txt .ss{display:block;width:190px;height:50px;background:#f77026;border-radius:5px;font-size:20px;color:#fff;text-align:center;line-height:50px;overflow:hidden}
.row-8 li .txt .ss:hover{opacity:.8}
.row-8 h3{font-size:20px;color:#000;margin-bottom:8px;line-height:39px}
</style>
HTML+JS代码
<div class="row-8">
<div class="container">
<ul>
<li>
<div class="pic">
<a href=""><img src="http://www.bootfastui.cn/img/2021/0512-2/h17.png" alt="" /></a>
</div>
<div class="txt">
<div class="top">
<h3><a href="">艺考生文化课随身学案 [理科全套]</a></h3>
<div class="bq">
<span>官方直发</span>
<span>包邮</span>
</div>
<div class="many">售价:<p>¥<span>360</span>.00</p>
</div>
<span>含:语文、文科数学、英语、政治、地理、历史各1本,配套微信小程序激活码,每科一张</span>
</div>
<a href="/buy.html" class="ss">立即购买</a>
</div>
</li>
<li>
<div class="pic">
<a href=""><img src="http://www.bootfastui.cn/img/2021/0512-2/h17.png" alt="" /></a>
</div>
<div class="txt">
<div class="top">
<h3><a href="">艺考生文化课随身学案 [理科全套]</a></h3>
<div class="bq">
<span>官方直发</span>
<span>包邮</span>
</div>
<div class="many">售价:<p>¥<span>360</span>.00</p>
</div>
<span>含:语文、文科数学、英语、政治、地理、历史各1本,配套微信小程序激活码,每科一张</span>
</div>
<a href="/buy.html" class="ss">立即购买</a>
</div>
</li>
</ul>
</div>
</div>