底部关于我们美化代码

底部关于我们美化代码


效果图

底部关于我们美化代码

后台底部模块设置

底部第一层背景颜色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>

 

子主题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";
}
/*底部字母闪动结束*/
声明:本站部分文章来源于网络,如有危害到您的合法权益请联系客服

给TA打赏
共{{data.count}}人
人已打赏
7b2WP美化

分享发文章可以用得上的几个css样式和短代码

2022-5-4 18:26:14

7b2

7b2主题评论气泡

2022-5-5 18:41:05

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索