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

追月流涟
萝莉JK制服

介绍:
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://www.xyjwangluo.com/" 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>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="https://www.xyjwangluo.com/" target="_blank">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span>每日推荐</span></a>
</li>
<li>
<a href="https://www.xyjwangluo.com/" target="_blank">
<i class="fa fa-cloud-download" aria-hidden="true"></i>
<span>软件下载</span></a>
</li>
<li>
<a href="https://www.xyjwangluo.com/" 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>

演示图:
网站首页添加四格小工具HTML代码


-----本页内容已结束,喜欢请分享-----


© 版权声明
版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明: 本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdogemojiemoji1emoji10emoji11emoji12emoji13emoji14emoji15emoji16emoji17emoji18emoji19emoji2emoji20emoji21emoji22emoji23emoji24emoji25emoji26emoji27emoji3emoji4emoji5emoji6emoji7emoji8emoji9
评论列表 (暂无评论,368人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码
我是分割线
我也是有底线哒~