底部关于我们美化代码
效果图
后台底部模块设置
底部第一层背景颜色1a1a1a
底部第二层背景颜色232323
底部背景图片请上传
头部HTML标签（新建了个icon库存储新图标）
<script type="text/javascript" src="//at.alicdn.com/t/font_3133075_wsm2usco9v.js"></script>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_3133075_wsm2usco9v.css" />外观小工具底部加上自定义html代码
<div class="sbkk-yj">
<p> <span>LMTD.CN</span> 每天学习五分钟 一年萌新变大神
<br>
<br>
</p>
</div>
<div class="ffooter-menus">
<div class="container12">
<div class="ewms fr">
<div class="items">
<ul class="clearfix">
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-remen"></use></svg>
<h4>热门推荐</h4>
</div>
<div class="ewm-content ewn-hide ewm-weibo">
<div class="ewm-main clearfix">
<div class="items">
<div class="item"> <a href="https://lmtd.cn/down" target="_blank"><span class="item-ico">@</span><h2>热门下载</h2><h4>优质素材新鲜呈上</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/cnjz" target="_blank"><span class="item-ico">@</span><h2>技术教程</h2><h4>技术大咖在线解答</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/links" target="_blank"><span class="item-ico">@</span><h2>B2案例</h2><h4>系统强大自然用的人多</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/vips" target="_blank"><span class="item-ico">@</span><h2>升级VIP</h2><h4>全站资源任意看随便下</h4></a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-weixin"></use></svg>
<h4>联系站长</h4>
</div>
<div class="ewm-content ewn-hide ewm-douyin">
<div class="ewm-main clearfix">
<div class="ewm-douyin-1 fl">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/gzh.jpg);"></i>
</div>
<h4>微信公众号</h4>
<h5>名称：乱码天地</h5>
</div>
<div class="ewm-douyin-2 fr">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/wx.jpg);"></i>
</div>
<h4>站长微信</h4>
<h5>昵称：剑去了无痕</h5>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href="#bd-qq"></use></svg>
<h4>站长QQ</h4>
</div>
<div class="ewm-content ewn-hide ewm-wechat">
<div class="ewm-main clearfix">
<div class="thumb-div fl"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/qq.jpg);"></i>
</div>
<h4>每天学习五分钟</h4>
<h4>一年萌新变大神</h4>
<h4> <span> <i class="icon-wechat-1"></i> 扫码加好友 </span></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div> <div class="sbkk-yj">
<p> <span>LMTD.CN</span> 每天学习五分钟 一年萌新变大神
<br>
<br>
</p>
</div>
<div class="ffooter-menus">
<div class="container12">
<div class="ewms fr">
<div class="items">
<ul class="clearfix">
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href=""></use></svg>
<h4>热门推荐</h4>
</div>
<div class="ewm-content ewn-hide ewm-weibo">
<div class="ewm-main clearfix">
<div class="items">
<div class="item"> <a href="https://lmtd.cn/down" target="_blank"><span class="item-ico">@</span><h2>热门下载</h2><h4>优质素材新鲜呈上</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/cnjz" target="_blank"><span class="item-ico">@</span><h2>技术教程</h2><h4>技术大咖在线解答</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/links" target="_blank"><span class="item-ico">@</span><h2>B2案例</h2><h4>系统强大自然用的人多</h4></a>
</div>
<div class="item"> <a href="https://lmtd.cn/vips" target="_blank"><span class="item-ico">@</span><h2>升级VIP</h2><h4>全站资源任意看随便下</h4></a>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href=""></use></svg>
<h4>联系站长</h4>
</div>
<div class="ewm-content ewn-hide ewm-douyin">
<div class="ewm-main clearfix">
<div class="ewm-douyin-1 fl">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/gzh.jpg);"></i>
</div>
<h4>微信公众号</h4>
<h5>名称：乱码天地</h5>
</div>
<div class="ewm-douyin-2 fr">
<div class="thumb-div"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/wx.jpg);"></i>
</div>
<h4>站长微信</h4>
<h5>昵称：剑去了无痕</h5>
</div>
</div>
</div>
</li>
<li>
<div class="ico"> <svg class="icon" aria-hidden="true"><use xlink:href=""></use></svg>
<h4>站长QQ</h4>
</div>
<div class="ewm-content ewn-hide ewm-wechat">
<div class="ewm-main clearfix">
<div class="thumb-div fl"> <i class="thumbs" style="background-image:url(https://lmtd.cn/pic/qq.jpg);"></i>
</div>
<h4>每天学习五分钟</h4>
<h4>一年萌新变大神</h4>
<h4> <span> <i class="icon-wechat-1"></i> 扫码加好友 </span></h4>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>子主题style.css
/*底部字母闪动开始*/
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.sbkk-yj {
text-align:center
}
.sbkk-yj p {
text-transform:uppercase;
letter-spacing: .45em;
display:inline-block;
margin-left: 2px;
}
.sbkk-yj p span {
font:700 4em/1"Oswald", sans-serif;
letter-spacing:0;
padding:.25em 0 .325em;
display:block;
margin:0 auto;
text-shadow:0 0 80px rgba(255, 255, 255, .5);
background:url(https://lmtd.cn/pic/sbkk.png) repeat-y;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:aitf 80s linear infinite;
-webkit-transform:translate3d(0, 0, 0);
-webkit-backface-visibility:hidden
}
@-webkit-keyframes aitf {
0% {
background-position:0 50%
}
100% {
background-position:100% 50%
}
}
.ffooter-menus {
display:none
}
@media (min-width:1024px) {
.ffooter-menus {
display:block
}
}
.ffooter-menus a {
color:#676b6f
}
.ffooter-menus a:hover {
color:#fff
}
.ffooter-menus .menus .menu-div.menu-1, .footer-menus .menus .menu-div.menu-2 {
display:block
}
@media (min-width:1250px) {
.ffooter-menus .menus .menu-div {
width:33.3333%
}
.ffooter-menus .menus .menu-div.menu-3 {
display:block
}
}
@media (min-width:1330px) {
.ffooter-menus .menus .menu-div {
width:25%;
display:block
}
}
.ffooter-menus .menus .menu-div h2 {
font-size:18px;
color:#c6c7c9;
margin-bottom:20px;
font-weight:400
}
.ffooter-menus .menus .menu-div li {
line-height:1.5;
margin-bottom:10px
}
.ffooter-menus .ewms {
width:278px;
position:relative;
color:#949498;
margin:0 auto;
}
.ffooter-menus .ewms .like {
text-align:center
}
.ffooter-menus .ewms .like strong {
color:#ff7300;
font-size:54px;
line-height:1.24;
font-family:Impact;
font-weight:400
}
.ffooter-menus .ewms .like h3 {
font-size:14px;
font-weight:400;
line-height:1.1
}
.ffooter-menus .ewms li {
float:left;
width:33.3333%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:inline;
position:relative;
line-height:1.3;
margin-top:-8px
}
.ffooter-menus .ewms li:hover .ewm-content {
visibility:visible;
bottom:100%;
opacity:1;
border-radius: 8px;
}
.ffooter-menus .ewms .ico {
font-size:46px;
cursor:pointer;
-webkit-transition:all .2s;
-o-transition:all .2s;
transition:all .2s
}
.ffooter-menus .ewms .ico:hover {
color:#fff
}
.ffooter-menus .ewms .ico i {
display:block
}
.ffooter-menus .ewms h4 {
font-size:12px;
font-weight:400;
margin:0
}
.ffooter-menus .ewms .ewm-content {
position:absolute;
left:50%;
bottom:200%;
background:#1d1f20;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
box-shadow:0 16px 32px 0 rgba(0, 0, 0, .1);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:330px;
-webkit-transform:translate(-50%);
-ms-transform:translate(-50%);
transform:translate(-50%)
}
.ffooter-menus .ewms .ewm-content:before {
content:"";
display:block;
position:absolute;
margin-left:-6px;
left:50%;
top:100%;
width:0;
height:0;
border-left:6px solid rgba(0, 0, 0, 0);
border-right:6px solid rgba(0, 0, 0, 0);
border-top:6px solid #fff
}
@media (min-width:1024px) {
.ffooter-menus .ewms .ewm-content.ewm-douyin, .ffooter-menus .ewms .ewm-content.ewm-wechat {
left:auto;
right:0;
-webkit-transform:translate(0);
-ms-transform:translate(0);
transform:translate(0)
}
.ffooter-menus .ewms .ewm-content.ewm-douyin:before, .ffooter-menus .ewms .ewm-content.ewm-wechat:before {
left:auto;
right:30px
}
.ffooter-menus .ewms .ewm-content.ewm-douyin {
-webkit-transform:translate(70px);
-ms-transform:translate(70px);
transform:translate(70px)
}
.ffooter-menus .ewms .ewm-content.ewm-douyin:before {
right:100px
}
}
.ffooter-menus .ewms .ewm-content.ewm-douyin {
width:400px
}
.ffooter-menus .ewms .ewm-content.ewm-douyin .ewm-main .thumb-div {
width:160px
}
.ffooter-menus .ewms .ewm-main {
padding:40px 25px 40px 30px;
text-align:left
}
.ffooter-menus .ewms .ewm-main .fl {
float:left
}
.ffooter-menus .ewms .ewm-main .fr {
float:right
}
.ffooter-menus .ewms .ewm-main .thumb-div {
width:120px;
margin-right:30px;
background:#fff
}
.ffooter-menus .ewms .ewm-main .thumbs {
padding-top:100%
}
.ffooter-menus .ewms .ewm-main h4 {
font-size:14px;
font-weight:400;
color:#f5f5f5;
line-height:1.714;
margin-top:4px
}
.ffooter-menus .ewms .ewm-main h4 span {
color:#3860f4
}
.ffooter-menus .ewms .ewm-main a {
color:#ff3401
}
.ffooter-menus .ewms .ewm-main a:hover {
color:#ff7300
}
.ffooter-menus .ewms .ewm-main h5 {
font-weight:400;
font-size:12px;
color:#888
}
.ffooter-menus .ewms .ewm-douyin .ewm-main {
padding-left:0;
padding-right:0;
text-align:center
}
.ffooter-menus .ewms .ewm-douyin .ewm-main .thumb-div {
margin:0 auto
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1, .ffooter-menus .ewms .ewm-douyin .ewm-douyin-2 {
width:50%
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1 {
position:relative
}
.ffooter-menus .ewms .ewm-douyin .ewm-douyin-1:after {
content:"";
display:block;
position:absolute;
right:0;
top:10%;
width:1px;
height:80%;
background:#1d1f20
}
.ffooter-menus .ewms .ewm-weibo {
width:520px;
-webkit-transform:translate(-340px);
-ms-transform:translate(-340px);
transform:translate(-340px)
}
.ffooter-menus .ewms .ewm-weibo:before {
left:340px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main {
padding:20px 20px 0
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items {
overflow:hidden;
margin:0 -10px;
margin-left: 31px;
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item {
float:left;
width:45%;
padding:0 10px 20px
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a {
display:block;
background:#333638;
-webkit-border-radius:4px;
border-radius:4px;
position:relative;
padding:18px 16px 18px 44px;
letter-spacing:0;
color:#f5f5f5
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a .item-ico {
display:block;
position:absolute;
left:20px;
top:18px;
background:#9199a1;
color:#fff;
font-size:12px;
font-family:ArialMT, Arial;
width:18px;
height:18px;
text-align:center;
line-height:18px;
-webkit-border-radius:100%;
border-radius:100%
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h2 {
font-size:14px;
font-weight:400;
margin-bottom:6px;
height:1.5em;
overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a h4 {
font-size:12px;
font-weight:400;
color:#b2b2b2;
height:1.5em;
overflow:hidden
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover {
background:#3860f4;
color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover h4 {
color:#fff
}
.ffooter-menus .ewms .ewm-weibo .ewm-main .items .item a:hover .item-ico {
background:#fff;
color:#3860f4
}
.ffooter-menus .status {
text-align:center;
color:#949498
}
.ffooter-menus .status h2 {
font-family:Impact;
font-weight:400;
font-size:54px;
color:#ff7300;
letter-spacing:0
}
.ffooter-menus .status h3 {
font-weight:400;
font-size:14px
}
.ffooter-menus .ewms ul {
text-align:center
}
@media (min-width:768px) {
.container12 {
overflow:visible;
max-width:1330px
}
}
.container12:after, .container12:before {
content:"";
height:0;
line-height:0;
display:block;
visibility:none;
clear:both
}
.clearfix:after, .clearfix:before {
content:"";
height:0;
line-height:0;
display:block;
visibility:none;
clear:both
}
.thumbs {
display:block;
width:100%;
height:0;
padding-top:66.7%;
background-position:50%;
background-repeat:no-repeat;
-webkit-background-size:cover;
background-size:cover;
background-color:rgba(0, 0, 0, 0);
position:relative;
overflow:hidden
}
.thumbs, a, a:active, a:visited {
-webkit-transition:all .2s;
-o-transition:all .2s;
transition:all .2s
}
.ewn-hide, .show {
-webkit-transition:all .2s;
-o-transition:all .2s;
transition:all .2s
}
.ewn-hide {
visibility:hidden;
opacity:0
}
[class^=sdk-]:before, [class*=" sdk-"]:before {
font-family:"lib";
font-style:normal;
font-weight:400;
speak:none;
display:inline-block;
text-decoration:inherit;
width:1em;
margin-right:.2em;
text-align:center;
font-variant:normal;
text-transform:none;
line-height:1em;
margin-left:.2em;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.sdk-remen:before {
content: "\e6be";
}
.sdk-lianxi:before {
content: "\e66f";
}
.sdk-Qqun:before {
content: "\e6ac";
}
/*底部字母闪动结束*/声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
7b2美化-添加好看的底部介绍
更多 >
腾讯云开发者
