黑科技排版-全文空白玩法

超酷炫的黑科技排版

你好哇,胖友们

最近三儿收到不少问题

大家都在问我这个点击显示的样式


640

图1 样式ID:88350


有时候需要把文字替换成图片的时候

由于图片高度超出样式设置的默认高度

所以会造成图片只显示一半的尴尬局面

或者由于要替换的文字过多

造成只能看到部分文字的尴尬局面


grey.gif

图2



如何破解这种尴尬局面


其实只需把样式设置的高度改一下就行了

来来来,今天就跟三儿学一下代码

保准你一学就会

学会了就能跟这篇推文一样炫酷到不行


首先,为避免内容过长影响代码

所以我们回到样式最开始的版本

点击编辑器左上角的HTML源代码按钮


grey.gif

图3


进入源代码模式后

增加样式高度需要修改四处代码


grey.gif

图4


如图所示,一共标记了四个位置

更改时需保持①③数值一致

②④在①③数值上固定增加数值20

其中原理就不跟大家说了

总之按我的教程来


修改好数值之后

大家可以点击手机预览来测试效果

因为有时修改的数值不一定完美

需要多修改几次才能达到最完美的效果

比如

高度值太大了就会显示过多的空白

高度值太小了就会遮挡部分内容


样式默认高度值为180

如果你的文字内容5行内

或者你的图片高度在180内

那么无需修改

反之,则根据内容超出部分

除以180,根据结果在代码中适当修改数值即可



全文空白玩法


如果想实现全文空白

不需要样式中的提示文字

那么直接删除①②标注处代码即可


grey.gif

图5



好了,今天的课就到这里了

如果你第一次没成,那么建议你再看一次教程

然后再试验一次

记住一定要学会了马上预览查看效果

最后,你就再试试我这种推文方式

吓粉丝们一跳

下课~


grey.gif

【福利时刻-免费领取7天135编辑器VIP会员】


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员



文章评价
登录后可以评论
立即登录
135笔记君资讯官
做你贴心的互联网笔记本!
共441篇文章
最近文章
更多
  • 【135早资讯】:微信首次回应封杀WeTool:外挂软件破坏微信生态平衡和正常运营;支付宝小程序直播正式开放,打通淘宝直播
  • 【135早资讯】:微博:对一批蹭热搜账号采取处罚措施;天猫 618 将有 300 多明星上线淘宝直播
  • 【135早资讯】:快手与京东战略合作,直播买货无需跳转,意在下沉市场电商;哔哩哔哩美股市值超过爱奇艺
  • 【135早资讯】:腾讯大举封杀第三方微信工具 使用Wetool可能被封号;公众号编辑器新增地理位置插件,支持文字、卡片两种格式
分享到