网站首页添加好看的四格小工具HTML代码

1.下载附件文件，上传到网站根目录(文件名:sige.css),文件名可自定义(注意文件名一致)

<link rel="stylesheet" href="你的网站/sige.css" type="text/css" >

2.然后在网站添加引入css代码

也可自定义HTML里添加css代码最上方写入标签,将css代码放入标签内即可！

3.外观-小工具-自定义HTML添加如下代码，或者在网站模板想要添加方格工具的地方添加引入代码。

<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="https://www.aliyun.com/product/ecs?userCode=0juxmvcj" 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="https://curl.qcloud.com/KeuZuZZQ" 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="https://molure.cn/" target="_blank">  <span>25678资源博客</span></a>  <a class="" href="#" target="_blank">  <span>教程分享</span></a>  <a class="" href="#" target="_blank">  <span>源码分享</span></a>  <a class="" href="#" target="_blank">  <span>Android软件</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="http://www.molure.cn" target="_blank">  <i class="fa fa-thumbs-up" aria-hidden="true"></i>  <span>每日推荐</span></a>  </li>  <li>  <a href="https://api.molure.cn" target="_blank">  <i class="fa fa-cloud-download" aria-hidden="true"></i>  <span>软件下载</span></a>  </li>  <li>  <a href="https://molure.cn" target="_blank">  <i class="fa fa-graduation-cap"></i>  <span>源码教程</span></a>  </li>  <li>  <a href="#" target="_blank">  <i class="fa fa-picture-o" aria-hidden="true"></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>美化服务火热售卖中</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>