b2主题美化教程

10

弹窗公告美化

放入主题的style.css文件中，或自行引入。

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.gg-box .modal-content {
width: 28rem;
overflow: hidden
margin-top: 0;
}
.gg-box-title .gg-title {
width: 100%;
text-align: center;
padding: 0!important;
}
.modal-content .gg-box-title h2 {
font-size: 22px;
margin-bottom: 0;
text-align: center;
font-weight:bold;
}
.gg-box-title .gg-title span {
font-size: 14px;
color: rgba(255, 255, 255, 0.5);
}
.title-bg {
border: 0;
}
.modal-content .gg-title {
padding: 20px 30px 0px 30px;
}
.modal-content .gg-title a {
font-size: 16px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
display: block;
font-family: Arial;
text-decoration:none
}
.modal-content .gg-desc {
padding: 20px 30px;
font-size: 14px;
letter-spacing: .5px;
padding-bottom: 0;
}
.modal-content .gg-desc p {
color: #909399;
font-family: Arial;
background: #f8f8f8;
padding: 20px;
line-height: 24px;
}
.gg-button a {
border: 0;
display: inline-block;
padding: 8px 12px;
font-size: 14px;
line-height: 20px;
letter-spacing: .5px;
background-color: #206aff;
background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
background-image: -webkit-linear-gradient(left, #006eff, #13adff);
background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
background-image: linear-gradient(90deg, #006eff, #13adff);
-webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
}

导航菜单添加彩色渐变的文字

以下代码放到菜单

<span class="meihua">你的菜单名称</span>

以下代码放入css样式

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.meihua {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@media (max-width:768px) {
span.ua-info {
display: none
}
.comment-author .user-title {
width: 40% !important
}
}
.comment-author .user-title {
font-size: 13px;
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}
@keyframes text {
0% {
background-position: 0 0
}
100% {
background-position: -150% 0
}
}
.b2-qr-code-fill {
background: linear-gradient(90deg, rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 33.3%, rgba(252, 176, 69, 1) 66.6%, rgba(131, 58, 180, 1) 100%);
-webkit-background-clip: text;
color: transparent !important;
background-size: 300% 100%;
animation: text 4s infinite linear
}

文章加载更多BUTTON美化

CSS代码：

颜色可自定义

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.post-list .load-more .post-load-button:hover {
    transform: translateY(-3px);
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
    background-image: -webkit-linear-gradient(left, #006eff, #13adff);
    background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
    background-image: linear-gradient( 
90deg, #006eff, #13adff);
    -webkit-box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    box-shadow: 0 5px 10px 0 rgb(16 110 253 / 30%);
    color: #fff!important;
}

7b2主题打赏按钮自定义颜色

css代码：

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

#TA-con{/*修改按钮颜色*/
    background-color: #3478F7;
}
#TA-con:hover {/*修改按钮颜色——鼠标移动至按钮*/
    background-color: #3478F7;
}
#orange-mask path{/*修改动态的条颜色*/
    stroke: #f7ed34;
}
#mask path{/*修改条颜色 —— 长条*/
    stroke: rgb(52 120 247);
}
#mask ellipse{/*修改条颜色 —— 点*/
    fill: rgb(52 120 247);
}
#mask rect{/*修改条颜色 —— 短条*/
    fill: rgb(52 120 247);
}

文章底部增加声明

将html代码放入B2主题设置->模块管理 ->文章内页 ->文章低部广告位代码

html代码：

<fieldset style="border: 1px dashed #e8b235; padding: 10px; border-radius: 5px; line-height: 2em; font-size: 12px; color: #bdbdbd; text-align: center">
<legend style="color: #ffffff; width: 30%; text-align: center; background-color: #e8b235; border-radius: 5px;" align="center">声明</legend> 本站上的部份代码及教程来源于互联网，仅供网友学习交流，若您喜欢本文可<b>附上原文链接</b>随意转载。无意侵害您的权益，请发送邮件至 <a href="mailto:邮箱地址">邮箱地址</a> 或点击右侧 <i class="b2font b2-mail-send-line"></i> 私信：鹿泽笔记 反馈，我们将尽快处理。
</fieldset>

广告位

主题设置-首页-添加模块-调用内容：自定义

<div class="n_banner_inner">
  <div class="img-info">!
    <div class="info">也想出现在这里？
      <a rel="nofollow noopener noreferrer" href="转跳Url" target="_blank">联系我们</a>吧</div>
  </div>
  <a href="前往Url" target="_blank" rel="noopener noreferrer">
    <div class="Banner-adTag">广告</div>
    <img class="tirr" src="图片Url" alt="信息">
  </a>
</div>
<style>
    /*定位*/
    .n_banner_inner {
        position: relative;
    }

    /*提示信息*/
    .n_banner_inner .img-info {
        position: absolute;
        right: 12px;
        top: 9px;
        padding: 0;
        text-align: right;
        color: #fff;
    }

    .n_banner_inner .img-info i {
        position: relative;
        display: inline-block;
        color: #007bff;
        font-size: 20px;
        line-height: 19px;
        text-align: center;
        z-index: 9;
        font-style: inherit;
    }

    .n_banner_inner .img-info .info {
        position: absolute;
        bottom: 5px;
        right: 0;
        width: 0;
        padding: 5px 0;
        overflow: hidden;
        background: #007bff;
        border-radius: 10px;
        line-height: 10px;
        text-align: center;
        font-size: 10px;
        color: #fff;
        white-space: nowrap;

        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
    }

    .n_banner_inner .img-info .info a {
        color: #fff;
    }

    .n_banner_inner .tirr {
        max-width: 100%;
        height: auto;
        transition: 0.5s;
        border-radius: 5px;
    }

    /*触发Hover*/
    .n_banner_inner:hover .info {
        width: auto;
        padding: 5px 23px 5px 12px;
        -webkit-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -moz-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -ms-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        -o-transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        transition: all 0.2s cubic-bezier(0, 0.34, 0.71, 1.26) !important;
        font-size: 12px;
        z-index: 1;
    }

    .n_banner_inner img:hover {
        filter: brightness(50%);
    }

    /*出发声明hover*/
    .n_banner_inner .info:hover a {
        color: red;
        text-decoration: none;
    }

    /*左下角广告*/
    .n_banner_inner .Banner-adTag {
        position: absolute;
        left: 5px;
        bottom: 5px;
        width: 50px;
        border: 1px solid #ebebeb;
        border-radius: 3px;
        color: #ebebeb;
        opacity: 0.5;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
    }

    @media screen and (max-width: 768px) {
        .n_banner_inner .img-info {
            display: none;
        }
    }
</style>

手机左侧菜单

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

@media screen and (max-width: 768px){
.logo-left .mobile-box {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url();/*背景图片*/
    opacity: 0.95!important;
    width: 80%!important;/*宽度*/
}

.top-menu ul li.depth-0 > a, .logo-top .top-menu ul li.depth-0 > a {
    background: #9a9a9a26!important;
    border-radius: 12px;
}

.sub-menu {
    background: #ffffff00;
    backdrop-filter: blur(0px);
}

.top-menu-ul>li.depth-0 > a i.b2-arrow-down-s-line {
    background: #ffffff00;
}

.header-tools {
    background: none!important;
    background-image: none!important;
}

}

PC区块菜单

主题设置-首页-添加模块-调用内容：自定义

<div class="home-section-division header_fixed_from_here">
  <div class="containers">
    <div class="home-division">
    <ul>
      <li><div class="item item_3"><a href="#">
      <div class="item-thumb"><i class="b2font b2-landscape-line"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span> </h3>
      <p>正版原创设计作品集</p>
      </a></div></li>
      <li><div class="item item_1"><a href="/vips">
      <div class="item-thumb"><i class="b2font b2-profile-fill"></i> </div>
      <h3>VIP会员<span class="go">go<i class="ico-go"></i></span></h3>
      <p>高级资源抢先使用</p>
      </a></div></li>
      <li><div class="item item_2"><a href="#">
      <div class="item-thumb"><i class="b2font b2-bar-chart-fill"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
      <p>玩转潮流，体验快乐</p>
      </a></div></li>
      <li class="li_4"><div class="item item_4"><a href="#">
        <div class="item-thumb"><i class="b2font b2-heart-pulse-line"></i> </div>
      <h3>菜单<span class="go">go<i class="ico-go"></i></span></h3>
      <p>品牌聚集地</p>
      </a></div></li>
    </ul>
    </div>
  </div>
  </div>

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

.item-thumb i{
    font-size: 50px;
}
    
.home-section-division {
    background: #fff;
}

