WordPress网站主题首页添加四格小工具

效果预览

WordPress网站主题首页添加四格小工具-森西分享

教程开始

第一步:引入JS

<code class="language-none">&lt;script src="https://use.fontawesome.com/865314f53c.js"&gt;&lt;/script&gt;
</code>

第二步:将下面代码放到需要展示的位置

<code class="language-none">&lt;div class="section"&gt;
&lt;div class="home-first"&gt;
&lt;div class="container hide_sm"&gt;
&lt;div class="col-1-4"&gt;
&lt;div class="hf-widget hf-widget-1 hf-widget-software"&gt;
&lt;h3 class="hf-widget-title"&gt;
&lt;i class="fa fa-cloud"&gt;&lt;/i&gt;
&lt;a href="#" target="_blank"&gt;云产品&lt;/a&gt;
&lt;span&gt;云服务器等云产品推荐&lt;/span&gt;
&lt;/h3&gt;
&lt;div class="hf-widget-content"&gt;
&lt;div class="scroll-h"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;a href="#" rel="external nofollow" target="_blank"&gt;
&lt;i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H026cdceabc1942e1b82b1eb2cd5b9e41P.png)"&gt;&lt;/i&gt;
&lt;span&gt;阿里云&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H006240f97bff40f5aea223eb51b33c3dq.png)"&gt;&lt;/i&gt;
&lt;span&gt;腾讯云&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H2da200a36ce2401595f8e03f8c750deeT.png)"&gt;&lt;/i&gt;
&lt;span&gt;企业云&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="thumb " style="background-image:url(https://ae01.alicdn.com/kf/H128bb4d1c77d4f6f9032b934a6a234beD.png)"&gt;&lt;/i&gt;
&lt;span&gt;香港云&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-1-4 sxweb"&gt;
&lt;div class="hf-widget hf-widget-2"&gt;
&lt;h3 class="hf-widget-title"&gt;
&lt;i class="fa fa-tint"&gt;&lt;/i&gt;
&lt;a href="#" target="_blank"&gt;看热门&lt;/a&gt;
&lt;span&gt;主题模板库精品推荐&lt;/span&gt;&lt;/h3&gt;
&lt;div class="hf-widget-content"&gt;
&lt;div class="no-scroll hf-tags"&gt;
&lt;a class="style_orange" href="#" target="_blank"&gt;
&lt;span&gt;RiPro美化&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;wordpress教程&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;源码&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;样机&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;配色神器&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;本站服务&lt;/span&gt;&lt;/a&gt;
&lt;a class="" href="#" target="_blank"&gt;
&lt;span&gt;服务器特惠&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-1-4 sxweb"&gt;
&lt;div class="hf-widget hf-widget-1 hf-widget-hot-cats"&gt;
&lt;h3 class="hf-widget-title"&gt;
&lt;i class="fa fa-dropbox"&gt;&lt;/i&gt;
&lt;a href="#" target="_blank"&gt;热门专区&lt;/a&gt;
&lt;span&gt;推荐设计热点&lt;/span&gt;&lt;/h3&gt;
&lt;div class="hf-widget-content"&gt;
&lt;div class="icon-b"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="fa fa-bookmark"&gt;&lt;/i&gt;
&lt;span&gt;设计软件&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="fa fa-paint-brush"&gt;&lt;/i&gt;
&lt;span&gt;素材专题&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="fa fa-graduation-cap"&gt;&lt;/i&gt;
&lt;span&gt;设计教程&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="fa fa-pencil-square-o"&gt;&lt;/i&gt;
&lt;span&gt;设计自检&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class="col-1-4 sxweb"&gt;
&lt;div class="hf-widget hf-widget-4"&gt;
&lt;h3 class="hf-widget-title"&gt;
&lt;i class="fa fa-book"&gt;&lt;/i&gt;
&lt;a href="#" target="_blank"&gt;最新活动&lt;/a&gt;
&lt;span&gt;免费会员享福利&lt;/span&gt;
&lt;/h3&gt;
&lt;div class="hf-widget-content"&gt;
&lt;div class="scroll-h"&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;h3&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="icon-time"&gt;&lt;/i&gt;
&lt;span&gt;RiPro美化服务火热售卖中&lt;/span&gt;
&lt;em&gt;网站美化&lt;/em&gt;&lt;/a&gt;
&lt;/h3&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;h3&gt;
&lt;a href="#" target="_blank"&gt;
&lt;i class="icon-time"&gt;&lt;/i&gt;
&lt;span&gt;关于本站积分付费阅读获取内容说明&lt;/span&gt;
&lt;em&gt;积分说明&lt;/em&gt;&lt;/a&gt;
&lt;/h3&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code>

第三步:CSS美化代码

