一款来自致美化特色模块,纯HTML和CSS,只能在B2主题中使用
一款来自致美化特色模块,纯HTML和CSS,只能在B2主题中使用。
可以放在HTML模块中。
- 代码来源:详情
代码如下
<div class="post-1 post-list post-item-1"> <div class="hidden-line"> <ul class="b2_gap"> <li class="post-list-item"> <div class="item-in yj yy bs"> <div class="post-module-thumb" style="padding-top:56.25%"> <a href="https://npc.ink/pc/venom-green-vs/" target="_blank" class="thumb-link"><img class="post-thumb lazy loaded" data-src="https://dl.zhutix.net/2018/03/Toxic_0.jpg" src="https://dl.zhutix.net/2018/03/Toxic_0.jpg" data-was-processed="true" loading="lazy" /></a> <span class="fenlj">电脑主题</span> </div> <div class="post-info"> <a class="grid_author_avt"> <div class="grid_author_bggo avatar bg-cover"> <img alt="" src="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42" srcset="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x" class="avatar avatar-30 photo" height="30" width="30" loading="lazy" /> </div> </a> <h2 style="text-align:center"> <a href="https://npc.ink/pc/venom-green-vs/" target="_blank">暗绿色毒液 Win10主题</a> </h2> <div class="rxcerpt" style="text-align: center;"> <a>tag</a> <a>tag</a> <a>tag</a> <a>tag</a> </div> <div class="list-footer"> <span class="post-list-meta-avatar"><i class="b2font b2-time "></i>9月27日 10:20</span> <span> <span><i class="b2font b2-love "></i>1</span> <span class="listt"><i class="b2font b2-xingzhuangcopy "></i><a href="https://npc.ink/pc/venom-green-vs/#comments" class="commentslink">9</a></span> <span class="listt"><i class="b2font b2-eye"></i>7481</span> </span> </div> </div> </div> </li> <li class="post-list-item"> <div class="item-in yj yy bs"> <div class="post-module-thumb" style="padding-top:56.25%"> <a href="https://npc.ink/animated/os-master-yi/" target="_blank" class="thumb-link"><img class="post-thumb lazy loaded" data-src="https://dl.zhutix.net/2020/09/PsyOps-Master-Yi.gif" src="https://dl.zhutix.net/2020/09/PsyOps-Master-Yi.gif" data-was-processed="true" loading="lazy" /></a> <span class="fenlj">动态壁纸</span> </div> <div class="post-info"> <a class="grid_author_avt"> <div class="grid_author_bggo avatar bg-cover"> <img alt="" src="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42" srcset="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x" class="avatar avatar-30 photo" height="30" width="30" loading="lazy" /> </div> </a> <h2 style="text-align:center"> <a href="https://npc.ink/animated/os-master-yi/" target="_blank">英雄联盟 无极剑圣·暗影 动态壁纸</a> </h2> <div class="rxcerpt" style="text-align: center;"> <a>tag</a> <a>tag</a> <a>tag</a> <a>tag</a> </div> <div class="list-footer"> <span class="post-list-meta-avatar"><i class="b2font b2-time "></i>9月27日 8:00</span> <span> <span><i class="b2font b2-love "></i>1</span> <span class="listt"><i class="b2font b2-xingzhuangcopy "></i><a href="https://npc.ink/animated/os-master-yi/#respond" class="commentslink">0</a></span> <span class="listt"><i class="b2font b2-eye"></i>49</span> </span> </div> </div> </div> </li> <li class="post-list-item"> <div class="item-in yj yy bs"> <div class="post-module-thumb" style="padding-top:56.25%"> <a href="https://npc.ink/animated/bh3-zgkm/" target="_blank" class="thumb-link"><img class="post-thumb lazy loaded" data-src="https://dl.zhutix.net/2020/09/Zhuge-Kongming-Honkai-Impact-3.gif" src="https://dl.zhutix.net/2020/09/Zhuge-Kongming-Honkai-Impact-3.gif" data-was-processed="true" loading="lazy" /></a> <span class="fenlj">动态壁纸</span> </div> <div class="post-info"> <a class="grid_author_avt"> <div class="grid_author_bggo avatar bg-cover"> <img alt="" src="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42" srcset="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x" class="avatar avatar-30 photo" height="30" width="30" loading="lazy" /> </div> </a> <h2 style="text-align:center"> <a href="https://npc.ink/animated/bh3-zgkm/" target="_blank">崩坏3 诸葛孔明 动态壁纸</a> </h2> <div class="rxcerpt" style="text-align: center;"> <a>tag</a> <a>tag</a> <a>tag</a> <a>tag</a> </div> <div class="list-footer"> <span class="post-list-meta-avatar"><i class="b2font b2-time "></i>9月26日 9:20</span> <span> <span><i class="b2font b2-love "></i>1</span> <span class="listt"><i class="b2font b2-xingzhuangcopy "></i><a href="https://npc.ink/animated/bh3-zgkm/#comments" class="commentslink">1</a></span> <span class="listt"><i class="b2font b2-eye"></i>171</span> </span> </div> </div> </div> </li> <li class="post-list-item"> <div class="item-in yj yy bs"> <div class="post-module-thumb" style="padding-top:56.25%"> <a href="https://npc.ink/animated/yamato-kancolle/" target="_blank" class="thumb-link"><img class="post-thumb lazy loaded" data-src="https://dl.zhutix.net/2020/09/Yamato-Kancolle.gif" src="https://dl.zhutix.net/2020/09/Yamato-Kancolle.gif" data-was-processed="true" loading="lazy" /></a> <span class="fenlj">动态壁纸</span> </div> <div class="post-info"> <a class="grid_author_avt"> <div class="grid_author_bggo avatar bg-cover"> <img alt="" src="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_42,w_42" srcset="./img/4913bb105302f8dce_avatar.jpg?x-oss-process=image/resize,m_fill,h_84,w_84 2x" class="avatar avatar-30 photo" height="30" width="30" loading="lazy" /> </div> </a> <h2 style="text-align:center"> <a href="https://npc.ink/animated/yamato-kancolle/" target="_blank">舰队Collection:大和 动态壁纸</a> </h2> <div class="rxcerpt" style="text-align: center;"> <a>tag</a> <a>tag</a> <a>tag</a> <a>tag</a> </div> <div class="list-footer"> <span class="post-list-meta-avatar"><i class="b2font b2-time "></i>9月26日 9:10</span> <span> <span><i class="b2font b2-love "></i>1</span> <span class="listt"><i class="b2font b2-xingzhuangcopy "></i><a href="https://npc.ink/animated/yamato-kancolle/#comments" class="commentslink">1</a></span> <span class="listt"><i class="b2font b2-eye"></i>109</span> </span> </div> </div> </div> </li> </ul> </div> </div> <style type="text/css"> .post-item-1 ul.b2_gap>li { width: 25%; } .item-in { margin: 10px !important; transition: all .3s ease-out; } .yy { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } .bs { background-color: rgba(255, 255, 255, 0.9) !important; } .yj { border-radius: 6px !important; } .item-in { overflow: initial; } .item-in.yj .post-thumb { border-radius: 6px 6px 0 0; } .post-module-thumb .fenlj { position: absolute; border-radius: 5px 5px 0 0; bottom: -1px; right: 10px; z-index: 1; font-size: 12px; color: #474747; line-height: 20px; padding: 1px 8px 0; background-color: #FFFFFF; } .post-info { padding: 15px 10px 10px 10px; } .grid_author_avt { position: relative; z-index: 2; display: block; width: 100px; height: 32px; margin-top: -29px; margin-left: -20px; transform: translateZ(0); } .grid_author_avt:after { content: ''; position: absolute; width: 100%; height: 100%; background-position: right top; background-repeat: no-repeat; background-size: 100px 30px; background-image: url(https://cdn.ovopd.cn/wp-content/uploads/2020/09/1.svg); top: -3px; left: 50%; transform: translate(-50%, 0); z-index: -1; } .grid_author_bggo { position: absolute; margin: auto; top: 0; right: 0; left: 0; width: 30px; height: 30px; border-radius: 50%; z-index: 2; } .bg-cover { background-size: cover; background-position: 50% 50%; } .grid_author_avt img { border-radius: 50%; } .post-info h2 { height: 20px; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-footer { margin-top: 0; font-size: 14px; color: #999; padding-top: 13px; border-top: 0 solid #fafafa; } .post-info span { font-size: 12px; color: #ccc; } .b2_gap>li { border-bottom: 0 solid #f3f3f3; border-right: 0 solid #f3f3f3; box-shadow: 0 0px 0px #f3f3f3; } .rxcerpt a { margin: 0px 0.2em; } </style>
左文右图
<div class="jcgj"> <ul class="clearfix"> <li> <div class="gjysl yy yj bk bs"> <div class="img"> <a href="https://zhutix.com/tools/citie-mei/" target="_blank"> <img class="n-thumb" src="https://cdn.ovopd.cn/wp-content/uploads/2020/09/Practice-Areas-pic-.png" style="display: block;" /> </a> </div> <h3><a href="https://zhutix.com/tools/citie-mei/" target="_blank">Win10开始菜单磁贴美化小工具</a></h3> <p class="excerpt">软件介绍: 该软件的目的很简单,就是把丑丑的默认磁贴美化一下,让磁贴赏心悦目~ 相比其他同类软件,该软件特点有: 支持 调色板 支持 屏幕取色 支持 自定义背景图 支持 动态图片磁贴 支持 预览磁贴效果图 …</p> <div class="list-meta"> <span class="time"><i class="b2font b2-time"></i> 9-14</span> <span class="views"><i class="b2font b2-eye"></i> 62134</span> <span class="comments"><i class="b2font b2-eye"></i> <a href="https://zhutix.com/tools/citie-mei/#comments" class="commentslink">80</a></span> </div> </div> </li> <li> <div class="gjysl yy yj bk bs"> <div class="img"> <a href="https://zhutix.com/tools/startisback-plus-pojie/" target="_blank"> <img class="n-thumb" src="https://dl.zhutix.net/2019/04/sb.jpg?x-oss-process=image/resize,limit_0,m_fill,w_120,h_90" style="display: block;" /> </a> </div> <h3><a href="https://zhutix.com/tools/startisback-plus-pojie/" target="_blank">Win8/Win10开始菜单程序StartIsBack++ 2.9.5</a></h3> <p class="excerpt">StartIsBack 是一款Win8和Win10开始菜单辅助工具,可以让Win8和Win10能够使用跟Win7中一样的经典开始菜单,此款软件小巧且不需要繁琐的设置,在同类软件中应该是最好的,推荐大家使用。 此版本为官方30天试 …</p> <div class="list-meta"> <span class="time"><i class="b2font b2-time"></i> 9-3</span> <span class="views"><i class="b2font b2-eye"></i> 418898</span> <span class="comments"><i class="b2font b2-eye"></i> <a href="https://zhutix.com/tools/startisback-plus-pojie/#comments" class="commentslink">110</a></span> </div> </div> </li> <li> <div class="gjysl yy yj bk bs"> <div class="img"> <a href="https://zhutix.com/software/uninstall-tool/" target="_blank"> <img class="n-thumb" src="https://dl.zhutix.net/2020/09/Uninstall-Tool-1.jpg?x-oss-process=image/resize,limit_0,m_fill,w_120,h_90" style="display: block;" /> </a> </div> <h3><a href="https://zhutix.com/software/uninstall-tool/" target="_blank">Uninstall Tool v3.5.10 绿色版</a> </h3> <p class="excerpt">Uninstall Tool 是款可以用来替代“添加/删除程序”的工具,Uninstall Tool 可显示隐藏的安装程序,按名称过滤已安装程序的列表,强行卸载程序,浏览注册表项目,保存安装程序列表,快速小巧,操作简便。 功 …</p> <div class="list-meta"> <span class="time"><i class="b2font b2-time"></i> 9-2</span> <span class="views"><i class="b2font b2-eye"></i> 1589</span> <span class="comments"><i class="b2font b2-eye"></i> <a href="https://zhutix.com/software/uninstall-tool/#comments" class="commentslink">5</a></span> </div> </div> </li> </ul> </div> <style type="text/css"> .jcgj ul li { width: 33.333%; float: left; display: inline-block; padding: 10px; } .gjysl { padding: 8px 8px 4px 6px; position: relative; height: 90px; } .bk { border: 1px solid #f1f1f1 !important; } .yy { box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1); } .bs { background-color: rgba(255, 255, 255, 0.9) !important; } .yj { border-radius: 6px !important; } /*1*/ .jcgj ul li .img { position: absolute; top: 0; left: 0; overflow: hidden; } .jcgj ul li img { width: 120px; height: 89px; transition: all .3s ease-out 0s; border-radius: 0px 6px 6px 0px; object-fit: cover; background: #f0f0f0; display: block; font-size: 0; } /*2*/ .jcgj ul li h3 { font-size: 16px; margin-bottom: 8px; font-weight: normal; } .jcgj ul li h3 a { line-height: 20px; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 20px; } /*3*/ .jcgj ul li .excerpt { color: #AAB2BD; font-size: 12px; line-height: 20px; overflow: hidden; -o-text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; height: 20px; white-space: nowrap; text-overflow: ellipsis; list-style-type: none; } /*4*/ .jcgj ul li .list-meta { color: #8a92a9; font-size: 13px; position: absolute; bottom: 3px; left: 130px; max-height: 24px; overflow: hidden; } .jcgj ul li .list-meta span { margin-right: 10px; } .jcgj ul li .list-meta i { font-size: 14px; } /*变换方向* /*图片*/ .jcgj ul li .img { right: 0; left: auto; } /*描述文本*/ .jcgj ul li .excerpt { left: 6px; position: absolute; max-width: 20em; } /*详细信息*/ .jcgj ul li .list-meta { left: 6px; padding: 0.4em 0 0 0; } /*移动端响应式*/ @media screen and (max-width: 768px) { .jcgj ul li { width: 100% !important; padding: 10px 0px !important; } } </style>