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

2015年9月20日12:12:33 发表评论 2,188

实现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" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi94aXUtdGhlbWUtdmVyc2lvbi00LTEuaHRtbA==">专题</a>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">查看演示</a>
</li>
<li class="ebox-i ebox-02">
<h4>D8主题</h4>
<p>大气设计,适用于企业站、行业垂直站、团队站及个人博客</p>
<a class="btn btn-primary btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi9sYXJnZS1mcm9udC1lbmQtZDgtdG9waWNzLXNoYXJlLmh0bWw=">专题</a>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">查看演示</a>
</li>
<li class="ebox-i ebox-03">
<h4>D-Simple主题</h4>
<p>简洁2栏,适用于个人站点及团队博客</p>
<a class="btn btn-primary btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">专题</a>
</li>
<li class="ebox-i ebox-04">
<h4>D7主题</h4>
<p>简洁3栏,适用于个人站点及团队博客</p>
<a class="btn btn-primary btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">专题</a>
</li>
<li class="ebox-i ebox-100">
<h4>DUX1.0.2主题(破解版)</h4>
<p>网友破解,不保证期安全性,需要的朋友可以下载玩玩,请勿用于商业用途,博主建议大家购买正版.</p>
<a class="btn btn-danger btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">主题下载</a>
<!-- <a class="btn btn-default btn-sm" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL3d3dy43NTg1Lm5ldC5jbi8=">咨询排期</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" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS9uYXZpZ2F0aW9u">立即使用</a>
</li>
<li class="ebox-i ebox-02">
<h4>产品-交互-设计</h4>
<p>展示各种精彩炫酷的网站设计和用户体验良好的设计元素</p>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS93b3JkcHJlc3M=">开始学习</a>
</li>
<li class="ebox-i ebox-03">
<h4>名企招聘</h4>
<p>名企前端招聘大集合,有能量就释放出来吧</p>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS9zcGVhaw==">查看职位</a>
</li>
<li class="ebox-i ebox-04">
<h4>Sublime Text 3</h4>
<p>前端开发利器,全套快捷键和插件推荐</p>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS8=">开始使用</a>
</li>
<li class="ebox-i ebox-05 ebox-100">
<h4>前端开发工具箱</h4>
<p>
<a target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS90b29scyNxZC1qc3BhY2tlcg==">JS压缩/加密/格式化</a> |
<a target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS90b29scyNxZC1jc3NwYWNrZXI=">CSS压缩/格式化</a> |
<a target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS90b29scyNxZC1oY29kZW1pcnJvcg==">在线代码高亮</a>
</p>
<a class="btn btn-default btn-sm" target="_blank" rel="external nofollow" target="_blank" href="https://www.7585.net.cn/wp-content/themes/begin/go.php?url=aHR0cDovL2JhbnFpbmdkaWFvLmNvbS90b29scw==">立即使用</a>
</li>
</ul>

以上就是关于大前端DUX实现右侧主题推荐及前端开发小工具方法,喜欢自己折腾的盆友可以试试。

发表评论

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