Dux改造广告小工具

右侧方格小工具的实现：

DUX本身的小工具”DUX-广告”直接稍做改动即可：

首先，在main.css的末尾新增如下样式:

.ebox{overflow:hidden;font-size:12px;text-align:center;background-color:#fff}
.ebox-i{position:relative;float:left;width:50%;padding:15px 15px 20px;background-color:#fff;color:#777;border-bottom:1px dashed #ddd}
.ebox-01,.ebox-03{border-right:1px dashed #ddd}
.ebox-i:hover{background-color:#F9F9F9}
.ebox-100{width:100%;margin-bottom:0;border-bottom:none}
.ebox-i p{height:36px;overflow:hidden;color:#bbb}

在后台小工具中添加”DUX-广告”加入以下代码实现右侧四方格的效果。

<div class="item">
  <ul class="ebox">
    <li class="ebox-i ebox-01">
      <h4>SpringBoot</h4>
      <p>Spring Boot是用来简化新Spring应用的初始搭建以及开发过程</p>
      <a class="btn btn-primary btn-sm" target="_blank" href="https://www.liupeng.mobi">专题</a>
      <a class="btn btn-default btn-sm" target="_blank" href="https://www.liupeng.mobi">查看演示</a></li>
    <li class="ebox-i ebox-02">
      <h4>Thymeleaf</h4>
      <p>新一代的HTML5模版引擎</p>
      <a class="btn btn-primary btn-sm" target="_blank" href="https://www.liupeng.mobi">专题</a>
      <a class="btn btn-default btn-sm" target="_blank" href="https://www.liupeng.mobi">查看演示</a></li>
    <li class="ebox-i ebox-03">
      <h4>Hadoop</h4>
      <p>分布式存储计算服务</p>
      <a class="btn btn-primary btn-sm" target="_blank" href="https://www.liupeng.mobi">专题</a></li>
    <li class="ebox-i ebox-04">
      <h4>Linux</h4>
      <p>非常稳定的服务器操作系统</p>
      <a class="btn btn-primary btn-sm" target="_blank" href="https://www.liupeng.mobi">专题</a></li>
    <li class="ebox-i ebox-100">
      <h4>码农志</h4>
      <p>专注分享码农成长学习的技术博客</p>
      <a class="btn btn-danger btn-sm" target="_blank" href="https://www.liupeng.mobi">点击进入</a>
      <!-- <a class="btn btn-default btn-sm" href="https://tvzr.com/">咨询排期</a> --></li>
  </ul>
</div>

清除缓存,然后刷新
꧁༺๑收工๑༻꧂