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的前端代码 目前正在纺织公司学习外贸方面的新人 欢迎各位朋友的交流学习!

  网易评论

思考中……

  近期评论

很多东西宁缺毋滥,流星的光芒短暂而灼热闪耀。

让你变得更好的那个人,往往是你觉得很难与之相处的那个人。—— by 小宇

觉得自己做的到和不做的到,其实只在一念之间。

路在自己脚下,没有人可以决定我的方向。

你的选择是做或不做,但不做就永远不会有机会。

凡事顺其自然,遇事处于泰然,得意之时淡然,失意之时坦然,艰辛曲折必然,历尽沧桑悟然。