记录学习与后端知识并分享学习代码过程(会飞的鱼Blog)

随便发个文章引入功能 有点麻烦 无插件

会飞的鱼 0 1097 2020年1月12日

这玩意WordPress才有 emlog没 然后样式从孟坤博客扣的 打算做个插件实现这玩意!

如果有大佬也可以先弄下 弄好记得扔我个。

html代码

<a class="mk-embed-card" href="https://f162.cn/post-414.html" title="emlog模版:Lu主题收费模版介绍"> <span class="mk-embed-content"> <span class="mk-embed-title">emlog模版:Lu主题收费模版介绍</span> <span class="mk-embed-meta"> 2019年12月31日</span> <img class="mk-embed-image no-shadow" src="https://api.cdnimg.cn/image/5e0e3cd8579d6" alt="emlog模版:Lu主题收费模版介绍" /> </span> </a>

css代码

.mk-embed-card{text-decoration:none;border:none!important;color:inherit!important;position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:5px;max-width:100%;overflow:hidden}
.mk-embed-background{position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:50%}
.mk-embed-content{position:relative;display:block;padding:12px;border-radius:inherit;background-color:hsla(0,0%,96%,.88)}
.mk-embed-content>span{overflow:hidden;display:block;margin-right:98px}
.mk-embed-title{display:block;text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:40px;font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}
.mk-embed-meta{display:block;margin-top:4px;font-size:12px;line-height:1.5;height:18px;color:#999}
.mk-embed-card .mk-embed-image{display:block;position:absolute;right:10px;top:13px;width:90px;height:60px;border-radius:5px}

演示

下面是演示  虽然没啥技术还麻烦 但是玩玩还是可以的

emlog模版:Lu主题收费模版介绍 2019年12月31日 emlog模版:Lu主题收费模版介绍

本文由 @会飞的鱼 于 2020-1-12 发布在 会飞的鱼Blog,如无特别说明,本博文章均为原创,转载请保留出处。

网友评论

    暂无评论

会飞的鱼 在线咨询

在线时间:9:00-22:00
周六、周日:14:00-22:00