• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:1499 内容:11

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

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 2232
    • wordpress主题
    • 全栈营销师
      大会员
      推荐官

      如何制作一个好看的广告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?(纯代码实现)

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

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

      马上购买
      MA·新手
      1
      YYDS
      赠送了礼物[比心]

      耳东人圭

      回复
      MA·老炮
      爱心

      既然事情已经发生,与其纠结成因,不如先着眼于事情本身。

      回复
      MA·老炮
      精神小伙
      比心

      竟有如此美丽的结构存在

      回复
      MA·老炮
      爱心

      我又不是因为你们的评价才去当的英雄,是因为我想当才去当的。

      回复
      MA·老炮
      精神小伙
      爱心

      因为你喜欢海,所以我一直浪。

      回复
      MA·老炮
      精神小伙
      感谢

      凡事都有一个与一望而知不同的真相

      回复
      MA·老炮
      精神小伙
      爱心

      灯火欲离失,轻影黯花湿。微浮半谋面,我与泪三痴!

      回复
      MA·老炮
      精神小伙
      比心

      如果你在看,我就是你的风景。如果你在听,我该有多幸运。

      回复
      MA·老炮
      精神小伙
      辛苦了

      卡布奇诺今犹在,不见当年吃屏人。

      回复
      MA·小生
      辛苦了
      回复

      请登录之后再进行评论

      登录

      推荐圈子

    • 数字营销
      数字营销
      B2B数字营销研究与分析
    • 营销百科
      营销百科
      数字营销专有名词介绍
    • 推式营销
      推式营销
      Outbound Marketing
    • 集客营销
      集客营销
      Inbound Marketing
    • 赚金币
    • 发布
    • VIP权益
    • 帖子间隔 侧栏位置: