纯HTML代码实现自适应广告带按钮

<html>
  <head>
    <meta charset="UTF-8">
    <style>
      .ad {
        background-color: #fff;
        padding: 30px;
        text-align: center;
      }
      .ad h1 {
        margin-top: 0;
        font-size: 36px;
        font-weight: 700;
      }
      .ad p {
        font-size: 18px;
        margin-bottom: 20px;
      }
      .ad a {
        text-decoration: none;
        font-weight: 700;
        color: #000;
        margin-top: 20px;
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #ff6600;
        transition: all 0.3s;
      }
      .ad a:hover {
        background-color: #ff3300;
      }
    </style>
  </head>
  <body>
    <section class="ad">
      <h1>在线工具</h1>
      <p>在线工具(Box3.0)是一个专注于效率办公工具的网站,目前拥有 240 多款自研在线工具,分为视频处理、音频处理、图片处理、文档处理、文档转换、办公辅助.</p>
      <a href="http://box.songjiale.fun" target="_blank" class="cta">免费使用</a>
    </section>
  </body>
</html>

版权声明 1 本网站名称：宋佳乐博客
2 本站永久网址：www.songjiale.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ2801910651进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大都存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
7 如无特别声明本文即为原创文章仅代表个人观点，版权归《宋佳乐博客》所有，欢迎转载，转载请保留原文链接。
8 如果您想第一时间收到本博最新文章可微信搜索公众号《佳乐博客》关注公众号第一时间获取最新消息。

广告位联系QQ2801910651