网站底部信息展示底部版权布局样式代码 - CSS代码 - 源码库资源博客

网站底部信息展示底部版权布局样式代码

作者: 泽以

全网优秀的源码分享库

手机扫码查看

标签:

官网cssHTML

特别声明:本站提供下载的源码大部分为网络收集,使用中不提供任何帮助,如有侵权请联系!

底部展示图

 

用div+css制作的一款简单网站常用底部信息展示布局样式代码,展示了分类菜单、友情链接、公众号二维码和版权信息等,需要的可以直接插入自己的网站底部进行调用,源代码如下:

 

    <body>
        <div class="footer-box">
            <div class="footer-container">
                <div class="footer-service clearfix">
                    <div class="footer-service-item footer-icon-001">
                        <i></i>
                        <span>专注服务于电商领域</span>
                    </div>
                    <div class="footer-service-item footer-icon-002">
                        <i></i>
                        <span>资深电商客服专家</span>
                    </div>
                    <div class="footer-service-item footer-icon-003">
                        <i></i>
                        <span>一对一专属会员经理</span>
                    </div>
                    <div class="footer-service-item footer-icon-004">
                        <i></i>
                        <span>385万用户诚意推荐</span>
                    </div>
                </div>
                <div class="footer-line"></div>
                <div class="footer-links clearfix">
                    <dl class="footer-article-item">
                        <dt>旗下品牌</dt>
                        <dd>
                            <a href="#">ECJia</a>
                        </dd>
                        <dd>
                            <a href="#">ECJia2</a>
                        </dd>
                        <dd>
                            <a href="#">ECTouch</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>关于我们</dt>
                        <dd>
                            <a href="#">公司介绍</a>
                        </dd>
                        <dd>
                            <a href="#">发展历程</a>
                        </dd>
                        <dd>
                            <a href="#">团队风采</a>
                        </dd>
                        <dd>
                            <a href="#">办公环境</a>
                        </dd>
                        <dd>
                            <a href="#">荣誉资质</a>
                        </dd>
                        <dd>
                            <a href="#">联系我们</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>精品教程</dt>
                        <dd>
                            <a href="#">模板说明</a>
                        </dd>
                        <dd>
                            <a href="#">模板教程</a>
                        </dd>
                        <dd>
                            <a href="#">微商城教程</a>
                        </dd>
                        <dd>
                            <a href="#">APP教程</a>
                        </dd>
                        <dd>
                            <a href="#">视频指导</a>
                        </dd>
                        <dd>
                            <a href="#">问答堂</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>其他</dt>
                        <dd>
                            <a href="#">官方论坛</a>
                        </dd>
                        <dd>
                            <a href="#">服务支持</a>
                        </dd>
                        <dd>
                            <a href="#">电商大会</a>
                        </dd>
                        <dd>
                            <a href="#">投诉建议</a>
                        </dd>
                        <dd>
                            <a href="#">支付方式</a>
                        </dd>
                        <dd>
                            <a href="#">站点地图</a>
                        </dd>
                    </dl>
                    <dl class="footer-contact-item">
                        <h3>联系我们</h3>
                        <p>400-010-xxx</p>
                        <div class="footer-ewm">
                            <img src="images/vm.png" alt="">
                            <p>关注微信订阅号</p>
                        </div>
                    </dl>
                </div>
                <div class="footer-friend">
                    <div class="footer-friend-title">友情链接:</div>
                    <ul class="footer-friend-title-list clearfix">
                        <li>
                            <a href="#">素材火</a>
                        </li>
                        <li>
                            <a href="#">移动商城购物</a>
                        </li>
                        <li>
                            <a href="#">APP商城开发</a>
                        </li>
                        <li>
                            <a href="#">DESTOON B2B</a>
                        </li>
                        <li>
                            <a href="#">Linux  </a>
                        </li>
                        <li>
                            <a href="#">Linux 面板</a>
                        </li>
                        <li>
                            <a href="#">Chrome插件</a>
                        </li>
                        <li>
                            <a href="#">W3Cschool</a>
                        </li>
                        <li>
                            <a href="#">网站</a>
                        </li>
                        <li>
                            <a href="#">工具</a>
                        </li>
						<li>
                            <a href="#">移动商城购物</a>
                        </li>
						
                    </ul>
                    <a href="#" class="footer-friend-more">更多 >></a>
                </div>
                <div class="footer-copyright">
                    <p>© 2002-2018 (xxxxx.com) 版权所有,并保留所有权利&nbsp;&nbsp;&nbsp;常年法律顾问: (天津)律师事务所</p>
                    <p>
                        天津市南开二纬路xxxx号劝业场&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#">
                            <img src="images/icon-footer.png" alt="">**网安备 0008899999xxxx号
                        </a>
                    </p>
                </div>
            </div>
        </div>
    </body>
分享到:
打赏
未经允许不得转载:

作者: 泽以, 转载或复制请以 超链接形式 并注明出处 源码库资源博客
原文地址: 《网站底部信息展示底部版权布局样式代码》 发布于2020-3-8

评论

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