.containers {
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    zoom: 1;
}

@media (min-width: 768px) {
   .containers {
      overflow: visible;
    max-width: 1280px;
    }
}
.home-section-division .home-division {
    overflow: hidden;
}

.home-section-division .home-division a {
    color: #005aff;
    display: block;
    padding: 20px 0 10px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    text-align: center
}

@media (min-width:768px) {
    .home-section-division .home-division a {
        text-align: left;
        padding: 22px 10px 30px 50px
    }

}

@media (min-width:1330px) {
    .home-section-division .home-division a {
        /*padding-right: 60px;*/
        padding-left: 106px
    }
     
}

.home-section-division .home-division a:hover .item-thumb {
    color: #3385ff
}

.home-section-division .home-division a:hover .icon-inspiration-nav-1:before {
    content: "\e82c"
}

.home-section-division .home-division a:hover .icon-tool-nav-1:before {
    content: "\e82a"
}

.home-section-division .home-division a:hover .icon-course-nav-1:before {
    content: "\e82e"
}

.home-section-division .home-division ul {
    margin: 0 -14px;
    overflow: hidden
}

.home-section-division .home-division li {
    float: left;
    line-height: 1;
    width: 25%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0px 0 4px;
}

.home-section-division .home-division li h3 {
    font-size: 13px;
    line-height: 1;
    margin: 10px 0;
    color: #005aff;
    font-weight: 400
}

@media (min-width:768px) {
    .home-section-division .home-division li h3 {
        font-size: 18px;
        font-weight: 700
    }
}

.home-section-division .home-division li h3 .go {
    background: #3385ff;
    display: none;
    height: 20px;
    line-height: 20px;
    padding: 0px 0px 3px 8px;
    -webkit-border-radius: 14px;
    border-radius: 14px;
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    vertical-align: top
}

@media (min-width:1024px) {
    .home-section-division .home-division li h3 .go {
        display: inline-block
    }
}

.home-section-division .home-division li h3 .go i {
    vertical-align: middle;
    margin: -2px 3px 0
}

.home-section-division .home-division li p {
    font-size: 13px;
    color: #9a9a9a;
    display: none
}

@media (min-width:1024px) {
    .home-section-division .home-division li p {
        display: block
    }
}

.home-section-division .home-division li .item-thumb {
    font-size: 28px
}

@media (max-width:1023px) {
    .home-section-division .home-division li .item-thumb {
        color: #3385ff
    }
}

@media (min-width:768px) {
    .home-section-division .home-division li .item-thumb {
        position: absolute;
        left: 5px;
        top: 20px;
        font-size: 40px
    }
}

@media (min-width:1330px) {
    .home-section-division .home-division li .item-thumb {
        top: 30px;
        left: 50px
    }
}

@media (min-width:1024px) {
    .home-section-division .home-division li.li_4 .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }

    .home-section-division .home-division li.li_4 .item .item-thumb,.home-section-division .home-division li.li_4 .item h3 {
        color: #3385ff
    }

    .home-section-division .home-division li.li_4 .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }

    .home-section-division .home-division li.li_4 .item:hover h3,.home-section-division .home-division li.li_4 .item:hover i,.home-section-division .home-division li.li_4 .item:hover p {
        color: #fff
    }
    
    
    .home-section-division .home-division li .item {
/*        background: #f3f8ff;*/
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #3385ff
    }

    .home-section-division .home-division li .item .item-thumb,.home-section-division .home-division li .item h3 {
        color: #3385ff
    }

    .home-section-division .home-division li .item:hover {
        background: #3385ff;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: #fff
    }

    .home-section-division .home-division li .item:hover h3,.home-section-division .home-division li .item:hover i,.home-section-division .home-division li .item:hover p {
        color: #fff
    }
}

首页菜单（手机版）

主题设置-首页-添加模块-调用内容：自定义

