网站常用底部布局代码分享

小辉工作室 2021-6-23 17:33 JS网页代码
网站常用底部布局代码，稍微修改下，非常漂亮
代码如下：
<!doctype html>
<!--小辉网 www.61ling.com-->
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>源码演示</title>
<!--代码开始，复制以下到你的网站-->
<style type="text/css">/* 公共样式表css */
html,body {
    color: #333;
    margin: 0;
    height: 100%;
    font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #000;
}

img {
    border: 0;
}

body {
    background: #fff;
    color: #666;
}

html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: #08acee;
}

button {
    outline: 0;
}

img {
    border: 0;
}

button,input,optgroup,select,textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    outline: none;
}

li {
    list-style: none;
}

a {
    color: #666;
}

a:hover {
    color: #eee;
}

.clearfix::after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
}

/* 必要布局样式css */
.footer-box {
    background: #222132;
    overflow: hidden;
    width: 100%;
    color: #888;
    padding: 30px 0 35px;
}

.footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.footer-service {
    margin-right: -26px;
    margin-bottom: 38px;
    padding-left: 69px;
}

.footer-service-item {
    float: left;
    height: 60px;
    width: 240px;
    margin-right: 26px;
}

.footer-service-item i {
    width: 50px;
    height: 45px;
    float: left;
    margin: 17px 17px 0 29px;
    opacity: .8;
    -webkit-transform: scale(.6);
    -moz-transform: scale(.6);
    transform: scale(.6);
}

.footer-service-item span {
    font-size: 16px;
    color: #ccc;
    float: left;
    margin-top: 29px;
}

.footer-icon-001 i {
    background: url(../images/icon-footer01.png) no-repeat center center;
    background-size: contain;
}

.footer-icon-002 i {
    background: url(../images/icon-footer02.png) no-repeat center center;
    background-size: contain;
}

.footer-icon-003 i {
    background: url(../images/icon-footer03.png) no-repeat center center;
    background-size: contain;
}

.footer-icon-004 i {
    background: url(../images/icon-footer04.png) no-repeat center center;
    background-size: contain;
}

.footer-line {
    height: 0;
    display: block;
    clear: both;
    border-bottom: 1px solid #393854;
}

.footer-links {
    padding-top: 40px;
    padding-left: 69px;
}

.footer-article-item {
    width: 209px;
    height: 226px;
    float: left;
    margin-right: 23px;
    line-height: 2;
    font-size: 14px;
}

.footer-article-item dt {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 2;
    font-weight: 300;
}

.footer-article-item dd {
    line-height: 2;
}

.footer-article-item dd a {
    color: #888;
    transition: all .1s;
}

.footer-article-item dd a:hover {
    color: #fff;
}

.footer-contact-item {
    width: 145px;
    float: left;
}

.footer-contact-item h3 {
    font-size: 16px;
    color: #ccc;
    line-height: 2;
    margin-bottom: 10px;
    font-weight: 400;
}

.footer-contact-item p {
    font-size: 22px;
    color: #fff;
    font-family: Arial,"Microsoft Yahei","HanHei SC",PingHei,"PingFang SC","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
    margin-bottom: 15px;
}

.footer-ewm {
    float: left;
    width: 110px;
    margin-right: 18px;
    text-align: center;
}

.footer-ewm img {
    width: 110px;
    height: 110px;
    display: block;
    border: none;
}

.footer-ewm p {
    font-size: 14px;
    color: #ccc;
    margin-top: 12px;
}

.footer-friend {
    width: 1050px;
    height: 20px;
    line-height: 20px;
    margin: 30px auto;
}

.footer-friend-title {
    float: left;
    color: #ccc;
    font-size: 14px;
}

.footer-friend-title-list {
    float: left;
}

.footer-friend-title-list li {
    float: left;
}

.footer-friend-title-list li a {
    color: #888;
    transition: all .1s;
    display: inline-block;
    padding: 0 10px;
    font-size: 14px;
}

.footer-friend-title-list li a:hover {
    color: #fff;
}

.footer-friend-more {
    color: #ccc;
    transition: all .1s;
    float: left;
    font-size: 14px;
}

.footer-copyright {
    line-height: 20px;
    font-size: 14px;
    text-align: center;
}

.footer-copyright p {
    margin-bottom: 9px;
    font-size: 14px;
    color: #888;
}</style> 
 <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="http://www.61ling.com/">jq22</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">ECJia</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">ECTouch</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>关于我们</dt>
                        <dd>
                            <a href="http://www.61ling.com/">公司介绍</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">发展历程</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">团队风采</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">办公环境</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">荣誉资质</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">联系我们</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>精品教程</dt>
                        <dd>
                            <a href="http://www.61ling.com/">模板说明</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">jq22教程</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">微商城教程</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">APP教程</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">视频指导</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">问答堂</a>
                        </dd>
                    </dl>
                    <dl class="footer-article-item">
                        <dt>其他</dt>
                        <dd>
                            <a href="http://www.61ling.com/">官方论坛</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">服务支持</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">电商大会</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">投诉建议</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">支付方式</a>
                        </dd>
                        <dd>
                            <a href="http://www.61ling.com/">站点地图</a>
                        </dd>
                    </dl>
                    <dl class="footer-contact-item">
                        <h3>联系我们</h3>
                        <p>400-010-xxx</p>
                        <div class="footer-ewm">
                            <img src="http://www.61ling.com/tool/weixin/ewm.jpg" 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="http://www.61ling.com/">小辉网络</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">移动商城购物</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">APP商城开发</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">DESTOON B2B</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">Linux  </a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">Linux 面板</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">Chrome插件</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">W3Cschool</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">网站</a>
                        </li>
                        <li>
                            <a href="http://www.61ling.com/">工具</a>
                        </li>
						<li>
                            <a href="http://www.61ling.com/">移动商城购物</a>
                        </li>
						
                    </ul>
                    <a href="http://www.61ling.com/" class="footer-friend-more">更多 >></a>
                </div>
                <div class="footer-copyright">
                    <p>? 2002-2018 (61ling.com) 版权所有，并保留所有权利   联系QQ: 431228450</p>
                    <p>
                        北京市南开二纬路xxxx号小辉网络工作室      
                        <a href="http://www.61ling.com/">
                            <img src="https://www.jq22.com/demo/divcssfooter202002272343/images/icon-footer.png" alt="">鄂公网安备 00088999998888号
                        </a>
                    </p>
                </div>
</body>
</html>
Plugins by frpkj.com
下载地址：
文件名称：网站常用底部布局代码分享
文件大小：4.7KB适用版本：PC
更新日期：2021-06-23作者信息：小辉网络
点击下载 查看演示
温馨提示：如有转载或引用以上内容请将本文链接作为出处标注！百度已收录
免责声明：本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序，请支持正版，购买注册，得到更好的正版服务。侵删请致信E-mail：431228450@qq.com
标签暂无标签
资源分享
评论列表