狐狸聚合登录,欢迎各位站长接入!

子比主题美化 – 利用小工具优化独立下载页(页面版)

免费领流量卡 流量卡包邮 本站同款主题 广告招租

网站文件下载很多网站都会用到,本站之前分享了2款文件下载的样式,需要的话可以站内搜索,今天分享的是利用页面小工具优化独立下载页版本,喜欢的保存收藏。

图片[1] - 子比主题美化 – 利用小工具优化独立下载页(页面版) - 狐狸资源网

教程开始

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

图片[2] - 子比主题美化 – 利用小工具优化独立下载页(页面版) - 狐狸资源网

外观 – 小工具 – 主内容上面 – 自定义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>

第二个区块

子比主题美化 – 利用小工具优化独立下载页(页面版) - 狐狸资源网
隐藏内容,输入密码后查看
微信扫描二维码或搜索【狐狸工具盒】小程序,输入【3721】获取密码验证后才能查看!!!

自此结束,主题更新不影响 

狐狸资源网温馨提醒您
文章没读爽?点我试试随机文章

本文最后更新于2024-09-24 08:31:34,若文章内容或链接失效,请 留言 QQ群 反馈!
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞0赞赏 分享
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容