12/26 博客日志-分类图片模块(附代码)

2017-12-26 1 网站日志 蓝优

昨日一时兴起,想弄个后台设置的指定分类图片功能。

犹如小编技术太渣,而且又懒,挣扎半天还是决定去扒个样式好了,这样又不用自己去一步一步的写还方便

当时真的感觉是机智如我,说干就干。于是去阅美乐博客去找样式,因为曾经在他博客看到过类似的文章。

于是使出已经大众神功复制粘贴,经过一番折腾,发现并没有自适应的样式代码果断放弃。

关键时刻看到阅美乐文章标题的关键词,思源大佬,于是马不停蹄的去思源大佬博客 扒样式。

经过本地一番折腾后,终于整理出想要的CSS样式和代码。脑子一动,咦!万一思源大佬的CSS样式和自己博客的CSS样式有冲突那又要改来改去,实在太麻烦了。

还是改下整理出来的代码和CSS样式好了,这样又不会又冲突。又是经过一番折腾后终于套上了本地板子完成。

不过说回来,把博客缩小一看,思源大佬图片分类列表手机端样式看着缝隙好大,由于小编有那么一丢丢强迫症。

好吧,又要开始审查元素了,弄来弄去最后完美成功!

信仰:生活不息折腾不止,只要坚持就是胜利

最后附上整理出代码与CSS样式,获取略缩图函数换成自己模板的!

EMLOG代码

<div class="imgcon imgrid centimg">
<ul>
<?php if (!empty($logs)):foreach($logs as $value):?>
<li>
<div class="itemm">
<div class="thumcb">
<a target="_blank" href="<?php echo $value['log_url']; ?>" title="<?php echo $value['log_title']; ?>">
<img src="<?php get_imgsrc($value['content']);?>"  alt="<?php echo $value['log_title']; ?>">
</a>
</div>
 <div class="metata">
 <div class="title">
 <h2><a target="_blank" href="<?php echo $value['log_url']; ?>" rel="bookmark" title="<?php echo $value['log_title']; ?>"><?php echo $value['log_title']; ?></a></h2>
 </div>
<div class="extrabc">
<i class="fa fa-bookmark"></i><?php blog_sort($value['logid']); ?><span><?php echo $value['views']; ?><i class="fa fa-fire"></i></span>
</div>             
</div>
<div class="data">
<time class="time"><?php echo gmdate('Y-n-j', $value['date']); ?></time>
 <span><a href="<?php echo $value['log_url']; ?>#comments"><i class="fa fa-comment"></i><?php echo $value['comnum']; ?></a></span>
<span><i class="fa fa-heart"></i><?php echo $value['views']; ?></span>
      </div>
  </div>
</li>	
<?php endforeach;else:?>  
</ul>	
<?php endif;?>
</div>
CSS样式代码

.imgcon{width:1260px;max-width:1260px;margin:0 auto}
.imgrid ul{margin:auto -10px;height:auto;overflow:hidden}
.imgrid ul li{float:left;width:320px;padding-bottom:15px;position:relative}
.imgrid ul li .itemm{margin:auto 10px;background-color:#FFF;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.15);box-shadow:0 1px 1px rgba(0,0,0,.15);overflow:hidden;position:relative;border:10px solid #FFF;border-bottom:0 none}
.imgrid ul li .thumcb{line-height:1;text-align:center;overflow:hidden;-webkit-transition:.15s all linear;transition:.15s all linear;color:#FFF;-webkit-box-shadow:0 0 2px rgba(255,255,255,.15);box-shadow:0 0 2px rgba(255,255,255,.15)}
.imgrid ul li .thumcb img{width:100%;display:block;-webkit-transition:all .2s cubic-bezier(.33,0,.2,1);transition:all .2s cubic-bezier(.33,0,.2,1);height:180px;}
.imgrid ul li .metata{padding:8px 5px}
.imgrid ul li .title a{color:#444;font-size:12px;display:block;height:18px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imgrid ul li:hover .title a{color:#00c3b6}
.imgrid ul li .extrabc{position:absolute;left:0;top:0;height:auto;overflow:hidden;width:100%;background-color:#222;color:#FFF;margin:0;padding:8px 10px;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateY(-50px);transform:translateY(-50px);-webkit-transition:-webkit-transform .2s cubic-bezier(.33,0,.2,1);transition:transform .2s cubic-bezier(.33,0,.2,1)}
.imgrid ul li .extrabc a{color:rgba(255,255,255,.9)}
.imgrid ul li .extrabc a:hover{color:#00c3b6}
.imgrid ul li .extrabc .time{float:left}
.imgrid ul li .extrabc .time i{margin-right:4px}
.imgrid ul li .extrabc span{float:right;margin-left:8px}
.imgrid ul li .extrabc i{margin-right:4px}
.imgrid ul li .extrabc span i{margin-right:0;margin-left:4px}
.imgrid ul li .data{border-top:1px solid #f2f2f2;padding:8px 5px;color:#999}
.imgrid ul li .data a{color:#999}
.imgrid ul li .data a:hover{color:#00c3b6}
.imgrid ul li .data span{float:right;margin-left:10px}
.imgrid ul li .data span i{margin-right:4px}
.imgrid ul li:hover .extrabc{-webkit-transform:translateY(0);transform:translateY(0)}
.imgrid ul li:hover .thumcb{background-color:#000}
.imgrid ul li:hover .thumcb img{opacity:.7;-webkit-transform:translateY(10px);transform:translateY(10px)}
.search .imgrid ul li .extrabc{-webkit-transform:translateY(0);transform:translateY(0);background-color:#00c3b6;width:auto;overflow:visible;display:inline-block;padding:5px 10px;left:inherit;right:5px;top:5px;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.15);box-shadow:1px 1px 1px rgba(0,0,0,.15)}
.search .imgrid ul li .extrabc:after{content:'';display:block;border-width:7px;border-style:solid;border-color:transparent #00c3b6 transparent transparent;width:0;height:0;font-family:arial;position:absolute;top:50%;left:-12px;margin-top:-7px}
@media only screen and (max-width:1259px){.content{width:auto;margin:0 20px}.imgrid{width:100%;margin:auto}.imgrid ul { margin: auto;}.imgrid ul li { width: 33.33%;}}
@media only screen and (max-width:1024px){.imgrid{width:100%;}.imgrid ul { margin: auto;}.imgrid ul li { width: 50%;}}
@media only screen and (max-width:768px){.content{margin:0 10px;}.imgrid{width:100%;}.imgrid ul {margin: auto;}.imgrid ul li { width: 100%;}}


标签: EMLOG教程 博客日志
版权声明:若无特殊注明,本文皆《蓝优》原创,转载请保留文章出处。
本文链接:12/26 博客日志-分类图片模块(附代码) - http://www.92mo.cn/rizhi/86.html

发表新评论

快捷功能:

全部评论(1条)
  1. 头像
    回复 晨光资讯网 群众 2017-12-27 12:51

    我觉得还行,不过自己加些代码应该更好看,比如下雪代码什么的,大家可以来下载。