大前端DUX主题美化首页添加4个小栏目

释放双眼,带上耳机,听听看~!

将以下代码添加首页适当位置,如果你用的是DUX主题,可以在后台主题设置里添加到广告位的首页文章列表上。

<div class="home-firstitems">
	<div class="containerphl">
		<ul>
			<li>
				<a href="https://www.xlsg.com.cn/">
					<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.xlsg.com.cn/">
					<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.xlsg.com.cn/">
					<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.xlsg.com.cn/">
					<i class="fa fa-picture-o" aria-hidden="true"></i>
					<strong>小哌混职场</strong>
					<p>职场或情场,你的核心竞争力永远是你自身的价值</p>
					<span class="btn btn-primary">直达链接</span>
				</a>
			</li>
		</ul>
	</div>
</div>

将以下代码添加到CSS文件中。

.home-firstitems{margin-top:3px;border:1px solid #eaeaea;padding:10px 0px 10px 0px;overflow:hidden;background-color:#fff;margin-bottom:0px;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}}

人已赞赏
建站教程

大前端DUX主题美化首页文章边框颜色

2020-6-4 23:49:00

建站教程

大前端DUX主题首页添加热门文章模块

2020-6-5 3:06:59

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索