<div class="mrxu_link">
  <dl>
    <dd class="xu_link_1"><a href="#"><i></i>
        <p>海报</p>
      </a></dd>
    <dd class="xu_link_2"><a href="#"><i></i>
        <p>插画</p>
      </a></dd>
    <dd class="xu_link_3"><a href="#"><i></i>
        <p>电商</p>
      </a></dd>
    <dd class="xu_link_4"><a href="#"><i></i>
        <p>品牌</p>
      </a></dd>
    <dd class="xu_link_5"><a href="#"><i></i>
        <p>logo</p>
      </a></dd>
    <dd class="xu_link_6"><a href="#"><i></i>
        <p>包装</p>
      </a></dd>
    <dd class="xu_link_7"><a href="#"><i></i>
        <p>视频</p>
      </a></dd>
    <dd class="xu_link_8"><a href="#"><i></i>
        <p>画册</p>
      </a></dd>
    <dd class="xu_link_9"><a href="#"><i></i>
        <p>ip</p>
      </a></dd>
    <dd class="xu_link_10"><a href="#"><i></i>
        <p>全部</p>
      </a></dd>
  </dl>
</div>

CSS样式添加至主题根目录的style.css或外观-自定义-额外CSS

   .mrxu_link {
     border-radius: 17px;
     box-shadow: 1px 0px 7px #94cbfb66;
      padding: 5px;
    }
    .mrxu_lin1k dl {
      box-shadow: 1px 1px 1px #e7f4ff;
      border-radius: 12px;
      background-color: #fff;
      margin-top: 10px;
      margin-bottom: 10px;
     border-radius: 17px;
    }
    .mrxu_link dl dd {
      display: inline-block;
      width: 18.5%;
      margin-bottom: 6px;
      margin-top: 6px;
    }
    .mrxu_link dl dd a {
      display: block;
    }
    .mrxu_link dl dd a i {
      display: block;
      width: 45px;
      height: 45px;
      margin: 0 auto 5px;
    }
    .mrxu_link dl dd a p {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: #666;
      text-align: center;
      overflow: hidden;
    }
    .mrxu_link dl dd.xu_link_1 i {
      background: url(image/10019.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_2 i {
      background: url(image/100255.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_3 i {
      background: url(image/10028.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_4 i {
      background: url(image/10018.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_5 i {
      background: url(image/10022.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_6 i {
      background: url(image/10021.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_7 i {
      background: url(image/10025.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_8 i {
      background: url(image/zx.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_9 i {
      background: url(image/10018.png) center no-repeat;
      background-size: 45px;
    }
    .mrxu_link dl dd.xu_link_10 i {
      background: url(image/10020.png) center no-repeat;
      background-size: 45px;
    }
.justify a img{
        float: left;
}
.load-more.box-in.box.b2-radius.mg-t {
    background: none;
}
.post-list .load-more .post-load-button {
    width: auto;
    border: 0;
    transition: all .3s;
    padding: 12px 40px;
    font-size: 15px;
    letter-spacing: .5px;
    background-color: var(--primary-color);
    background-image: -webkit-gradient(linear, left top, right top, from(#006eff), to(#13adff));
    background-image: -webkit-linear-gradient(left, #006eff, #13adff);
    background-image: -o-linear-gradient(left, #006eff 0, #13adff 100%);
    background-image: linear-gradient(90deg, #006eff, #13adff);
    -webkit-box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
    box-shadow: 0 5px 10px 0 rgba(16, 110, 253, .3);
    color: #fff!important;
}

.mrxu_link a {
    color: inherit;
    text-decoration: none;
    vertical-align: top;
}

修改文章的随机阅读数量

打开b2/Modules/Common/Post.php文件的第553行上方加入下方代码：

$viewa = rand(4000,8000);

代码意思是：随机在4000-8000里面输出一个数（例如：5653），最低4000，最高8000，这个最低和最高自定义。

首页搜索模块

主题设置-首页-添加模块-调用内容：自定义

<div class="page-section-content">
  <div class="page-section-background">
  </div>
  <div class="n-box">
    <div class="n-text">
      <h1 class="index-title">
        <!--标题--> 搜索标题
      </h1>
      <h2 class="index-subtitle">
        <!--副标题--> //搜索一下会有你想要的 //
      </h2>
    </div>
    <div class="n-search">
      <form method="get" id="searchform">
        <div class="container">
          <div id="searchs">
            <input type="text" placeholder="搜索是提高效率的开始" name="s" id="s" class="searchInput" autocomplete="off">
            <input class="n-button" type="submit" value="搜索">
          </div>
        </div>
      </form>
    </div>
    <div class="remensousuo">
      <div class="sousuocenter">
        <span>热门搜索：</span>
        <ul>
          <li><a href="#" class="shejipsd">我是菜单</a></li>
          <li><a href="#" class="shejixd">我是菜单</a></li>
          <li><a href="#" class="shejifigma">我是菜单</a></li>
          <li><a href="#" class="shejisketch">我是菜单</a></li>
          <li><a href="#" class="shejisketch">我是菜单</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

样式CSS代码放入主题目录的style.css或 外观-自定义-额外CSS

.page-section-content {
    height: 366px;
    margin: -80px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-section-content {
    /* background-color: #fcfcfc; */
    background-image: url(图片url链接地址);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    color: #fff;
}

.page-section-background {
    height: 250px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
    background-color: inherit;
    background-size: 480px;
    background-blend-mode: overlay;
}


.n-box {
    padding: 20px;
    position: absolute;
    z-index: 1;
}
.n-text {
    text-align: center;
}
.n-text .index-title {
    font-size: 36px;
}
.n-text .index-subtitle {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 24px;
    text-align: center;
}

.n-search {
    text-align: center;
}

.container {
    margin: 30px auto -37px auto;
    width: 900px;
    text-align: center;
    position: relative;
}

.container:after, .container:before {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}

.container:after, .container:before {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: none;
    clear: both;
}

#searchs input[type="text"] {
    overflow: hidden;
    margin: 0 auto;
    padding-left: 19px;
    width: 600px;
    height: 48px;
    border: 1px solid #ffffff14;
    border-radius: 4px;
    background: #ffffff38;
    box-shadow: none;
    color: #fff;
    font-size: 14px;
    line-height: 32px;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}
.n-box input[type="text"], .n-box input[type="password"] {
    font-size: 13px;
    min-height: 32px;
    margin: 0;
    padding: 7px 8px;
    outline: none;
    color: #333;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: right center;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 / 8%);
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in 0;
    vertical-align: middle;
}

.n-button {
    position: relative;
    top: 2px;
    right: -6px;
    /* display: block; */
    width: 120px;
    height: 48px;
    border: 1px solid #ffffff14;
    border-radius: 5px;
    background: #504bcc;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

.remensousuo {
    display: flex;
    margin: 0 auto;
    padding-top: 30px;
    height: 80px;
    color: #fff;
    font-size: 14px;
}
.remensousuo .sousuocenter {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    padding: 0 60px;
    height: 40px;
    border-radius: 73px;
    background: none;
    vertical-align: middle;
    text-align: center;
    line-height: 70px;
}

.remensousuo span {
    position: relative;
    top: 1px;
    float: left;
    color: #ffffff;
}

.remensousuo ul {
    float: left;
    margin: 0 auto;
}

.remensousuo li {
    float: left;
    margin-right: 20px;
}

.remensousuo li a {
    float: left;
    padding: 0px 9px;
    color: #ffffff;
}

@media (min-width: 768px){
.container {
    overflow: visible;
    max-width: 1280px;
}
}

👋 感谢您的观看！

© 版权声明
版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505
THE END
产品项目
# WordPress
喜欢就支持一下吧
点赞0 分享
相关推荐
搜索
开启精彩搜索
作者信息
鹿泽的头像 - 鹿泽笔记钻石会员
网站简单翻译插件Translate WordPress with GTranslate
WordPress网站添加恋爱计时小组件（情侣恋爱计时器）的教程
WordPress博客备案版权页脚美化
【广告位】侧边栏增加8+自动轮播广告位，文字版+图片版
WordPress文章内容关键词自动添加标签内链并随机颜色展示的方法
【B2主题美化】文章底添加版权声明

网站出现403 Forbidden错误原因以及解决方法

DuckDuckGo搜索引擎使用方法

欢迎关注[鹿泽笔记]微信公众号

深圳SEO优化技术如何对网站进行调整

seo网页排名下降的原因是什么？

电脑显示器尺寸汇总，显示器屏幕大小一览表

小红书营销策略流量分发逻辑（CES评分流量分发模型）解析

优良中差五个等级是怎么分的？

1688关键词优化四大步骤，1688怎么优化产品排名？

SEO的优化方法和技巧，搜索引擎seo方法是什么？

标签云
谷歌Google SEO视频运营网络营销网络知识网络推广网站建设知识随笔电脑知识电商运营新媒体运营技术教程手机付费推广产品运营个人笔记WordPresswordTypechoSEO优化PythonphpMySQLlinux系统JavaScriptjavaexcel