Typecho自定义图片展示效果

图片展示效果

<!--一张一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-img gallery-1">
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view1" alt="oss图片规则生成的一张图片">
        </a>
    </li>
</ul>
<!--两张一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-img gallery-2">
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view2" alt="两张图片">
        </a>
    </li>
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view2" alt="两张图片">
        </a>
    </li>
</ul>
<!--三张一列,a标签里放原图链接,img标签里放缩略图-->
<ul class="lonesome-img gallery-3">
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view3" alt="三张图片">
        </a>
    </li>
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view3" alt="三张图片">
        </a>
    </li>
    <li>
        <a href="原图链接">
            <img src="缩略图链接 !lin.view3" alt="三张图片">
        </a>
    </li>
</ul>

CSS部分

.lonesome-img {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none !important;
}
Typecho赞赏功能

「一键投喂 软糖/蛋糕/布丁/牛奶/冰阔乐!」

薇拉航线🌺

(๑>ڡ<)☆谢谢老板们的投食~

使用微信扫描二维码完成支付


文章二维码

手机阅读

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!


关注微信公众号『丰烨地毯』

第一时间了解最新地毯信息
关注官微不迷路~

添加新评论

  关于博主

一个90后的国际货运专业毕业的学生 搭建网站纯粹是个人兴趣使然 偶尔会写一丢丢PHP和JS的前端代码 目前正在纺织公司学习外贸方面的新人 欢迎各位朋友的交流学习!

  网易评论

思考中……

  近期评论

无论有多困难,都坚强地抬头挺胸,告诉所有人,你并非他们想象的那样不堪一击。

每个人心里都有一段伤痕,时间才是最好的疗剂。

人总是珍惜未得到的,而遗忘了所拥有的。

退一步,并不象征我认输;放手,并不表示我放弃;微笑,并不意味我快乐!

人海中再回首,朋友真诚依旧,生命里重逢,心境平和温柔,往事如风,岁月如歌,漫漫人生路,苍桑几许,幸福几何!