html5
文章平均质量分 83
ClassicSong
爱它,才会有灵感。从此不再停滞不前。
展开
-
一次项目杂记续
中午到的公司,昨天加班太晚,上午调休了。项目算是顺利上线。此刻头晕脑胀。做这个项目还是留下了遗憾。如有好的建议,共同讨论。1、因为此项目是在微信里使用,而且页面里的动画有视频的元素,无论是安卓还是IOS有一部分机型,会出现全屏播放视频的情况,那原来的震撼效果,被破坏殆尽。说明:我已经按照查到的资料在video标签里添加了对应的属性(x-webkit-airplay="true" webki原创 2016-03-11 14:56:01 · 813 阅读 · 0 评论 -
css3 media媒体查询器用法总结
转载自:http://www.cnblogs.com/zhaodifont/p/3858657.html 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。再不更新知识你就老了。我转载 2016-04-27 14:28:28 · 1466 阅读 · 0 评论 -
html5中viewport浅析
昨天对项目中一个公共组件做响应式优化,忙乎了一天,总算可以了,正准备送去QA测试,遇到问题了,改好的组件放到生产环境自测一下。天呐,在iphone6上为啥页面内容变得好小(其实在iPhone系列都是这样,只是先用手里的设备测试而已)。开始查找页面中的头部是否添加viewport的width设置,果然没有,随即加好,以为问题分分钟解决。页面刷新后,被打了一棒子,并没有想象的美好,依然那么小。难道程序原创 2016-06-07 10:31:57 · 744 阅读 · 0 评论 -
微信自定义分享标题、描述关键词限制(红包)
项目中微信自定义分享,分享朋友圈:自定义缩略图,标题,链接正常。分享朋友,标题,链接正常。缩略图自己可以看见,朋友却看不见。开始查找代码正确性,查找微信开发jssdk,查看公众号权限。均正常,看来是闹鬼了。度娘了n久。终于看见有为仁兄写到:引用自这里今日碰见奇葩问题,调用微信公众平台的分享接口,自己分享的只有自己能看见图片别人看不见,经过测试,发现红包和领取者两个词原创 2017-01-03 15:36:56 · 7202 阅读 · 0 评论 -
使用css3实现环形进度条
进度条效果如下: 整圆的效果处理会简单些,不完整环实现起来细节多点。下边是实现逻辑和过程。进度条组成:环形:两种颜色进度条,当余量少于50%时进度条颜色由绿色变为黄色。进度条结构由两个叠加环形组成;上叠加环形展示剩余量,深色;下叠加环形展示100%总量,浅色。样式实现:1:画一个方形,如图中阴影部分所示: 2:方形中画两个等大均分方形的矩形,(注意每个矩形一定要设置:o...原创 2018-06-01 15:57:10 · 47443 阅读 · 13 评论 -
css3--容器背景分上中下三部分,上下不变,中间部分垂直重复平铺切图方案
拿到个这样的设计稿,蓝色背景图片忽略,注意白线框。切图要求:1、红色框位置1:背景不变。2、红色框位置3:背景不变。3、红色框位置2:背景需要垂直方向重复,即内容不固定,支持垂直方向延展。4、黄色框位置4:放置内容区域。切图方案一:没准会想到简单粗暴的方式,直接切一张大背景就好了,为什么要较劲,不同页面切不同背景。可以直接那么搞,一次性的还好,时不时的让你维护一下内容,可能会惨死。...原创 2019-03-05 18:04:35 · 2679 阅读 · 1 评论 -
自定义radio、checkbox的样式
需要用到自定义input为radio或者checkbox的样式,如下效果图:html结构:<label class='radio-wrap'> <input type="radio" name="yearsOld"/> <span>15~18岁</spa原创 2019-03-06 11:43:08 · 356 阅读 · 0 评论 -
由postMessage深究到的addEventListener
项目中用到两次postMessage了,今天才深究了一下。原来javaScript基础还是会随着时间的流失而变得模糊。需求父页面、子页面,两页面不同域,之间对话用到了postMessage。下面为了方便统称为F、C页。C页按钮的点击事件向F页发送一个消息小C,F页收到消息小C执行逻辑LC,LC执行完毕,F页向C页发送一个消息小F,C页收到消息小F执行逻辑LF。一句话,就是F、C页间相互通信。...原创 2019-03-26 12:32:51 · 4511 阅读 · 0 评论 -
去他的history.go(-N)和pushState popstate,改用replaceState完美解决
都是返回上一页闹得,打球都心不在焉了。除了首页,其他的页面左上角都有一个返回上一页的按钮。这样的功能合情合理。一个window.history.go(-1)就能搞定的玩意儿。新需求来了,如下:需求一:A页:列表页(不同的业务,不同的列表页)B页:详细页(同一个详细页)C页:表单页(同一个表单页)A—>B—>C(提交成功)—>B(点击返回上一页)—>A需求二:...原创 2019-04-23 12:02:59 · 1750 阅读 · 1 评论