nalaginrut-blog.md

通用样式

.ad {
  position: relative;
  display: block;
  max-height: 196px;
  max-width: 320px;
  border: 1px solid #d6d6d6;
  overflow: hidden;
}

.ad img {
  max-width: 100%;
  max-height: 100%;
}

.ad-tips {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 5px;
  background: #dcc;
}

页面列表版本:

样式：

.ad-wrapper-list {
  margin-top: -30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d6d6d6;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
}

HTML内容

<div class="ad-wrapper ad-wrapper-list">
  <a class="ad" href="https://lambdachip.com/" target="_blank">
    <img src="https://nalaginrut.com/img/lambdachip_adv.gif">
    <div class="ad-tips">LambdaChip Ad</div>
  </a>
</div>

预览脚本：

// 加样式
style = document.createElement('style');
document.body.appendChild(style);
style.innerHTML=`
.ad {
  display: block;
  position: relative;
  max-height: 196px;
  max-width: 320px;
  border: 1px solid #d6d6d6;
  overflow: hidden;
}

.ad img {
  max-width: 100%;
  max-height: 100%;
}

.ad-tips {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 5px;
  background: #dcc;
}

.ad-wrapper-list {
  margin-top: -30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d6d6d6;
  margin-bottom: 60px;
  display: flex;
  justify-content: center;
}
`; // 把对应样式设进去

// 加元素
node = document.createElement('div');
node.className = 'ad-wrapper ad-wrapper-list';
node.innerHTML = `
  <a class="ad" href="https://lambdachip.com/" target="_blank">
    <img src="https://nalaginrut.com/img/lambdachip_adv.gif">
    <div class="ad-tips">LambdaChip Ad</div>
  </a>
`;
main = document.querySelector('.main-content');
main.insertBefore(node, main.children[1]);

文章内容版本:

样式：

.ad-wrapper-post {
  margin: 30px 0 30px 30px;
  float: right;
  margin-left: 3em;
  display: flex;
  justify-content: center;
}

@media (max-width: 639px) {
  .ad-wrapper-post {
    float: none;
    margin: 30px 10px;
  }
}

HTML内容

<div class="ad-wrapper ad-wrapper-post">
  <a class="ad" href="https://lambdachip.com/" target="_blank">
    <img src="https://nalaginrut.com/img/lambdachip_adv.gif">
    <div class="ad-tips">LambdaChip Ad</div>
  </a>
</div>

预览脚本：

// 加样式
style = document.createElement('style');
document.body.appendChild(style);
style.innerHTML=`
.ad {
  display: block;
  position: relative;
  max-height: 196px;
  max-width: 320px;
  border: 1px solid #d6d6d6;
  overflow: hidden;
}

.ad img {
  max-width: 100%;
  max-height: 100%;
}

.ad-tips {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2px 5px;
  background: #dcc;
}

.ad-wrapper-post {
  margin: 30px 0 30px 30px;
  float: right;
  margin-left: 3em;
  display: flex;
  justify-content: center;
}

@media (max-width: 639px) {
  .ad-wrapper-post {
    float: none;
    margin: 30px 10px;
  }
}


`; // 把对应样式设进去

// 加元素
node = document.createElement('div');
node.className = 'ad-wrapper ad-wrapper-post';
node.innerHTML = `
  <a class="ad" href="https://lambdachip.com/" target="_blank">
    <img src="https://nalaginrut.com/img/lambdachip_adv.gif">
    <div class="ad-tips">LambdaChip Ad</div>
  </a>
`;
main = document.querySelector('.blog-post');
main.insertBefore(node, main.querySelector('.blog-post-content'));