直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
   /*footer*/
   #index-footer {  background: #393939; padding:30px 0;color: #fff; }
   #index-footer a{color:#e5e5e5}
   #index-footer a:hover{color:#e60012}
   #index-footer  .t-tle{font-size:32px;}
   #index-footer .item-left h3{margin-bottom: 20px;}
   #index-footer .item-left li a{display: block;line-height: 30px;font-size:16px;}
   #index-footer .item-right{ padding:15px 0;line-height: 30px;font-size:16px;display:flex;align-items: center; justify-content:space-between}
   
   
   #index-footer .item-right span{display: inline-block;float: right;font-size:16px;padding-left:25px}
   #index-footer .item-right img.ico{width: 20px;}
   #index-footer .item-right span.t-tle{font-size:22px}
   
</style>

HTML+JS代码

 
<footer id="index-footer">
    <div class="container">
        <div class="row">
        <!-- 左侧 -->
        <div class="col-md-8 left-content pm">
            <div class="pad-pc-right50">
                <div class="col-md-5 col-xs-6 pm item-left">
                    <h3>产品</h3>
                    <ul>
                        <li><a href="http://bootfastui.cn">瞬态抑制二极管</a></li>
                        <li><a href="http://bootfastui.cn">适用于信号口防护的陶瓷放电管</a></li>
                        <li><a href="http://bootfastui.cn">SE系列静电抑制器</a></li>
                        <li><a href="http://bootfastui.cn">PPTC</a></li>
                        <li><a href="http://bootfastui.cn">二极管及整流器</a></li>
                        <li><a href="http://bootfastui.cn">车用TVS二极管</a></li>
                        <li><a href="http://bootfastui.cn">高可靠性晶闸管</a></li>

                    </ul>
                </div>
                <div class="col-md-4 col-xs-6 pm item-left">
                    <h3>应用</h3>
                    <ul>
                        <li><a href="http://bootfastui.cn">汽车电子</a></li>
                        <li><a href="http://bootfastui.cn">安防</a></li>
                        <li><a href="http://bootfastui.cn">网通</a></li>
                        <li><a href="http://bootfastui.cn">消费类电子</a></li>
                        <li><a href="http://bootfastui.cn">电源</a></li>
                        <li><a href="http://bootfastui.cn">工业</a></li>
                    </ul>
                </div>
                <div class="clear visible-xs"></div>
                <div class="col-md-3 col-xs-6 pm item-left">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="http://bootfastui.cn">质量</a></li>
                        <li><a href="http://bootfastui.cn">对外实验室</a></li>
                        <li><a href="http://bootfastui.cn">EMC整改与测试</a></li>
                        <li><a href="http://bootfastui.cn">Blog</a></li>
                    </ul>
                </div>
            </div>
            <div class="clear"></div>

        </div>
        <hr class="visible-xs">
        <!-- 右侧 -->
        <div class="col-md-4">
            <div class="right-box">
                <div class="item-right">
                    <img src="http://www.bootfastui.cn/img/2021/0307-6/dianhua@2x.png" alt="" class="ico">
                    <span class="t-tle">400-021-5756</span>
                </div>
                <div class="item-right">
                    <img src="http://www.bootfastui.cn/img/2021/0307-6/dizhi@2x.png" class="ico">
                    <span>中国上海闵行浦江科技园沈杜公路3387号</span>
                </div>
                <div class="item-right">
                    <img src="http://www.bootfastui.cn/img/2021/0307-6/youxiang.png" class="ico">
                    <span>sales@semiware.com</span>
                </div>
                <div class="clear  mar-top30"></div>
                <div class="col-md-5 pad-pc-right0 col-md-offset-2 col-xs-6">
                    <div class="pad-pc-left30">
                        <img src="http://bootfastui.cn/Public/images/erweima.png" alt="" width="100%">
                        <p class="text-center line30 f16">Website</p>
                    </div>
                </div>
                <div class="col-md-5 pad-pc-right0 col-xs-6">
                    <div class="pad-pc-left30">
                        <img src="http://bootfastui.cn/Public/images/erweima.png" alt="" width="100%">
                        <p class=" f16 line30 text-center">微信公众号</p>
                    </div>
                </div>
                <div class="clear"></div>

            </div>
        </div>
        <div class="clear"></div>
        <div class="copyright text-right mar-top10">
            <span><a href="http://bootfastui.cn">沪ICP备20008549号-1&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a></span>
            <span><a
                    href="http://bootfastui.cn">沪公网安备31011202012331号</a></span>
        </div>
    </div>
</div>
    <div class="clear"></div>
</footer>
<div class="clear"></div>