[Emlog教程] Emlog通用读者墙特效页代码

这个是FLY模板自带的读者墙,但是给大家的会有所不同,效果都差不多。不多说代码如下

通用版本

<divclass="page-single">
<divclass="likepage clearfix">
<divclass="container">
<divclass="like-post col-xs-6 col-sm-4 col-md-3">
<divclass="like-post-box">
<ahref="https://www.6axi.com/"rel="external nofollow"target="_blank">
<divclass="views"><spanclass="sealik">吐槽 | </span><spanclass="count num">1条</span></div>
<divclass="title">
<imgclass="lazy thumbnail"style="float:left;"src="https://www.6axi.com/favicon.ico">
<h2>阿喜资源网</h2>
</div>
</a>
</div>
</div>
</div></div></div>

EMLOG版本

<divclass="page-single"><divclass="likepage clearfix"><divclass="container">
<?php
global $CACHE;$user_cache = $CACHE->readCache('user');$name = $user_cache[1]['name'];
$DB =MySql:: getInstance();
$sql ="SELECT count(*) AS comment_nums,poster,mail,url FROM ".DB_PREFIX."comment where date >0 and poster !='". $name ."' and  poster !='匿名' and hide ='n' group by poster order by comment_nums DESC limit 0,66";
$result = $DB -> query( $sql );
$x=1;
while( $row = $DB -> fetch_array( $result ))
if($x<=1){
{
$img ="";
if( $row['url'])
{$tmp ="<div class=\"like-post col-xs-6 col-sm-4 col-md-3\"><div class=\"like-post-box\">
<a href=\"". $row['url']."\" rel=\"external nofollow\" target=\"_blank\"><div class=\"views\"><span class=\"sealik\">吐槽 | </span><span class=\"count num\">". $row['comment_nums']."条</span></div>
<div class=\"title\"><img class=\"lazy thumbnail\" style=\"float:left;\" src=\"". getqqtx($row['mail'])."\" ><h2>". $row['poster']."</h2>
</div></a></div></div>";
}
else
{$tmp = $img;}
$output .= $tmp;
$x++;
}
}elseif($x<=2){
$img ="";
if( $row['url'])
{$tmp ="<div class=\"like-post col-xs-6 col-sm-4 col-md-3\"><div class=\"like-post-box\">
<a href=\"". $row['url']."\" rel=\"external nofollow\" target=\"_blank\"><div class=\"views\"><span class=\"sealik\">吐槽 | </span><span class=\"count num\">". $row['comment_nums']."条</span></div>
<div class=\"title\"><img class=\"lazy thumbnail\" style=\"float:left;\" src=\"". getqqtx($row['mail'])."\" ><h2>". $row['poster']."</h2>
</div></a></div></div>";
}
else
{$tmp = $img;}
$output .= $tmp;
$x++;
}elseif($x<=3){
$img ="";
if( $row['url'])
{$tmp ="<div class=\"like-post col-xs-6 col-sm-4 col-md-3\"><div class=\"like-post-box\">
<a href=\"". $row['url']."\" rel=\"external nofollow\" target=\"_blank\"><div class=\"views\"><span class=\"sealik\">吐槽 | </span><span class=\"count num\">". $row['comment_nums']."条</span></div>
<div class=\"title\"><img class=\"lazy thumbnail\" style=\"float:left;\" src=\"". getqqtx($row['mail'])."\" ><h2>". $row['poster']."</h2>
</div></a></div></div>";
}
else
{$tmp = $img;}
$output .= $tmp;
$x++;
}elseif($x>=4){
$img ="";
if( $row['url'])
{$tmp ="<div class=\"like-post col-xs-6 col-sm-4 col-md-3\"><div class=\"like-post-box\">
<a href=\"". $row['url']."\" rel=\"external nofollow\" target=\"_blank\"><div class=\"views\"><span class=\"sealik\">吐槽 | </span><span class=\"count num\">". $row['comment_nums']."条</span></div>
<div class=\"title\"><img class=\"lazy thumbnail\" style=\"float:left;\" src=\"". getqqtx($row['mail'])."\" ><h2>". $row['poster']."</h2>
</div></a></div></div>";
}
else
{$tmp = $img;}
$output .= $tmp;
$x++;
}
echo $output ;
?>
</div></div></div>

