• 注册
  • APP下载安卓
  • 注册
  • wordpress主题 wordpress主题 关注:3211 内容:12

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

  • 查看作者
  • 打赏作者
  • 当前位置: 飞优网 > Wordpress > wordpress主题 > 正文
    • 6022
    • wordpress主题
    • MA·6
      大会员
      冲向2023

      如何制作一个好看的广告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·3
      YYDS
      赠送了礼物[比心]

      耳东人圭

      回复
      MA·5
      精神小伙
      爱心

      自满必定失败,骄傲必定后悔。

      回复
      MA·5
      精神小伙
      比心

      泉涸,鱼相与处于陆,相呴以湿,相濡以沫,不如相忘于江湖。

      回复
      MA·5
      精神小伙
      爱心

      落花终有意,流水却无情。

      回复
      MA·5
      精神小伙
      爱心

      有情人终成眷属,没钱人亲眼目睹。

      回复
      MA·5
      精神小伙
      感谢

      晚来天欲雪,能饮一杯无。

      回复
      MA·5
      精神小伙
      爱心

      落叶他乡树,寒灯独夜人。

      回复
      MA·5
      精神小伙
      比心

      你可以期待太阳从东方升起,而风却随心所欲地从四面八方吹来。

      回复
      MA·5
      精神小伙
      辛苦了

      万般世故难欢乐,一程风景作银河。

      回复
      MA·2
      辛苦了
      回复

      请登录之后再进行评论

      登录
      和我们一起在QQ上讨论Hot
      官方人员的回复时间
      小于5分钟
      >
      弹幕互动暂停滚动
      发表

      热门作者

    • 龇牙咧嘴你干
      龇牙咧嘴你干
      龇牙咧嘴你干
    • 骑猪Δ追太
      骑猪Δ追太
      骑猪Δ追太
    • 风伴终
      风伴终
      风伴终
    • 颓废美堕落
      颓废美堕落
      颓废美堕落
    • 青春还年
      青春还年
      青春还年
    • 青春命葬校
      青春命葬校
      青春命葬校
    • 陌生的挚
      陌生的挚
      陌生的挚
    • 错过是一种遗
      错过是一种遗
      错过是一种遗
      • 总打赏排行
      • 今日收益排行
    • 小助手
      小助手
      回首向来萧瑟处,归去, 也无风雨也无晴。
    • 翰林学士
      翰林学士
      内心湛然,则无往而不乐。
    • 诸子百家
      诸子百家
      物质与意识的辩证关系:物质决定意识,意识反作用于物质。
    • 文韬武略
      文韬武略
      真正走掉那次,关门声最小。
    • 运营者
      运营者
      常记溪亭日暮,沉醉不知归路。兴尽晚回舟,误入藕花深处。
    • MA
      MA
      上飞优 认识更多营销同行者
    • 诸葛大V
      诸葛大V
      上飞优 认识更多营销同行者
    • 清风徐来
      清风徐来
      上飞优 认识更多营销同行者
    • 耳东人圭
      耳东人圭
      耳东人圭
    • IoT物联网
      IoT物联网
      IoT物联 连接未来
    • 小助手
      小助手
      回首向来萧瑟处,归去, 也无风雨也无晴。
    • 诸子百家
      诸子百家
      物质与意识的辩证关系:物质决定意识,意识反作用于物质。
    • 翰林学士
      翰林学士
      内心湛然,则无往而不乐。
    • 文韬武略
      文韬武略
      真正走掉那次,关门声最小。
    • 那甜腐心蚀骨
      那甜腐心蚀骨
      梦想和现实,中间隔着一条泥泞的路,什么样的结果,取决于脚!
    • 微微安37℃
      微微安37℃
      黑色世界唯有东方的曙光。
    • 十八是只猫
      十八是只猫
      人性一个最特别的弱点就是:在意别人如何看待自己。
    • 小曦北
      小曦北
      你说过,人最大的敌人是自己。
    • 咕噜是只猫!
      咕噜是只猫!
      然后知生于忧患,而死于安乐也。
    • 歡喜
      歡喜
      人总是贪婪的,就像最开始,我也只是想知道你的名字。
    • 赞赏我们

      • 打赏我们
      • 加入微信群
      • 加入QQ群
      社群时间有限请加微信:tye10w
    • 赚金币
    • 换头衔
    • 新动态
    • 客服
    • 购物车
    • VIP权益
    • 帖子间隔 侧栏位置: