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

超酷炫的黑科技排版

你好哇,胖友们

最近三儿收到不少问题

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


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笔记君资讯官
做你贴心的互联网笔记本!
共405篇文章
最近文章
更多
  • 【135早资讯】:早盘8次熔断!瑞幸咖啡COO等伪造22亿元交易额;微信安卓版 7.0.13 正式版更新发布:暗黑模式来了
  • 【135早资讯】:罗永浩抖音直播首秀成绩单:3小时带货破1.1亿元;知乎首度上线“B乎”模式,展示多样视频内容
  • 【135早资讯】:微信小游戏推行实名制,限制未成年用户游戏时间;QQ钱包:微信转账到QQ小程序功能上线
  • 【135早资讯】:淘宝直播将在4月1日开播卖火箭;2020年拼多多将推动“百亿补贴2.0”版本