<code class="language-none">&lt;style&gt;
.hide_sm{display: flex;}
.container .col-1-4{float: left;box-sizing: border-box;margin-right: 7.3333px;width: 100%;}
.container .col-1-4:last-child{margin-right: 0;}
@media (min-width:768px){.container .col-1-4{width: 50%}}
@media (min-width:1024px){.container .col-1-4{width: 25%}}
@media (min-width:1024px){.ripro-dark .home-first{background: #232425;}}
@media (min-width:768px){.home-first .h-images:after{display: none}}
@media (min-width:768px){.home-first .h-images{display: box;display: -ms-flexbox;display: flex;width: 100%;justify-content: space-between}}
@media (min-width:1024px){.home-first .h-images{width: 25%}}
.home-first .h-images .item-tuwen{float: left;padding: 0 6.5px;width: 50%}
@media (min-width:1024px){.home-first .h-images .item-tuwen{float: none}}
@media (min-width:1024px){.home-first .h-images{display: block;box-sizing: border-box;padding: 0 7.3333px}.home-first .h-images .item-tuwen{padding: 0;width: auto}}
.home-first .item-tuwen{margin-bottom: 15px}
@media (min-width:768px){.home-first .item-tuwen{margin-bottom: 13px}}
.home-first .item-tuwen a{position: relative;display: block;overflow: hidden;border-radius: 3px}
.home-first .item-tuwen a .thumb{padding-top: 57%;transition: all .2s;transform-origin: center}
.home-first .item-tuwen a strong{position: absolute;right: 0;bottom: 0;left: 0;z-index: 10;display: block;padding: .4em .8em .6em;background-image: linear-gradient(to bottom,rgba(0,0,0,.2) 0,rgba(0,0,0,.6) 100%);background-repeat: repeat-x;box-shadow: 0 -7px 15px rgba(0,0,0,.2);color: #fff;letter-spacing: .5px;font-weight: 700;font-size: 9pt;line-height: 1.3}
@media (min-width:768px){.home-first .item-tuwen a strong{letter-spacing: 1px;font-size: 14px;line-height: 1.4}}
.home-first .hf-widget{box-sizing: border-box;padding: 14px 17px 0;border: 1px solid #f2f2f2;background: #fff;box-shadow: 0 34px 20px -24px rgba(220, 220, 220, 0.18);border-radius: 3px;}
.ripro-dark .home-first .hf-widget{border: 1px solid #2b2b2b;background: #232425;box-shadow: 8px 8px 9pt #212121;}
@media (min-width:768px){.home-first .hf-widget{overflow: hidden;height: 135px}}
@media (min-width:1024px){.home-first .hf-widget{margin-bottom: 0}}
.home-first .hf-widget [class*=" icon-"]:before,.home-first .hf-widget [class^=icon-]:before{margin: 0}
.home-first .hf-widget .hf-widget-title{margin-bottom: 14px;padding: 0 0 10px;border-bottom: 1px solid #f2f2f2;color: #383838;letter-spacing: 1px;font-weight: 700;font-size: 15px;line-height: 20px;margin-bottom: 10px;}
.ripro-dark .home-first .hf-widget .hf-widget-title{border-bottom: 1px solid #696969;}
.ripro-dark .home-first .hf-widget .hf-widget-title a{color: #ccc;}
.home-first .hf-widget .hf-widget-title&gt;i{margin-right: 2px;color: #448aff;}
.ripro-dark .home-first .hf-widget .hf-widget-title&gt;i{margin-right: 2px;color: #ffa363}
.home-first .hf-widget .hf-widget-title span{margin-left: 10px;color: #a7a7a7;font-weight: 400;font-size: 9pt;line-height: 20px}
@media (min-width:1024px){.home-first .hf-widget .hf-widget-title span{display: none}}
@media (min-width:1330px){.home-first .hf-widget .hf-widget-title span{display: inline}}
.home-first .hf-widget .hf-widget-title .pages{float: right;padding-top: 2px}
.home-first .hf-widget .hf-widget-title .pages .next,.home-first .hf-widget .hf-widget-title .pages .prev{float: left;margin: 0;padding: 0 2px;height: 1pc;border: 1px solid #eee;color: #ccc;font-size: 9px;line-height: 15px;cursor: pointer}
.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover{color: #448aff}
.home-first .hf-widget .hf-widget-title .pages .prev{border-right: none}
.home-first .hf-widget .hf-tags{margin-bottom: -10px}
@media (min-width:768px){.home-first .hf-widget .hf-tags{overflow: hidden;height: 4pc}}
.home-first .hf-widget .hf-tags a{display: inline-block;margin: 0 5px 10px;padding: 0 5px;height: 22px;border-radius: 2px;background: #f9f9f9;color: #888;white-space: nowrap;font-size: 9pt;line-height: 22px;word-break: break-all}
.home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:hover{background: #448aff;color: #fff;}
.ripro-dark .home-first .hf-widget .hf-tags a{background: #2c2e2f;}
.home-first .hf-widget-4 .hf-widget-content{color: #888;font-size: 14px}
.home-first .hf-widget-4 .hf-widget-content a{color: #888}
.home-first .hf-widget-4 .hf-widget-content a:hover{color: #448aff;}
.home-first .hf-widget-4 .hf-widget-content h3{overflow: hidden;height: 22px;font-weight: 400;font-size: 13px;line-height: 22px;margin: 0 0 10px;}
.home-first .hf-widget-4 .hf-widget-content em{float: right;padding: 0 5px;height: 22px;border-radius: 2px;background: #fff5ef;color: #ff5c00;font-style: normal;font-size: 9pt;line-height: 22px}
.home-first .hf-widget-4 .hf-widget-content ul li{margin-bottom: 5px}
.home-first .hf-widget-4 .hf-widget-content ul li:last-child{margin-bottom: 0}
.home-first .hf-widget-1 .hf-widget-content a{color: #888}
.ripro-dark .home-first .hf-widget-1 .hf-widget-content a{color: #ccc}
.home-first .hf-widget-1 .hf-widget-content a:hover{color: #69a1ff;}
.home-first .hf-widget-1 .hf-widget-content li{float: left;box-sizing: border-box;padding: 0 10px;width: 25%;text-align: center;font-size: 9pt}
.home-first .hf-widget-1 .hf-widget-content li .thumb{margin: 0 auto 4px;padding-top: 36px;width: 36px}
.home-first .hf-widget-1 .hf-widget-content li span{display: block; height: 16px; line-height: 16px; overflow: hidden;}
.home-first .hf-widget-1 .hf-widget-content .scroll-h{margin: 0 -10px;}
.home-first .scroll-h{position: relative;overflow: hidden;height: 56px;}
.home-first .scroll-h ul{list-style: none;position: absolute;top: 0;left: 0;width: 100%;transition: all .2s; margin:0;padding-left:0;}
.home-first .scroll-h ul:after,.home-first .scroll-h ul:before{clear: both;display: block;visibility: none;height: 0;content: "";line-height: 0}
.home-first .scroll-h .holdon{position: absolute;top: 0;left: 100%}
.home-first .scroll-h .holdon-prev{left: -100%}
.home-first .hf-widget-hot-cats .hhicon{display: inline-block;margin-bottom: 5px;width: 36px;height: 36px;border-radius: 100%;background: #e8fbff;color: #448aff;text-align: center;font-size: 20px;line-height: 36px;}
.ripro-dark .home-first .hf-widget-hot-cats .hhicon{background: #2c2e2f;color: #ffa363;}
.home-first .hf-widget-hot-cats .scroll-h li a{display: block}
.home-first .hf-widget-hot-cats .scroll-h li a:hover .hhicon{background: #448aff;color: #fff;}
.home-first .thumb{position: relative;display: block;overflow: hidden;padding-top: 66.7%;width: 100%;height: 0;background-color: transparent;background-position: center;background-size: cover;background-repeat: no-repeat;transition: all .2s}
.home-first i{font-weight: 300}
@media screen and (max-width:720px){.home-first .hf-widget-1 .hf-widget-content .scroll-h,.home-first .hf-widget-content{margin: 1pc -10px}}
@media (max-width: 768px){.sxweb {display:none;}}
.icon-b i{
display: inline-block;
    margin-bottom: 5px;
    width: 36px;
    height: 36px;
    border-radius: 100%;
    background: #e8fbff;
    color: #448aff;
    text-align: center;
    font-size: 20px;
    line-height: 36px;
}
.icon-b i:hover{
    background: #448aff;
    color: #fff;
}
/*b2主题隐藏右下角广告角标,其他模板可删除*/
.ads-box img{ 
width:138px;
 border-radius:0; 
}
 .ads-tips{
 display:none;
 } 
.ad-Wrap {
 height:88px;
 margin:0 auto;
 margin-top:-20px; 
background-color: transparent; 
}
&lt;/style&gt;
</code>

 

WordPress教程

解决WordPress程序无法更新的最有效方法

2020-4-9 23:26:10

WordPress教程

一段代码自动提升网站关键词排名

2020-4-20 1:54:28

无法充值请加客服QQ3635339338人工充值
24小时自助充值教程QQ3635339338人工充值
版权声明 本站所发布的一切与破解相关的文章仅限用于学习和研究目的,请在下载后的24个小时之内,从您的电脑中彻底删除。所有资源均来自于网络,不得用于商业或者非法用途,否则一切后果请用户自负。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索