文章 网页代码

博客网站添加好看的四格小工具

首页 > 网页代码 > 正文

博客网站添加好看的四格小工具第3张插图

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="#" 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="https://www.zxki.cn/" target="_blank">
<span>酷库博客</span></a>
<a class="" href="https://www.zxki.cn/sort/syrj" target="_blank">
<span>实用软件</span></a>
<a class="" href="https://www.zxki.cn/sort/cxym" target="_blank">
<span>程序源码</span></a>
<a class="" href="https://www.zxki.cn/sort/jsjc" target="_blank">
<span>技术教程</span></a>
<a class="" href="https://www.zxki.cn/sort/hd" target="_blank">
<span>活动资讯</span></a>
<a class="" href="https://www.zxki.cn/?plugin=wallpaper" target="_blank">
<span>壁纸酷</span></a>
<a class="" href="https://www.zxki.cn/fby" 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="https://www.zxki.cn/" target="_blank">热门专区</a>
<span>工具块</span></h3>
<div class="hf-widget-content">
<div class="icon-b">
<ul>
<li>
<a href="https://www.zxki.cn/" target="_blank">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<span>工具块</span></a>
</li>
<li>
<a href="https://www.zxki.cn/" target="_blank">
<i class="fa fa-cloud-download" aria-hidden="true"></i>
<span>工具块</span></a>
</li>
<li>
<a href="https://www.zxki.cn/" target="_blank">
<i class="fa fa-graduation-cap"></i>
<span>工具块</span></a>
</li>
<li>
<a href="https://www.zxki.cn/" 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>
博客网站添加好看的四格小工具第4张插图文件下载
网站添加方格工具.zip
PHP/HTML
5.4K
蓝奏云
更新时间:2023-01-06 08:20:16
这篇文章最后更新于2023-1-6,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
快乐二级域名分发系统重置版v1.7源码
« 上一篇 01月06日
基于Vue的Spring Boot的橘子视频解析系统源码
下一篇 » 01月06日
为了防止灌水评论,登录后即可评论!
注册登录

已有 15 条评论