直接使用代码

图片素材

css代码

   <style type="text/css">   
    .index-item{height:260px;position: relative;border:1px solid #21666b;border-radius:10px;overflow: hidden;background:#fff;}
    .index-item h2{margin:30px 0 10px 20px;font-size:22px;width:50%;color:#24686b;z-index: 10;}
    .index-item  p{margin-left:20px;width:60%;}
    .index-item h2 a:hover,.index-item p a:hover{color:#306aff;text-decoration:underline}
    .index-item img.pic{position: absolute;top:10px;right:10px;width:120px;height:120px;border-radius:50%;z-index: 1;}
    .index-item .f-info{position: absolute;width:100%;bottom:0;height:40px;line-height: 40px;color:#fff;text-align: center;background: #21666b}
    .index-item .f-info a{color:#fff;font-size: 17px;}
    .index-item .f-info a:hover{text-decoration:underline}
</style>

HTML+JS代码

   <div class="container">
    <!-- 产品第一行 -->
    <div class="index-row1 row">
        <div class="col-md-4">
            <div class="index-item">
                <h2>车用瞬态电压抑制器</h2>
                <p>符合AEC-Q101产品标准，满足IATF16949车用认证体系</p>
                <img src="/Public/images/img11.jpg" class='pic' />
                <div class="f-info"><a href="">查看车用瞬态抑制器</a></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="index-item">
                <h2>单路&多路静电抑制器</h2>
                <p>ESD、EOS、多样化封装</p>
                <img src="/Public/images/img11.jpg" class='pic' />
                <div class="f-info"><a href="">查看静电抑制器</a></div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="index-item">
                <h2>高可靠性TVS二极管</h2>
                <p>多样化封装、高稳定性</p>
                <img src="/Public/images/img11.jpg" class='pic' />
                <div class="f-info"><a href="">高可靠性TVS管</a></div>
            </div>
        </div>
</div>