最后附上CSS代码就完事了

html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}
body{cursor:url(../images/default.cur),auto!important}
body a{cursor:url(../images/link.cur),pointer}
blockquote,body,dd,dl,figure,form,h1,h2,h3,h4,h5,h6,p,pre{margin:0}
em,i{font-style:italic}
p{color:#3d464d;font-size:14px;line-height:1.6}
body{-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;-webkit-transition:all .5s ease;background-color:#f1f1f1;line-height:1.5;transition:all .5s ease}
textarea{font-size:14px;line-height:1.4}
a{color:#48494d;text-decoration:none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer}
a:hover{text-decoration:none;color:#00A7EB}
img{vertical-align:middle}
a img{border:0 none}
body{font-family:suxingme,"Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei",STHeiti,"WenQuanYi Micro Hei",SimSun,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
@media screen and(max-width:650px){.like-post-box .title h2{padding-left:10px}
}
.likepage{padding:30px0}
.like-post{margin-bottom:30px}
.like-post-box{position:relative;background:#FFF;-webkit-box-shadow:05px10px0 rgba(146,146,146,.1);-moz-box-shadow:05px10px0 rgba(146,146,146,.1);box-shadow:05px10px0 rgba(146,146,146,.1);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:1px solid #e4ecf3}
.like-post-box:hover{transform:translateY(-6px);-webkit-transform:translateY(-6px);-moz-transform:translateY(-6px);box-shadow:026px40px-24px rgba(0,0,0,.3);-webkit-box-shadow:026px40px-24px rgba(0,0,0,.3);-moz-box-shadow:026px40px-28px rgba(0,0,0,.3);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.like-post-box a{display:block}
.like-post-box .image{height:200px;background-position:center top;background-repeat:no-repeat;background-size:cover}
.like-post-box .title{background:#fff;padding:15px13px}
.like-post-box .title h2{font-size:14px;height:38px;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2;padding-left:20px;line-height:38px}
.like-post-box .title h2 a{color:#FFF}
.like-post-box .views{position:absolute;right:5px;top:5px;background:rgba(232,40,74,.8);color:#FFF;padding:3px8px;font-size:12px;border-radius:3px}
@media screen and(min-width:991px)and(max-width:1199px){.likepage{padding:5px0}
.like-post{padding:5px;margin:0}
.like-post-box .image{height:150px}
}
@media screen and(min-width:768px)and(max-width:991px){.likepage{padding:0}
.like-post{padding:5px;margin:0}
.like-post-box .image{height:150px}
}
@media screen and(max-width:767px){.likepage{padding:5px}
.like-post{padding:002px1px;margin:0}
.like-post-box .image{height:130px}
.container{width:auto;padding:0}
.page-single.container{padding:0;width:100%}
}
.thumbnail{height:40px;width:40px;display:block;padding:4px;margin-bottom:20px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:border .2s ease-in-out;-o-transition:border .2s ease-in-out;transition:border .2s ease-in-out}
.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.col-xs-6{width:50%;float:left;position:relative;min-height:1px;padding-right:15px;padding-left:15px}
.col-xs-6{width:50%;float:left}
@media(min-width:992px){.col-md-3{width:25%}
}
@media(min-width:992px){.col-md-3,.col-md-4{float:left}
}
@media(min-width:768px){.col-md-3{width:25%}
}
@media(min-width:768px){.col-md-3,.col-md-4{float:left}
}
@media(min-width:768px){.col-sm-4{width:33.33333333%}
}
@media(min-width:768px){.col-sm-4{float:left}
}