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

超酷炫的黑科技排版

你好哇,胖友们

最近三儿收到不少问题

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


图1 样式ID:88350


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

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

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

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

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


图2



如何破解这种尴尬局面


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

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

保准你一学就会

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


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

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

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


图3


进入源代码模式后

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


图4


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

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

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

其中原理就不跟大家说了

总之按我的教程来


修改好数值之后

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

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

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

比如

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

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


样式默认高度值为180

如果你的文字内容5行内

或者你的图片高度在180内

那么无需修改

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

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



全文空白玩法


如果想实现全文空白

不需要样式中的提示文字

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


图5



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

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

然后再试验一次

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

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

吓粉丝们一跳

下课~


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


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



文章评价
登录后可以评论
立即登录
135笔记君资讯官
做你贴心的互联网笔记本!
共795篇文章
最近文章
更多
  • 【135早资讯】:腾讯上线“个人间借条”服务,可短信通知还款;快手严厉打击借河南灾情进行恶意炒作
  • 【135早资讯】:微信暂停个人帐号新用户注册,8月初恢复;网易云音乐正加紧洽谈非独家版权合作
  • 【135早资讯】:微信新版本支持多设备同时在线:手机+平板+电脑;抖音内测“学习”入口:做短视频版的“知乎”
  • 【135早资讯】:九宫格变十宫格,微信支付页上线腾讯惠聚入口;鸿星尔克总裁吴荣照:公司没有“濒临破产”,意外得到网友力挺和关爱感觉受宠若惊
比格设计
分享到