微信公众平台图文编辑-(直角+圆角)带阴影边框(附效果图)
在微信公众平台,不论订阅号还是服务号还是企业号,都需要越来越精彩的页面效果吸引读者注意。这吸睛的页面效果就需要美味微信运营这动动脑筋了,重要的往往不是技术,而是你的思维&思想,是你用最新鲜的创意和想法,支配简单的技术和工具,实现伟大的页面效果。下文将讲述微信公众号图文编辑-(直角+圆角)带阴影边框(附效果图)。
工具/原料
微信公众账号:服务号 订阅号 企业号
Macromedia Dreamweaver软件(文中都简称为DW)
一款测试效果的浏览器
一颗勇于探索的心
方法/步骤
1、打开Macromedia Dreamweaver软件(后文均简写为DW)。
2、这是做测试写好的代码,现在已经在DW中打开多色直背景效果。
代码中边框是有阴影的,边框样子是类似幻灯片中一种图片效果的,左上角及其一个对角是圆角,右上角及其一个对角是直角。原始案例以红色边框、黑色字体为例,下文将逐步展开。现在,可以拷贝下一个步骤的代码到你的软件。
3、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <blockquote style="border:6px solid #d80d55;margin:0px;padding:10px 15px;overflow:hidden;color:#555555;font-family:"微软雅黑";font-size:12px;line-height:24px;border-top-left-radius:50px;border-bottom-right-radius:50px;box-shadow:#a5a5a5 5px 5px 2px;"> <p style="border:0px;padding:0px;color:#333333;letter-spacing:0.25px;line-height:2em;min-height:1.5em;margin-top:0px;margin-bottom:0px;"><span style="font-size:medium;letter-spacing:0.25px;line-height:28px;color:#000000;background-color:#f6f6f6;"> 微信公众号图文编辑-(直角+圆角)带阴影边框</span></p> <p style="border:0px;padding:0px;color:#333333;letter-spacing:0.25px;line-height:2em;min-height:1.5em;margin-top:0px;margin-bottom:0px;"><span style="font-size:medium;letter-spacing:0.25px;line-height:28px;color:#000000;background-color:#f6f6f6;">微信公众号图文编辑-(直角+圆角)带阴影边框</span></p> <p style="border:0px;padding:0px;color:#333333;letter-spacing:0.25px;line-height:2em;min-height:1.5em;margin-top:0px;margin-bottom:0px;"><span style="font-size:medium;letter-spacing:0.25px;line-height:28px;color:#000000;background-color:#f6f6f6;">微信公众号图文编辑-(直角+圆角)带阴影边框</span></p> </blockquote>
4、现在看一下在浏览器下预览出来的网页效果。
5、这一步讲解,如何改变编辑框内的字体的颜色,看过前几篇经验的朋友应该能知道修改方法,So Easy!将【color:#555555;font-family:"微软雅黑"】代码改为【;color:#0000FF;font-family:"微软雅黑"】,或者任何你需要的颜色,效果就出来了。
6、浏览器预览效果为
7、这一步讲解,如何改变编辑框的颜色,So Easy!
将【solid #d80d55;margin:0px】代码改为【solid #00ff00;margin:0px】,或者任何你需要的颜色,效果就出来了。
8、浏览器预览效果为
9、直接选择需要的样式拷贝到需要的地方,修改其中的文字即可。选择需要的样式拷贝到需要的地方,修改其中的文字为自己的文字
注意事项
代码顶部不可缺
直接选择需要的样式拷贝到需要的地方,修改其中的文字即可
选择需要的样式拷贝到需要的地方,修改其中的文字为自己的文字
以上就是微信公众平台图文编辑-(直角+圆角)带阴影边框(附效果图),希望对大家有所帮助!
相关文章
vscode怎么检测工作区是否有问题? vscode调出问题指令的两种方法
vscode中可以检查是否有问题,如果有问题该怎么调出有问题的指令呢?下面我们就来看看详细的教程2024-09-28怎么在VScode中设置账号同步? Vscode账号同步的实现方法
VScode是一款免费开源的现代化轻量级代码编辑器,使用该软件时,可以设置账号同步,今天小编就来说明一下具体的操作步骤2024-09-28VSCode如何格式化XML? VSCode实现UltraEdit中XML格式化的方法
最近很喜欢使用 VS Code,所以会遇到很多 VS Code 的日常使用问题,比如,我想要在 VS Code 中实现 UltraEdit 中 XML 格式化的问题,该如何做呢?详细请看下文介绍2024-09-26VScode编译python画布闪现怎么办? 只加两行代码即可解决
vscode使用python画图时闪退,该怎么解决这个问题呢?我们只需要添加两行代码就可以了,详细请看下文介绍2024-09-26vscode怎么运行vue代码? vscode启动vue项目的教程
vscode可以运行vue项目,该怎么运行呢?下面我们就来看看新手第一次运行vue项目的方法,详细请看下文介绍2024-09-26Vscode怎么拆分窗口? Vscode拆分编辑器窗口实现分屏显示技巧
Vscode编辑代码的时候,想要分屏,该怎么操作呢?我们可以拆分编辑器窗口,比如上下拆分,左右拆分等等,详细请看下文介绍2024-09-26怎么让vscode显示文件图标? vscode添加icon文件图标的教程
可以使VScode左侧的资源管理器根据文件类型显示图标,要在VSCode中显示文件夹图标,可以按照以下步骤进行操作2024-09-26助力开发者迅速上手! Visual Studio Code推出Office加载项开发工具预览
这一工具包旨在为开发者提供便捷的加载项开发平台,尤其是那些希望仅通过manifest文件来开发XML格式加载项的开发者,详细请看下文介绍2024-09-10- JDK是java软件开发包的简称,要想开发java程序就必须安装JDK,没有JDK的话,无法编译Java程序,很多朋友安装不会配置环境,这里就为大家提供了具体的安装与配置方法,需要的2024-07-04
TypeScript5.5更新! VS Code使用TypeScript的技巧
微软前两天昨日正式发布 TypeScript 5.5,开发者如果在 Visual Studio 和 VS Code 等编辑器中使用 TypeScript,还能实现自动完成、代码导航和重构等功能,通过一下命令可以2024-06-22
最新评论