Loading
0

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

公众号搜索菜鸟站长之家

效果预览

第一步:引入JS

<script src =“ https://use.fontawesome.com/865314f53c.js”> </ script>

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

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

第三步:CSS美化代码

<样式>.hide_sm
{
 display:flex;
}

.container .col-1-4
{
 float:left; 装箱尺寸:边箱;右边距:7.3333px; 宽度:100%;
}

.container .col-1-4:最后一个孩子
{
 margin-right:0;
}

@media(最小宽度:768px)
{
。	container .col-1-4
 {
  width:50%
 }
}

@media(最小宽度:1024px)
{
。容器	.col-1-4
 {
  宽度:25%
 }
}

@media(最小宽度:1024px)
{
。	ripro-dark .home-first
 {
  background:#232425;
 }
}

@media(最小宽度:768px)
{
。首页优先	.h图像:之后
 {
  display:none
 }
}

@media(最小宽度:768px)
{
。首页优先	.h图像
 {
  display:box ; 显示:-ms-flexbox; 显示:flex; 宽度:100%;justify-content:space-between
 }
}

@media(最小宽度:1024px)
{
。	home-first .h-images
 {
  width:25%
 }
}

.home-first .h-images .item-tuwen
{
 float:left ; 填充:0 6.5px; 宽度:50%
}

@media(最小宽度:1024px)
{
。	home-first .h-images .item-tuwen
 {
  float:none
 }
}

@media(最小宽度:1024px)
{
。	home-first .h-图片
 {
  display:block; border-radius:3px;
 }

 .ripro-dark .home-first .hf-widget
 {
  border:1px solid#2b2b2b; 背景:#232425; box-shadow:8px 8px 9pt#212121;
 } @	media(最小宽度:768px)
 {
  。home-first .hf-widget {overflow:hidden; 高度:135px
 }
}

@media(最小宽度:1024px)
{
。	home-first .hf-widget
 {
  margin-bottom:0
 }
}

.home-first .hf-widget [class * =“ icon-”]:在此之前,.home-first .hf-widget [class ^ = icon-]:在
{
 margin:0
}之前。.home-first .hf-widget .hf-widget-title
{
 margin-bottom:14px; 填充:0 0 10px; 边框底:1px实心#f2f2f2; 颜色:#383838; 字母间距:1px;font-weight:700;字体大小:15字;行高:20 ;;边距底:10错误;
}

.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> i
{
 margin-右:2px; color:#448aff;
}

.ripro-dark .home-first .hf-widget。hf-widget-title> i
{
 margin-right:2px; 颜色:#ffa363
}

.home-first .hf-widget .hf-widget-title跨度
{
 margin-left:10px; 颜色:#a7a7a7; 字体重量:400; 字体:9pt; line-height:20px
}

@media(最小宽度:1024px)
{
。	home-first .hf-widget .hf-widget-title span
 {
  display:none
 }
}

@media(最小宽度: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; 保证金:0; 填充:0 2px; 高度:1pc; 边框:1px实线#eee; 颜色:#ccc; 字体大小:9px; 行高:15px; 光标:指针
}

.home-first .hf-widget .hf-widget-title .pages .next:hover,.home-first .hf-widget .hf-widget-title .pages .prev:hover
{
 颜色:#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
 {
  溢出:隐藏;高度:4个
 }
}

.home-first .hf-widget .hf-tags
{
 显示:inline-block; 边距:0 5px 10px; 填充:0 5px; 高度:22px; 边框半径:2px;背景:#f9f9f9; 颜色:#888;空白:nowrap; 字体:9pt; 行高:22px; .home-first .hf-widget .hf-tags a.style_orange,.home-first .hf-widget .hf-tags a:悬停{background:#448aff; 颜色:#fff;
}

.ripro-dark .home-first .hf-widget .hf-tags
{
 {background:#2c2e2f;
}

.home-first .hf-widget-4 .hf-widget-content
{
 颜色:# 888;字体大小:14一日
}

.home-first .hf-widget-4 .hf-widget-content a
{
 color:#888
}

.home-first .hf-widget-4 .hf-widget-content a:悬停
{
 color:#448aff;
}

.home-first .hf-widget-4 .hf-widget-content h3
{
 溢出:隐藏;高度:22px; 字体重量:400; 字体大小:13px; 行高:22px; 边距:0 0 10px;
}

.home-first .hf-widget-4 .hf-widget-content em
{
 float:right; 填充:0 5px; 高度:22px; 边框半径:2px;背景:#fff5ef; 颜色:#ff5c00; font-style:正常;字体大小:9pt;行高:22px
}

.home-first .hf-widget-4 .hf-widget-content ul li
{
 margin-bottom:5px
}

.home-first .hf-widget- 4 .hf-widget-content ul li:最后一个孩子
{
 margin-bottom:0
}

.home-first .hf-widget-1 .hf-widget-content a
{
 color:#888
}

.ripro-dark .home-首先.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; 装箱尺寸:边箱;填充:0 10px; 宽度:25%;文字对齐:居中;字体大小:9pt
}

.home-first .hf-widget-1 .hf-widget-content li .thumb
{
 margin:0 auto 4px; padding-top:36px;宽度:36px
}

.home-first .hf-widget-1。

 

保存去看看效果。

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。
4、转载请保留原文地址,违者后果自负,本站保留一切法律追责权力。