通用读者墙单特效页代码(附EMLOG代码) 邪少博客’Sblog
点击登录
  • 欢迎访问邪少博客,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入邪少博客 QQ群

通用读者墙单特效页代码(附EMLOG代码)

通用版本
<div class="page-single">
<div class="likepage clearfix">
<div class="container">
<div class="like-post col-xs-6 col-sm-4 col-md-3">
<div class="like-post-box">
<a href="http://www.92mo.cn/" rel="external nofollow" target="_blank">
<div class="views"><span class="sealik">吐槽 | </span><span class="count num">1条</span></div>
<div class="title">
<img class="lazy thumbnail" style="float:left;" src="http://www.ymfx8.cn/favicon.ico">
<h2>邪少资源网</h2>
</div>
</a>
</div>
</div>
</div> </div> </div>
EMLOG版本
<div class="page-single"><div class="likepage clearfix"><div class="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:30px 0}
.like-post{margin-bottom:30px}
.like-post-box{position:relative;background:#FFF;-webkit-box-shadow:0 5px 10px 0 rgba(146,146,146,.1);-moz-box-shadow:0 5px 10px 0 rgba(146,146,146,.1);box-shadow:0 5px 10px 0 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:0 26px 40px -24px rgba(0,0,0,.3);-webkit-box-shadow:0 26px 40px -24px rgba(0,0,0,.3);-moz-box-shadow:0 26px 40px -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:15px 13px}
.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:3px 8px;font-size:12px;border-radius:3px}
@media screen and (min-width:991px) and (max-width:1199px){.likepage{padding:5px 0}
.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:0 0 2px 1px;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}

邪少博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明通用读者墙单特效页代码(附EMLOG代码)
喜欢 (0)
[827056384@qq.com]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址