html点击选项_点击自动切换选项SVG教程来啦

22fa7f0b24fe5e3fffe6da005fd48dba.png

胖友们,早上好!

之前推的这个SVG样式,相信很多胖友们都急着想学习了吧?今天三儿就来教教大家如何使用这个样式。

1

样式ID:91720。点击样式进入编辑区域进行编辑时,请勿对样式进行任何点击行为。然后点击HTML键,进入源代码模式进行修改。

1af07a70de50ffc30ec99e5d87ec7dcd.gif

2

进入源代码模式之后,我们可以先对样式分割线的上两行文字进行修改。虽然在编辑模式也可以对这两行文字进行修改,但还是建议在源代码模式进行修改。

bb0e21cd212da5248e29e33453a156c6.gif

3

接着下拉代码,找到【第一题】的相关代码。这个样式在代码中,题数靠前的在代码里越靠底,所以修改应该从代码下部往上部修改

8be463940432b83444888499d83e6c31.gif

3

问题题目数字多的,是以两排形式呈现的,少的,则是一排。如果想两排变一排,在直接删除第二排...代码即可;如果想一排变两排,也是复制...这段代码,粘贴在后,然后修改“Y”的数值即可。

d4ea8d32572d179529d745193eb9dbe0.gif

5

完整一个选项的代码是从开始和结束的,正确选项的颜色和错误选项的动画颜色是不一样的,这里我们可以修改两处的#ofo(绿)或#ooo(黑),来改变哪一个选项是正确选项。

e677a83664dafa699e04d70688a8ac32.gif

6

本样式只设定了五道题,依然可以 ctrl + c 复制下图代码,然后回车后,ctrl + v 粘贴在其后面,来增加题数,再对粘贴的题目内容进行修改。

1a5f55811510dca74bbe209d28895fc0.gif

7

样式的最后一页,是个文字提示,当然,如果你想写更多的文字,可以 ctrl + c 复制...这段代码 ctrl + v 进行粘贴,然后进行文字修改增加,但要注意修改“Y”数值。

c176c90a5577d43d9434c373e7adcda9.gif

8

当你修改完成后,退出源代码模式,注意,此时仍然不要对样式进行任何点击操作,如果想预览效果,可以点击手机预览进行预览操作,或复制到微信后台进行预览。

f6048e8f2435d9773e7bda0814d2b352.gif

看完了教程,还不赶紧去试试做一个?那些天天催我写教程的,教程来了,快来看啊!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值