实现WordPress DUX主题中的主题推荐及前端开发版块的方法很简单,就是直接将DUX本身的小工具”D-广告”直接稍做改动即可。如下图:
/* ebox =========================================== */ .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::after { content:”; position:absolute; right:0; top:0; border-top:20px solid #ECF0F1; border-left:20px solid transparent; } */ .ebox-i p { height:36px; overflow:hidden; color:#bbb; }
主题推荐
后台小工具中添加”D-广告”加入以下代码实现主题推荐。
<div class="item"><ul class="ebox"> <li class="ebox-i ebox-01"> <h4>XIU主题</h4> <p>扁平化、简洁风格,适用于图片展示站点和个人博客</p> <a class="btn btn-primary btn-sm" target="_blank" href="http://www.7585.net.cn/xiu-theme-version-4-1.html">专题</a> <a class="btn btn-default btn-sm" target="_blank" href="http://www.7585.net.cn/">查看演示</a> </li> <li class="ebox-i ebox-02"> <h4>D8主题</h4> <p>大气设计,适用于企业站、行业垂直站、团队站及个人博客</p> <a class="btn btn-primary btn-sm" target="_blank" href="http://www.7585.net.cn/large-front-end-d8-topics-share.html">专题</a> <a class="btn btn-default btn-sm" target="_blank" href="http://www.7585.net.cn/">查看演示</a> </li> <li class="ebox-i ebox-03"> <h4>D-Simple主题</h4> <p>简洁2栏,适用于个人站点及团队博客</p> <a class="btn btn-primary btn-sm" target="_blank" href="http://www.7585.net.cn/">专题</a> </li> <li class="ebox-i ebox-04"> <h4>D7主题</h4> <p>简洁3栏,适用于个人站点及团队博客</p> <a class="btn btn-primary btn-sm" target="_blank" href="http://www.7585.net.cn/">专题</a> </li> <li class="ebox-i ebox-100"> <h4>DUX1.0.2主题(破解版)</h4> <p>网友破解,不保证期安全性,需要的朋友可以下载玩玩,请勿用于商业用途,博主建议大家购买正版.</p> <a class="btn btn-danger btn-sm" target="_blank" href="http://www.7585.net.cn/">主题下载</a> <!-- <a class="btn btn-default btn-sm" href="http://www.7585.net.cn/">咨询排期</a> --> </li> </ul> </div>
前端开发
后台小工具中添加”文本”加入以下代码实现前端开发功能。
<ul class="ebox"> <li class="ebox-i ebox-01"> <h4>前端网址导航</h4> <p>扁平化设计、自定义颜色风格、多功能配置</p> <a class="btn btn-default btn-sm" target="_blank" href="http://banqingdiao.com/navigation">立即使用</a> </li> <li class="ebox-i ebox-02"> <h4>产品-交互-设计</h4> <p>展示各种精彩炫酷的网站设计和用户体验良好的设计元素</p> <a class="btn btn-default btn-sm" target="_blank" href="http://banqingdiao.com/wordpress">开始学习</a> </li> <li class="ebox-i ebox-03"> <h4>名企招聘</h4> <p>名企前端招聘大集合,有能量就释放出来吧</p> <a class="btn btn-default btn-sm" target="_blank" href="http://banqingdiao.com/speak">查看职位</a> </li> <li class="ebox-i ebox-04"> <h4>Sublime Text 3</h4> <p>前端开发利器,全套快捷键和插件推荐</p> <a class="btn btn-default btn-sm" target="_blank" href="http://banqingdiao.com/">开始使用</a> </li> <li class="ebox-i ebox-05 ebox-100"> <h4>前端开发工具箱</h4> <p> <a target="_blank" href="http://banqingdiao.com/tools#qd-jspacker">JS压缩/加密/格式化</a> | <a target="_blank" href="http://banqingdiao.com/tools#qd-csspacker">CSS压缩/格式化</a> | <a target="_blank" href="http://banqingdiao.com/tools#qd-hcodemirror">在线代码高亮</a> </p> <a class="btn btn-default btn-sm" target="_blank" href="http://banqingdiao.com/tools">立即使用</a> </li> </ul>
以上就是关于大前端DUX实现右侧主题推荐及前端开发小工具方法,喜欢自己折腾的盆友可以试试。
继续阅读
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫
评论