• 注册
  • 发布
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:5 内容:9

    如何制作一个好看的广告banner?(纯代码实现)

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 1
    • wordpress主题
    • 全栈营销师
      2
      内容推荐官

      如何制作一个好看的广告banner?(纯代码实现)

      先看看demo视频效果:

      如何制作一个好看的广告banner?(纯代码实现)

      上图中的效果如何实现呢?

      分解动作:主要通过DIV+CSS实现,其中可以自有进行A标签设置,输出到任意地方均可。

      代码分享如下:

      <div class="recruit">
          <div class="recruit-title"> MarTecher推荐官招募令</div>
          <div class="btn-recruit">
            <a class="btn2 btn-effect" href="javascript:void(0);" onclick="jinsom_open_user_chat(14,this);">我要推荐</a>
          </div>
        </div>
      <style>
        .recruit {
          text-align: center;
          height: 100px;
          line-height: 40px;
          margin-bottom: 20px;
          width: 100%;
          background: url(/wp-content/uploads/2021/09/banner_recruit.jpg) no-repeat ;
          background-size: cover; 
          border-radius: 5px;
      
      }
         .recruit-title {
          display: inline-block;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 700;
          color: #fff;
          font-size: 30px;
          margin: 7px;
      }
        .btn-recruit {margin-top:0px;}
        .btn-recruit a {
          border-radius: 32px;
          padding: 3px 10px;
          color: #f9c44d;
          border: 2px solid #ffd576;
          font-size: 15px;
          background: #fffbf1;
      }
      </style>

      素材背景:

      如何制作一个好看的广告banner?(纯代码实现)

      更多问题,可以在本贴留言!

      隐藏内容需要付费才可以看见

      马上购买
    • 生成海报
    • MarTech·小白
      赠送了礼物[比心]

      耳东人圭

      回复

      请登录之后再进行评论

      登录

      推荐圈子

      暂没有数据

    • 做任务
    • 签到中心
      小黑屋
      举报中心
    • 飞优网小程序码 小程序扫码
    • 关闭窗口
      下载海报