东风不来
三月的柳絮不飞

纯代码为DUX主题添加首页四栏推荐模块 二次美化版

前面博主写过一篇 纯代码为 DUX 主题添加首页四栏推荐模块 修复版 ,由于部分小伙伴反应有没有一些好看的样式,博主这里特意找了一下,样式代码是从 嗯哌网 那边抓取的!代码很简单, options.php 和 index.php 文件里面直接用上篇文章里的,只需修改 html 代码和 css 代码即可!这里贴一张博主的修改后的效果图,如果觉得可以,那就动手折腾起来吧!

1. html 代码

将下面代码复制到后台 DUX 主题设置选项里的 “首页四栏自定义” 的代码框中(只有已经添加了上一篇文章中的 options.php 代码,后台才会有这个选项)!

<!--首页4栏-->	
<div class="home-firstitems">
	<div class="containerphl">
		<ul>
			<li>
				<a href="https://www.wenzika.com" target="_blank" rel="nofollow">
					<i class="fa fa-bell" aria-hidden="true"></i>
					<strong>观点</strong>
					<p>我不赞成你的观点,但我捍卫你说话的权利</p>
					<span class="btn btn-primary">观点</span>
				</a>
			</li>
			<li>
				<a href="https://www.wenzika.com" target="_blank" rel="nofollow">
					<i class="fa fa-picture-o" aria-hidden="true"></i>
					<strong>微讨论</strong>
					<p>讨论的目的是交流思想,不是衡量不同观点的优劣</p>
					<span class="btn btn-primary">微讨论</span>
				</a>
			</li>
			<li>
				<a href="https://www.wenzika.com" target="_blank" rel="nofollow">
					<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
					<strong>为你写诗</strong>
					<p>有些美好根植于心,有些诗意成为生命的一部分</p>
					<span class="btn btn-primary">为你写诗</span>
				</a>
			</li>
			<li>
				<a href="https://www.wenzika.com" target="_blank" rel="nofollow">
					<i class="fa fa-tree" aria-hidden="true"></i>
					<strong>小咖混职场</strong>
					<p>职场或情场,你的核心竞争力永远是你自身的价值</p>
					<span class="btn btn-primary">直达链接</span>
				</a>
			</li>
		</ul>
	</div>
</div>

2. 添加 css 代码

将上一篇文章的 css 代码替换成下面的 css 代码:

/*首页四栏*/
.home-firstitems{margin-top:3px;border:1px solid #eaeaea;padding:10px 0px 10px 0px;overflow:hidden;background-color:#fff;margin-bottom:15px;border-radius:4px;}
.home-firstitems ul{text-align:center;border-right:1px solid #eee;overflow:hidden}
.home-firstitems ul li{float:left;width:25%;border-left:1px solid #eee;padding:20px 20px;height:135px;overflow:hidden}
.home-firstitems ul li a{display:block;position:relative;top:0;-webkit-transition:top .28s ease-in-out;transition:top .28s ease-in-out}

.home-firstitems ul li a .fa{font-size:3rem;font-weight:200;margin-bottom:10px;color:#55595c;opacity:1;-webkit-transition:opacity .4s ease-in-out;transition:opacity .4s ease-in-out}
.home-firstitems ul li a strong{display:block;color:#55595c}

.home-firstitems ul li a p{color:#999;margin:5px 0 20px}
.home-firstitems ul li a:hover{top:-60px}
.home-firstitems ul li a:hover .fa{opacity:0}
@media (max-width: 991px){.home-firstitems{display:none}}

教程结束!小伙伴们可以刷新看看效果了,真的蛮好看的!

赞(6) 打赏
版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《纯代码为DUX主题添加首页四栏推荐模块》
文章链接:https://www.wenzika.com/1638.html
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 11

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    最后一个图标不显示啊

    佛系软件 3年前 (2021-01-03) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  2. #0

    怎么让他禁止,鼠标放上去不动呢

    佛系软件 3年前 (2021-01-01) 来自天朝的朋友 谷歌浏览器 Mac OS X Lion 10_15_7 回复
  3. #0

    这是什么意思啊?只有已经添加了上一篇文章中的 options.php 代码,后台才会有这个选项

    佛系软件 4年前 (2019-11-11) 来自天朝的朋友 谷歌浏览器  ONEPLUS A6000) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.90 Mobile Safari/537.36 回复
    • Wonder Zhou

      @佛系软件 也可以自己放到自己想要的页面位置,这只是简单的前端 html + css

      Wonder Zhou 4年前 (2019-11-11) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  4. #0

    广告都去了?

    VPS驿站 5年前 (2019-05-04) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
    • Wonder Zhou

      @VPS驿站 广告我撤了。。。主要是影响速度。。。。

      Wonder Zhou 5年前 (2019-05-04) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  5. #0

    666感谢分享

    烨哥 5年前 (2019-05-03) 来自天朝的朋友 Safari浏览器 iPhone iPhone OS 12_2 like Mac OS X) AppleWebKit 回复
    • Wonder Zhou

      @烨哥 感谢来访,你也要加油哦!

      Wonder Zhou 5年前 (2019-05-04) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  6. #0

    感谢博主分享!

    花雾影 5年前 (2019-05-02) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
    • Wonder Zhou

      @花雾影 看到大佬用了这个功能,深感荣幸!

      Wonder Zhou 5年前 (2019-05-04) 来自天朝的朋友 谷歌浏览器 Windows 10 回复
  7. #0

    又加通知栏了,不错不错

    VPS驿站 5年前 (2019-04-22) 来自天朝的朋友 谷歌浏览器 Windows 10 回复

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