微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

时间:2022-11-26 12:58:57 

本篇经验将讲到微信公众平台图文编辑,怎么制作怎么制作多色拼接的椭圆形状的文本框。原始案例以绿色边框为例,下文将逐步展开。

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

工具/原料

微信公众账号:服务号 订阅号 企业号

Macromedia Dreamweaver软件(文中都简称为DW)

一款测试效果的浏览器

一颗勇于探索的心

方法/步骤

1、这是做测试写好的代码,已经在DW中打开,原始案例以绿色边框为例。现在,拷贝下一个步骤的代码到你的软件,呈现本步骤图片效果。

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

2、

复制内容到剪贴板

  1. 微信公众号图文编-制作多色拼接文本框
       微信公众号图文编-制作多色拼接文本框

3、这一步讲解,如何改变上部文本框边框的颜色,So Easy!

将【border-color:green green green green;】代码改为【border-color:green yellow green green;】,或者任何你需要的颜色,效果就出来了。

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

4、这一步讲解,如何改变下部文本框边框的颜色,So Easy!

将【border-color:green green green green;】代码改为【border-color:green yellow purple green;】,或者任何你需要的颜色,效果就出来了。

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

5、这一步讲解,如何改变右侧文本框边框的颜色,So Easy!

将【border-color:green yellow purple green;】代码改为【border-color:yellow red purple green;】,或者任何你需要的颜色,效果就出来了。

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

6、在浏览器下预览后,拷贝效果到微信公众平台的图文编辑处,得到如下图所示效果:

微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)

注意事项

顶部代码不可缺,缺少会营销浏览器预览效果

直接选择需要的样式拷贝到需要的地方,修改其中的文字即可

标签:微信公众平台图文编辑-多色拼接边框+椭圆文本框(效果图)
0
投稿

猜你喜欢

  • iOS14.5隐私跟踪功能打不开怎么办

    2023-06-13 22:25:07
  • 微信怎么设置添加限制

    2023-08-04 08:01:33
  • Safari技巧:如何在iPhone上离线保存阅读列表?

    2022-04-20 17:03:19
  • 10分钟加速完成iOS5 越狱的后续操作

    2023-12-01 13:10:00
  • iPhone短信照片显示尚未送达怎么回事

    2021-03-29 07:06:21
  • iPad Air 2配置参数曝光 升级至2GB静音开关移除

    2021-07-02 07:49:50
  • itunes新版本不会用,itunes新版本用法教程

    2023-11-28 19:01:56
  • iPhone 12/12 Pro 开启 5G 后会很耗电吗?

    2021-06-24 11:27:47
  • iphone4s打字技巧

    2022-11-10 13:06:13
  • iphone13按两下安装APP怎么取消

    2022-03-09 23:17:21
  • 手机美图秀秀怎么进行老照片修复

    2023-10-17 04:59:29
  • 如何找回 iPhone 相册中丢失的照片?

    2022-02-04 11:45:50
  • 哔哩哔哩轻视频主页关闭的方法

    2023-09-21 07:29:19
  • 如何使用iToolab FixGo修复iPhone / iPad的系统问题?

    2023-11-24 19:58:59
  • iPad固件怎么区分

    2023-12-09 19:18:26
  • iPhone 不越狱如何恢复照片?

    2022-07-12 00:37:30
  • iPhone为什么会死机?iPhone死机如何强制重启?

    2023-01-08 16:09:16
  • ipad air2行货和港货哪个好?苹果ipad air2港货/行货区别

    2023-12-12 03:27:52
  • 为什么微信里的陌生人可以不用通过我的验证就自动添加了

    2021-04-16 23:55:42
  • 如何用电脑安装微信 电脑微信下载安装

    2023-07-11 03:34:18
  • asp之家 手机教程 m.aspxhome.com