![图片[1]-网站常用底部布局代码分享-乡野风情](http://www.fuv.cn/wp-content/uploads/2022/12/007WUzxmgy1grsc06rc27j31ab0g8wfp.jpg)
网站常用底部布局代码，稍微修改下，非常漂亮
代码如下：
<!doctype html>
<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.lxh5068.com/">jq22</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">ECJia</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">ECTouch</a>
</dd>
</dl>
<dl class="footer-article-item">
<dt>关于我们</dt>
<dd>
<a href="http://www.lxh5068.com/">公司介绍</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">发展历程</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">团队风采</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">办公环境</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">荣誉资质</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">联系我们</a>
</dd>
</dl>
<dl class="footer-article-item">
<dt>精品教程</dt>
<dd>
<a href="http://www.lxh5068.com/">模板说明</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">jq22教程</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">微商城教程</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">APP教程</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">视频指导</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">问答堂</a>
</dd>
</dl>
<dl class="footer-article-item">
<dt>其他</dt>
<dd>
<a href="http://www.lxh5068.com/">官方论坛</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">服务支持</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">电商大会</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">投诉建议</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">支付方式</a>
</dd>
<dd>
<a href="http://www.lxh5068.com/">站点地图</a>
</dd>
</dl>
<dl class="footer-contact-item">
<h3>联系我们</h3>
<p>400-010-xxx</p>
<div class="footer-ewm">
<img src="http://www.lxh5068.com/tool/weixin/ewm.jpg" >
<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.lxh5068.com/">小辉网络</a>
</li>
<li>
<a href="http://www.lxh5068.com/">移动商城购物</a>
</li>
<li>
<a href="http://www.lxh5068.com/">APP商城开发</a>
</li>
<li>
<a href="http://www.lxh5068.com/">DESTOON B2B</a>
</li>
<li>
<a href="http://www.lxh5068.com/">Linux </a>
</li>
<li>
<a href="http://www.lxh5068.com/">Linux 面板</a>
</li>
<li>
<a href="http://www.lxh5068.com/">Chrome插件</a>
</li>
<li>
<a href="http://www.lxh5068.com/">W3Cschool</a>
</li>
<li>
<a href="http://www.lxh5068.com/">网站</a>
</li>
<li>
<a href="http://www.lxh5068.com/">工具</a>
</li>
<li>
<a href="http://www.lxh5068.com/">移动商城购物</a>
</li>
</ul>
<a href="http://www.lxh5068.com/" class="footer-friend-more">更多 >></a>
</div>
<div class="footer-copyright">
<p>? 2002-2018 (LXH5068.com) 版权所有，并保留所有权利 联系QQ: 550966987</p>
<p>
北京市南开二纬路xxxx号小辉网络工作室
<a href="http://www.fuv.cn/">
<img src="https://www.jq22.com/demo/divcssfooter202002272343/images/icon-footer.png" >鄂公网安备 00088999998888号
</a>
</p>
</div>
</body>
</html>您阅读这篇文章共花了： 0小时00分00秒
付费资源
© 版权声明
感谢您的来访，获取更多精彩文章请收藏本站。
THE END
暂无评论内容