大前端DUX实现右侧主题推荐及前端开发小工具方法

孤狼
孤狼
孤狼
171
文章
118
评论
2015年9月20日12:12:33
评论
8,861 2972字阅读9分54秒

实现WordPress DUX主题中的主题推荐及前端开发版块的方法很简单,就是直接将DUX本身的小工具”D-广告”直接稍做改动即可。如下图:
大前端DUX实现右侧主题推荐及前端开发小工具方法大前端DUX实现右侧主题推荐及前端开发小工具方法

/* 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实现右侧主题推荐及前端开发小工具方法,喜欢自己折腾的盆友可以试试。

继续阅读
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
孤狼
  • 本文由 发表于 2015年9月20日12:12:33
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
【新年气象】过年啦WordPress 主题添加挂灯笼特效 WordPress

【新年气象】过年啦WordPress 主题添加挂灯笼特效

过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。代码这里也分享一下,有喜欢的朋友拿去用,将灯笼挂在自己的博客上,增加点过年的气氛。这个灯笼只是简单应...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: