标题
网站文字广告位详细完整代码-支持所有网站
逍遥 - 02月05日 10:31
52℃ 0
内容
演示图片
代码关键说明
布局逻辑：通过
flex-wrap: wrap实现自动换行，width: calc(25% - 7.5px)确保一行刚好 4 个广告位（减去间距的均分）。背景色设置：用
nth-child为 12 个广告位分别设置不同的主题色，避免重复，且颜色都是常用的醒目色系。链接设置：所有广告位的链接都指向
https://www.81dir.com，target="_blank"保证点击后新窗口打开，不影响当前页面。交互优化：添加
hover透明度变化，提升用户体验；响应式适配小屏幕（手机端）自动变为一行 2 个。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站联盟广告位</title> <style> /* 广告容器：控制整体布局，一行4个，自动换行 */ .ad-container { display: flex; flex-wrap: wrap; gap: 10px; /* 广告位之间的间距 */ padding: 10px; max-width: 800px; /* 容器最大宽度，可根据需要调整 */ } /* 单个广告位样式 */ .ad-item { width: calc(25% - 7.5px); /* 一行4个，减去gap的均分 */ height: 40px; /* 广告位高度，可调整 */ line-height: 40px; /* 文字垂直居中 */ text-align: center; border-radius: 4px; /* 圆角，可选 */ cursor: pointer; transition: opacity 0.2s; /* hover效果 */ } /* 鼠标悬浮效果 */ .ad-item:hover { opacity: 0.9; } /* 广告文字样式 */ .ad-item a { color: #fff; /* 文字白色，适配不同背景色 */ text-decoration: none; /* 去掉下划线 */ font-size: 14px; display: block; /* 让链接占满整个广告位 */ width: 100%; height: 100%; } /* 自定义不同背景色（12个，3行×4个） */ .ad-item:nth-child(1) { background-color: #e74c3c; } .ad-item:nth-child(2) { background-color: #3498db; } .ad-item:nth-child(3) { background-color: #2ecc71; } .ad-item:nth-child(4) { background-color: #f39c12; } .ad-item:nth-child(5) { background-color: #9b59b6; } .ad-item:nth-child(6) { background-color: #1abc9c; } .ad-item:nth-child(7) { background-color: #e67e22; } .ad-item:nth-child(8) { background-color: #34495e; } .ad-item:nth-child(9) { background-color: #16a085; } .ad-item:nth-child(10) { background-color: #8e44ad; } .ad-item:nth-child(11) { background-color: #d35400; } .ad-item:nth-child(12) { background-color: #27ae60; } /* 响应式适配：小屏幕下调整布局 */ @media (max-width: 600px) { .ad-item { width: calc(50% - 5px); /* 小屏幕一行2个 */ } } </style> </head> <body> <!-- 广告位容器 --> <div class="ad-container"> <!-- 第一行4个 --> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <!-- 第二行4个 --> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <!-- 第三行4个 --> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> <div class="ad-item"><a href="https://www.81dir.com" target="_blank">网站联盟</a></div> </div> </body> </html>
你可能想看：
标签
- 最近发表
- 相关推荐
-
- 用户中心登录管理页面-完整代码，欢迎测试
- 算卦页面完整代码全开源未加密可以上线使用1.05最新版
- 美百广告联盟 - 专注富媒体广告和手机移动端广告联盟平台
- 讯飞听见-免费在线录音转文字-语音转文字-录音整理-语音翻译软件
- 网站速度检测支持多官网进入适应所有设备
- 网站跳转HTML代码GO跳转导航网站必备广告必备跳转
- 老榕树网盟-广告联盟、网站联盟、老榕树联盟、CPC联盟、网络广告
- 宽带检测速度完整源码1.03版本最新版，支持多线路切换
- 高频 HTML 代码片段和高频 CSS 代码片段
- 网站降权后快速恢复权重详细教程
- Peak码支付
- 必应 IndexNow api key 的获取详细方法
- 码支付和易支付那个好，看完你就知道怎么选择了
- 最新码支付首页模板全网独家，喜欢你就来
- xarr码支付首页模板最新版-全网独家