友们,下午好!
都说一张美美的图能为文章增色三分!
那如果是一个交互的图片样式 + 几张美美图呢?这能为文章增色多少呢?
比如这种(样式ID:90298)
使用这种样式,即能有效的展示图片,还能缩小文章空间,而且还与读者存在互动交互,想不想知道这种样式怎么做出来呢?
上面两种样式都可以在样式中心输入ID搜索到。
但是,样式中心的原样式,都是四张图片滑动的,直接进行换图就可以使用了。
但如果要像三儿上面做的两个样式,一个是5张图,一个是9张图,就要进HTML进行修改了。
进入到“HTML”模式,找到<section .........> </section>这段代码,先选择Ctrl+C复制。
然后在此段代码结尾处敲回车键换行,再选择Ctrl+V粘贴。
粘贴几次,样式就会在原有四张的基础上多出几张,胖友们可以根据自己的需求进行多次粘贴。
进入到“HTML”模式,找到<img src=........./>这段代码,先选择Ctrl+C复制,然后在此段代码结尾处,再Ctrl+V粘贴。
同上个样式,粘贴几次,样式就会在原有四张的基础上多出几张,胖友们可以根据自己的需求进行多次粘贴。
为了样式的美感,还是有三点建议给大家。
1、图片请保持尺寸一致。否则会导致图片层次不齐。
2、尺寸请500x500以上。否则可能会使图片不清楚。
3、图片大小尽可能小点。否则浏览时加载会不流畅。
更多好玩样式,请进样式中心搜索“滚动”
好了,本次教程就到这里~bye
要在网页上用几个滑块
出于某些原因,需要在网页上用几个滑块。
其实,这是很简单的一件事情,只需敲一行html代码就可以了:
<input type="range" name="points" min="1" max="10">
耗时不超过一分钟,非常容易的一件事情。
不过这样不仅不美观,而且让人感觉很低端:
html的滑块
怎么办呢?其实也很简单,因为已经有人做好了,而且不仅做了滑块,交互页面上可能需要用到的东西都做好了,我们拿过来用即可。这一套东西就叫前端 UI 框架。
有一个框架叫layui,简单易用,花点时间阅读一下说明文档就可以了。做出来的滑块比默认的好看了。
layui的滑块
但是很不幸的,做出来的滑块在PC端正常,但在手机端不能滑动,这是什么原因呢?
于是我开始排查起来:
会不会是手机浏览器兼容性问题呢?
会不会是我引用layui时出了什么问题呢?
会不会是我写的代码有问题呢?
会不会是浏览器缓存的问题呢?
按部就班地查了一遍,都没有问题。那么,问题十有八九在layui自身上了。很快,我的猜疑得到了印证:
github上的issue
糟糕透了!虽然我找到了问题所在,但几个小时时间也过去了。
layui不行了,那就换一个吧。有一个很热门的叫Element,据说是饿了吗团队开发的,我就选它了。
于是开始登录它的官网,在手机上测试了一下,确定能用之后就开始阅读文档,动手试着做了几个小例子,还挺好用。
正当我准备开始用Element在我的页面上添加滑块的时候,眼角的余光瞥见了浏览器上推送过来的几个字“Element停止维护”。
“有这事?”一边想着,一边搜了一下,还真是,停止维护了。
停止维护!虽然这对于我用Element做个滑块没有任何影响,滑块也依然能用,但我自身的执拗阻止了我继续使用Element。代价,就是差不多一个小时时间又废掉了。
接下来怎么办呢?要么再找一个框架,要么直接找一个单独的滑块组件来用。
找了几个单独的滑块组件,有的只支持低版本的jquery,有的有一些bug,都不尽如人意。
再找个框架嘛,又有诸多顾虑。比如这框架会不会又停止维护?
犹豫中,询问了一个做前端的小伙伴,扯了一会,快一个小时时间又过去了。
后来,我也懒得瞻前顾后了,直接用jquery-ui吧。
这是最后的样子,不好看,但也顾不了这么多了。
原本小小的一个问题,被我搞得这么复杂,这里边暴露了一些问题,其中就包括我的执拗。
如果有产品经理问我,加几个滑块需要多长时间?
我回答:“二十分钟吧!”
然后,我发现我掉入了一个深坑里。
再然后呢?
加班吧,兄弟!
*请认真填写需求信息,我们会在24小时内与您取得联系。