此广告位展示模块 是本站自己写的一款，基本上自适应显示
放入后台 外观-小工具-自定义HTML-自定义显示位置
![图片[1]- 子比主题首页广告位模块](https://www.dh139.cn/wp-content/uploads/2025/10/143254n4wwg7w7jghg7rjw-24-1024x323.jpg)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子比主题导航模块</title>
<!-- 引入外部资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<style>
/* 使用ID选择器替代类选择器，增加特异性 */
#zib-nav-container {
width: 100%;
margin: 0 auto;
}
#zib-nav-row {
display: flex;
flex-wrap: wrap;
}
.zib-nav-col-1-3 {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 2px;
margin-bottom: 4px;
}
/* 使用唯一的命名空间前缀 */
.zib-nav-widget {
background-color: #fff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.zib-nav-widget:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.zib-nav-widget-title {
padding: 12px 15px;
background-color: #f8f9fa;
color: #333;
display: flex;
align-items: center;
border-bottom: 1px solid #eee;
}
.zib-nav-widget-title a {
color: #333;
font-size: 16px;
font-weight: 600;
margin-right: 8px;
}
.zib-nav-widget-title span {
font-size: 12px;
opacity: 0.8;
color: #666;
}
.zib-nav-widget-content {
padding: 12px 15px;
flex: 1;
}
/* 广告服务模块 */
.zib-nav-tags {
display: flex;
flex-wrap: wrap;
}
.zib-nav-tags a {
margin: 0 4px 4px 0;
padding: 4px 8px;
background-color: #f0f0f0;
border-radius: 3px;
font-size: 12px;
transition: background 0.3s, color 0.3s;
flex: 1 0 auto;
min-width: calc(33.33% - 8px);
text-align: center;
}
.zib-nav-tags a:hover {
background-color: #e0e0e0;
}
/* 颜色样式 */
.zib-nav-tags a.zib-nav-style-orange {
background-color: #ff7e00;
color: #fff;
}
.zib-nav-tags a.zib-nav-color-red {
color: #ff3333;
}
.zib-nav-tags a.zib-nav-color-blue {
color: #007BFF;
}
.zib-nav-tags a.zib-nav-color-green {
color: #28a745;
}
.zib-nav-tags a.zib-nav-color-purple {
color: #6f42c1;
}
.zib-nav-tags a.zib-nav-color-teal {
color: #20c997;
}
.zib-nav-tags a.zib-nav-color-yellow {
color: #ffc107;
}
.zib-nav-tags a.zib-nav-color-pink {
color: #e83e8c;
}
.zib-nav-tags a.zib-nav-color-indigo {
color: #6610f2;
}
/* 响应式设计 */
@media (max-width: 992px) {
.zib-nav-col-1-3 {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 576px) {
.zib-nav-col-1-3 {
flex: 0 0 100%;
max-width: 100%;
}
.zib-nav-tags a {
min-width: calc(50% - 8px);
}
}
</style>
</head>
<body>
<!-- 子比主题导航模块 - 使用ID选择器和唯一命名空间 --> <div id="zib-nav-container"> <div id="zib-nav-row"> <!-- 导航模块 1：广告服务 --> <div class="zib-nav-col-1-3"> <div class="zib-nav-widget zib-nav-widget-2"> <h3 class="zib-nav-widget-title"> <i class="fa fa-bullhorn zib-nav-ydicon" aria-hidden="true" style="color: #007BFF;"></i> <a href="/" target="_blank" rel="noopener">广告服务</a>
<span>广告位展示</span></h3><div class="zib-nav-widget-content"><div class="zib-nav-no-scroll zib-nav-tags"><a class="zib-nav-style-orange" href="https://dns.mduge.com/" target="_blank" rel="noopener"><span>文字广告位10/月</span></a>
<a class="zib-nav-color-red" href="https://dns.mduge.com/" target="_blank" rel="noopener"><span>备案域名注册</span></a>
<a class="zib-nav-color-blue" href="/" target="_blank" rel="noopener"><span>广告位 3</span>
</a>
<a class="zib-nav-color-green" href="/" target="_blank" rel="noopener"> <span>广告位 4</span>
</a>
<a class="zib-nav-color-purple" href="/" target="_blank" rel="noopener"> <span>广告位 5</span> </a> <a class="zib-nav-color-teal" href="/" target="_blank" rel="noopener"> <span>广告位 6</span> </a> <a class="zib-nav-color-yellow" href="/" target="_blank" rel="noopener"> <span>广告位 7</span> </a> <a class="zib-nav-color-pink" href="/" target="_blank" rel="noopener"> <span>广告位 8</span>
</a>
</div>
</div>
</div>
</div>
<!-- 导航模块 2：快捷导航 - 广告位 --> <div class="zib-nav-col-1-3"> <div class="zib-nav-widget zib-nav-widget-1 zib-nav-widget-hot-cats"> <h3 class="zib-nav-widget-title"> <i class="fa fa-compass zib-nav-ydicon" aria-hidden="true" style="color: #007BFF;"></i>
<a href="/" target="_blank" rel="noopener">广告服务 </a><span>广告位展示</span>
</h3> <div class="zib-nav-widget-content"> <div class="zib-nav-no-scroll zib-nav-tags"> <a class="zib-nav-style-orange" href="/" target="_blank" rel="noopener"><span>文字广告位10/月</span> </a> <a class="zib-nav-color-indigo" href="/" target="_blank" rel="noopener"> <span>导航广告 2</span> </a> <a class="zib-nav-color-red" href="/" target="_blank" rel="noopener"> <span>导航广告 3</span> </a> <a class="zib-nav-color-blue" href="/" target="_blank" rel="noopener"> <span>导航广告 4</span> </a> <a class="zib-nav-color-green" href="/" target="_blank" rel="noopener"> <span>导航广告 5</span> </a> <a class="zib-nav-color-purple" href="/" target="_blank" rel="noopener"> <span>导航广告 6</span> </a> <a class="zib-nav-color-teal" href="/" target="_blank" rel="noopener"> <span>导航广告 7</span> </a> <a class="zib-nav-color-yellow" href="/" target="_blank" rel="noopener"> <span>导航广告 8</span> </a> </div> </div> </div> </div>
<!-- 导航模块 3：最新活动 - 广告位 --> <div class="zib-nav-col-1-3"> <div class="zib-nav-widget zib-nav-widget-4"> <h3 class="zib-nav-widget-title"><i class="fa fa-bolt zib-nav-ydicon" aria-hidden="true" style="color: #007BFF;"></i>
<a href="https://www.nnymk.com/" target="_blank" rel="noopener">广告服务 </a> <span>广告位展示</span> </h3> <div class="zib-nav-widget-content"> <div class="zib-nav-no-scroll zib-nav-tags"> <a class="zib-nav-style-orange" href="/" target="_blank" rel="noopener"><span>文字广告位10/月</span> </a> <a class="zib-nav-color-pink" href="/" target="_blank" rel="noopener"> <span>活动广告 2</span> </a> <a class="zib-nav-color-indigo" href="/" target="_blank" rel="noopener"> <span>活动广告 3</span> </a> <a class="zib-nav-color-red" href="/" target="_blank" rel="noopener"> <span>活动广告 4</span> </a> <a class="zib-nav-color-blue" href="/" target="_blank" rel="noopener"> <span>活动广告 5</span> </a> <a class="zib-nav-color-green" href="/" target="_blank" rel="noopener"> <span>活动广告 6</span> </a> <a class="zib-nav-color-purple" href="/" target="_blank" rel="noopener"> <span>活动广告 7</span> </a> <a class="zib-nav-color-teal" href="/" target="_blank" rel="noopener"> <span>活动广告 8</span> </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 子比主题导航模块结束 -->
<script>
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
// 使用ID选择器定位容器，减少与主题的冲突
const navContainer = document.getElementById('zib-nav-container');
if (navContainer) {
// 只选择导航模块内的链接，避免影响主题其他链接
const links = navContainer.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('click', function(e) {
// 如果链接是外部链接且没有rel属性，则添加noopener noreferrer
if (this.href.startsWith('http') && !this.href.startsWith(window.location.origin) && !this.rel) {
this.rel = 'noopener noreferrer';
}
});
});
// 只选择导航模块内的widget，避免影响主题其他元素
const widgets = navContainer.querySelectorAll('.zib-nav-widget');
widgets.forEach(widget => {
// 为每个模块添加初始动画
setTimeout(() => {
widget.style.opacity = '1';
widget.style.transform = 'translateY(0)';
}, 100 * Array.from(widgets).indexOf(widget));
});
}
});
</script>
</body>
</html>感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
声明
花猪使用须知
- 1本网站内容仅供个人学习、研究和欣赏，未经授权禁止用于任何商业用途。
- 2网站中的代码示例仅用于教育目的，使用时请遵循相关开源协议和授权规定。
- 3转载或引用本站内容请注明出处，尊重原创，共同维护良好的创作环境。
- 4网站评论区欢迎理性讨论，请勿发表违反法律法规的言论，共建和谐社区。
- 5如有内容侵犯您的权益，请通过博客联系方式告知，将立即核实并处理。
- 6使用本站资源时产生的任何问题与后果需自行承担，请谨慎操作。
THE END
喜欢就支持一下吧
相关推荐
暂无评论内容