Emlog首页显示随机热门列表

感谢您访问QQ国际 ”,本站专注活动分享,SEO技术,网站源码,绿色软件等免费资源分享 希望大家能够多多支持哦!喜欢本站的朋友可以把本站添加到书签或记住网址,本站网址:QQGUOJI.CN, 站长 QQ 5528280


  • 内容
  • 相关

 废话不多说直接看图

QQ截图20200527181057.png

把以下代码添加到log_list.php中,位置就自己看哪里看的舒心放哪里吧

 <!--首页随机、热门文章-->
	<article class="hot_posts ">
	<div class="suiji">
	<h3>随机文章</h3>
	<ul class="layout_ul">
	<?php getRandLog(6);?>
	</ul>
	</div>
	<div class="hots">
	<h3>本月热门</h3>
	<ul class="layout_ul">
	<?php getdatelogs(6);?>
	</ul>
	</div>
	</article>

css一般都是放在style.css文件中,不排除其他模板有是其他文件 自行摸索

/*首页随机、热门读取*/
.hot_posts {background-color:#fff;padding:20px;position:relative;font-size:0;box-shadow:0 0px 20px rgba(160, 160, 160, 0.1);border-radius:10px;margin-bottom: 10px;}
.hot_posts .suiji {display:inline-block;vertical-align:top;width:50%;padding-right:10px;}
.hot_posts .hots {display:inline-block;vertical-align:top;width:50%;padding-left:10px;}
.hot_posts h3 {border-bottom:2px #f2f2f2 solid;padding-bottom:6px;margin-bottom:8px;font-size:16px;margin-top:0;position:relative;}
.hot_posts h3:after {content:"";color:#ffffff;position:absolute;height:2px;width:30px;background:#45b6f7;left:0;bottom:-2px;-webkit-transition:all .25s ease-in;-moz-transition:all .25s ease-in;transition:all .25s ease-in;}
.hot_posts .suiji:hover h3:after, .hot_posts .hots:hover h3:after {width:100px;}
.hot_posts ul {padding:0}
.hot_posts ul li {display:block;padding:8px 0;-webkit-transition:ease-in-out 0.25s;transition:ease-in-out 0.25s;font-size:12px;}
.hot_posts ul li:hover {font-size:15px;-webkit-transition:ease-in-out 0.25s;transition:ease-in-out 0.25s;}
.hot_posts ul li a {display:block;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:22px;}
.hot_posts ul li strong {float:right;font-weight:normal;line-height:22px;padding-left:15px;}
.hot_posts ul li a>img {width:30px;height:22px;margin-right:4px;border-radius:5px;vertical-align:bottom;}
.hot_posts span {width:22px;height:22px;background-color:#f2f2f2;display:inline-block;text-align:center;margin-right:4px;border-radius:25px;line-height:22px;color:#666;}
.hot_posts ul li:nth-child(1) span {background-color:#ff5a3c;color:#fff;}
.hot_posts ul li:nth-child(2) span {background-color:#13b755;color:#fff;}
.hot_posts ul li:nth-child(3) span {background-color:#00a9e3;color:#fff;}
@media screen and (max-width: 768px){
.hot_posts .suiji{width: 100%;}
}
@media screen and (max-width: 768px){
.hot_posts .hots{width: 100%;}
}
.nav-top {
    width: 900px;
}

好了本次教程到此结束

本文标签:

版权声明:若无特殊注明,本文皆为《柳泊风》原创,转载请保留文章出处。

本文链接:Emlog首页显示随机热门列表 - https://qqguoji.cn/17.html

解压密码:本站资源所有解压密码均为:QQGUOJI.CN

二维码加载中……

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知