昨天，QQ好友叫我出一篇关于在网站首页添加广告的教程，刚好今天休息，现在就开始教程吧！

首页广告位演示

代码

<!--广告、赞助位置---->
<div class="ad1">
 <a href="https://www.nmssb.cn/safe/BEmUiqGK/"  rel="noopener nofollow">
  <img src="https://pan.nmssb.cn/view.php/b26a2f9160abce9a01ee21d3715b85c6.gif" title="bjfwq" alt="广告1">
 </a>
</div>
<br />
<div class="ad1">
 <a href="weixin://" 
   onclick="window.location.href='weixin://'; return false;"  rel="noopener nofollow">
  <img src="https://pan.nmssb.cn/view.php/4d824b84b35eb9ca40191dab2adef3ad.webp" title="fbjdcdn" alt="广告2">
 </a>
</div>
<!--广告、赞助位置-->

记得更换图片地址和跳转链接地址！！！

代码放置位置

打开你的服务器，找到你的joe主题-->index.php，进入index.php文件后，将上面的代码粘贴到181行的后面，就是原本后台广告位置的后面。具体看图完成操作！

css代码

.ad1 {
  position: relative; /* 定位基准 */
  display: inline-block;
  width: 100%;
}

.ad1 img {
  width: 100%;
  height: auto;
  display: block;
}

/* 广告角标 */
.ad1::after {
  content: "赞助";
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 51, 51, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-family: "Microsoft Yahei";
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 2;
}

/* 鼠标悬停微调 */
.ad1:hover::after {
  background: #ff3333;
  transform: scale(1.05);
  transition: all 0.3s;
}

在你的主题文件joe-->assets--> css 文件中新建一个css文件，我这里以joe.ad.css文件名为例咯，创建好之后直接粘贴css代码到新建的文件里面保存，随后去joe-->public--> include.php 里引入新建的css文件，引入代码：

<link href="/usr/themes/Joe/assets/css/joe-index-ad.css" rel="stylesheet">

总结

使用div盒子，使用class类名进行css设置来完成Joe主题首页广告位置的设置，后期我将研究重新用后台开关的形式来控制广告位置的开关和后台直接添加图片链接和跳转地址！敬请期待！再见！