右侧方格小工具的实现:
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>
清除缓存,然后刷新
꧁༺๑收工๑༻꧂
评论前必须登录!
注册