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

超酷炫的黑科技排版

你好哇,胖友们

最近三儿收到不少问题

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


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笔记君资讯官
做你贴心的互联网笔记本!
共351篇文章
最近文章
更多
  • 【135早资讯】:小红书回应关闭上海线下体验店:已实现盈利,但策略会不断调整;好莱坞接洽戈恩,逃亡大戏或搬上荧屏
  • 【135早资讯】:微信订阅号正在灰度测试付费图文功能;故宫6688元年夜饭全部取消
  • 【135早资讯】:微信默认表情上线10个新表情;腾讯QQ:微信已经可以转账到QQ钱包
  • 【135早资讯】:微信朋友圈屏蔽支付宝五福 微信:诱导用户分享属违规活动;腾讯音乐与抖音达成转授权合作