本站VIP 免费查看
开通会员
开通本站VIP可查看该内容
本站之前的文章分享过首页添加6小格的美化，今天分享的是升级版本，对首页有了很大变动美化，可以设置N格样式，可以图文样式展示，效果拉满非常不错，喜欢的朋友下载收藏吧。
效果图：
1.将下列代码放至模块自定义区域（主题设置-模块管理-自定义）
<!-- 首页N格区块html代码 开始 --> <div id="home-row-qukuai" class=" home_row home_row_1 module-qukuai " style="background-color:;"> <div class="wrapper"> <div class="home-row-left content-area "> <div class="sort b2-radius" style="margin-top:-100px ;"> <ul class="sort-config"> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/logo.svg" alt="" /> <a href="https://nav.guidebook.top" target="_blank"><p class="sort-config-title">数字指南手册 <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">高效工作学习生活手册</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/search.svg" alt="" /> <a href="https://search.guidebook.top" target="_blank"><p class="sort-config-title">搜索指南 <span class="go" style="background-color: #5de000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">聚合搜索引擎</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/danghui.svg" alt="" /> <a href="https://www.guidebook.top" target="_blank"><p class="sort-config-title">公文写作 <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">写作素材收集</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/news.svg" alt="" /> <a href="https://nav.guidebook.top/hotnews/" target="_blank"><p class="sort-config-title">今日资讯 <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">每日新闻速递</span> </div></li> <li> <div class="sort-config-item"> <img class="sort-config-icon" src="https://www.guidebook.top/images/hezuoanli.svg" alt="" /> <a href="/requests" target="_blank"><p class="sort-config-title">项目库 <span class="go" style="background-color: #ff6000;">GO<i class="b2font b2-arrow-right-s-line"></i></span> </p> </a> <span class="sort-config-desc">优秀项目列表</span> </div></li> </ul> <div class="sort-blocks"> <div class="bt-body"> <div class="containerrr"> <div class="onecad-quk-carousel"> <div class="itemss"> <a class="card_ZQsT- b2-radius" href="https://www.guidebook.top/337/" target="_blank"> <img src="https://www.guidebook.top/images/shetuwang.png"> </a><a class="card_ZQsT- b2-radius" href="http://nav.guidebook.top" target="_blank"> <img src="https://www.guidebook.top/images/wxgzh1.png"> </a> <a class="card_ZQsT- b2-radius" href="https://nav.guidebook.top" target="_blank"> <img src="https://www.guidebook.top/images/101.jpg"> </a> </div> </div> </div> </div> <div class="srot-mine b2-radius"> <div class="wwads-cn wwads-horizontal" data-id="147" style="width:376px; height:180px;flex-wrap:nowrap;margin-top:0px;background-color:azure;padding:0px;"></div> </div> </div> </div> </div> </div> </div> <!-- 首页N格区块html代码 开始 -->
2.将下列代码放至WP主题额外CSS中（WP后台-外观-自定义-额外css）
刷新看效果吧
文章版权声明
1 本网站名称：忆路吧
2 本站永久网址：http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络，不保证其完整性以及安全性，不提供技术支持，请下载后自行研究。
6 若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
2 本站永久网址：http://www.Yiluxb.cn
3 本网站的文章部分内容来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ进行删除处理。
4 本站资源仅供学习和交流使用，版权归原作者所有，请在下载后24小时之内自觉删除。
5 本站大部分下载资源收集于网络，不保证其完整性以及安全性，不提供技术支持，请下载后自行研究。
6 若作商业用途，请购买正版，由于未及时购买和付费发生的侵权行为，使用者自行承担，概与本站无关。
还没有评论，来说两句吧...