选择风格关闭

演示图片：

在module.php里面添加如下：

<?php
//30天按点击率排行文章
function getdatelogs($log_num) {
$db = Database::getInstance();
$time = time();
$sql = "SELECT gid,title,comnum FROM ".DB_PREFIX."blog WHERE type='blog' AND date > $time - 30*24*60*60 ORDER BY `views` DESC LIMIT 0,$log_num";
$list = $db->query($sql);
while($row = $db->fetch_array($list)){ ?>
<li class="layout_li"><strong><img src="<?php echo TEMPLATE_URL; ?>/img/hot_1.gif" alt="本月热门"> <?php echo $row['comnum']; ?></strong><a href="<?php echo Url::log($row['gid']); ?>" title="<?php echo $row['title']; ?>"><span><?php echo ++$i;?></span><?php echo $row['title']; ?></a></li>
<?php } ?>
<?php } ?>
<?php
//随机文章
function getRandLog($log_num) {
$db = Database::getInstance();
$sql = "SELECT gid,title,comnum FROM ".DB_PREFIX."blog WHERE type='blog' and hide='n' ORDER BY rand() LIMIT 0,$log_num";
$list = $db->query($sql);
while($row = $db->fetch_array($list)){ ?>
<li class="layout_li"><strong><?php echo gettime($row['gid']);?></strong><a href="<?php echo Url::log($row['gid']); ?>" title="<?php echo $row['title']; ?>"><span>荐</span><?php echo $row['title']; ?></a></li>
<?php } ?>

调用代码：一般都放在首页文件log_list.php里

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

ccs代码：

.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%;
  margin-bottom:20px;
 }
 .hot_posts .hots {
  width:100%;
  padding-left:0;
 }
}

以下图片放到当前模板文件夹/img/hot_1.gif