效果图

教程开始

第一步

资源下载页面 – 打开模块布局 主内容上面和下面打勾

第二步

外观 – 小工具 – 主内容上面 – 自定义html

<style>
  .background {
    /* 背景图片地址，替换为你的图片地址 */
    background-image: url('https://www.foxccs.com/s/pic/dl_head.png');
    
    /* 背景图片填充整个元素 */
    background-size: cover;
    
    /* 背景图片居中 */
    background-position: center;
    
    /* 背景图片不重复 */
    background-repeat: no-repeat;
    
    /* 使元素的高度至少为屏幕的90% */
    height: 80px;
   letter-spacing: 8px;
    
    /* 文本垂直和水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 其他样式 */
    text-align: center;
    color: #fff; /* 文字颜色为白色，根据背景调整 */
    font-family: 'Arial', sans-serif; /* 字体族 */
  }
	   @media (max-width: 480px) {
      h1 {
        font-size: 18px; /* 手机视图的字体大小 */
      }
    }
</style>

<div class="background zib-widget widget_text">
  <h1>狐狸资源网资源下载</h1>
</div>

主内容下面 – 两个 区块（文本和自定义都可以，建议区块）

第一个区块

<dl class="zib-widget widget_text">
<dt class="fl download-notice-title">
<span class="inline-block vertical-middle mr5 mb5 download-notice-ico ico"></span>注意事项</dt>
<dd class="download-notice-detail">
<p><b class="red1">
<p style="text-align:center" id="tf_lgz">本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有。</p></b></p>
<p>若为付费资源，请在下载后24小时之内自觉删除，若作商业用途，请到原网站购买，由于未及时购买和付费发生的侵权行为，与本站无关。</p>
<p>本站发布的内容若侵犯到您的权益，请联系：<b><a href="mailto:foxccs@qq.com" class="contact-link" style="color: blue;">狐狸资源网</a></b> 删除，我们将及时处理！</p>
<p><b>如下载有问题请重新下载，文件自下载之日起，可免费重复下载。若文件有问题，请及时联系<b>狐狸资源网</b>处理。</b></p>
</dd>
        </dl>
<style>
.fl {
  float: left;          /* 元素向左浮动，允许文本或其他元素环绕它 */
  display: inline;      /* 将元素的显示类型设置为内联，防止浮动引起的高度塌陷问题 */
}
.download-notice-title {
  width: 190px;              /* 元素宽度设置为190像素 */
  height: 100px;             /* 元素高度设置为100像素 */
  margin-right: 18px;        /* 右侧外边距为18像素 */
  margin-top: 4px;           /* 顶部外边距为4像素 */
  padding-top: 32px;         /* 顶部内边距为32像素，用于在内容和顶部边框之间创建空间 */
  border-right: 1px solid #ccc; /* 右侧边框为1像素实线，颜色为 #ccc，一种浅灰色 */
  text-align: center;        /* 文本内容水平居中对齐 */
  font-size: 28px;           /* 字体大小为28像素 */
  color: #999;               /* 文本颜色为 #999，一种深灰色 */
  font-family: microsoft yahei; /* 字体族设置为微软雅黑 */
  font-weight: 700;          /* 字体粗细设置为700，即加粗 */
}
.download-notice-ico {
  width: 36px;              /* 元素宽度设置为36像素 */
  height: 29px;             /* 元素高度设置为29像素 */
  background-position: 0 -372px; /* 背景图像的位置被设置在水平方向上偏移0像素，垂直方向上偏移-372像素 */
}
.download-notice-detail p {
  font: 13px/1.25 "microsoft yahei", simsun, arial; /* 设置字体大小为13像素，行高为1.25倍字体大小，字体族为微软雅黑、宋体、Arial */
}
.vertical-middle {
  vertical-align: middle; /* 垂直对齐方式设置为居中，常用于行内或表格单元格元素 */
}
.mb5 {
  margin-right: 5px;     /* 右侧外边距为5像素 */
  margin-bottom: 5px;    /* 底部外边距为5像素 */
}
.ico {
  background-image: url(//foxccs.com/s/pic/ico_png24.png); /* 设置背景图像为指定的URL */
  background-repeat: no-repeat;                         /* 背景图像不重复平铺 */
}
.red1 {
  color: #eb0064;        /* 文本颜色设置为特定的红色（十六进制颜色代码 #eb0064） */
  font-size: 14px;      /* 字体大小设置为14像素 */
}
</style>

第二个区块

自此结束，以后主题更新不影响