关于绝对定位那些事儿_H5案例分享
关于绝对定位那些事儿
在H5制作中，由于布局需要，经常用到position: absolute绝对定位;那定位都有哪些呢？H5中用到position: absolute的原因及用法又是什么呢？
H5常使用绝对定位的原由：
因为H5中的很多元素是图片，可能会有叠加、重合、动画等效果，且常采用不规律的布局。采用这种布局时，元素需要脱离标准文档流，如果不对其定位做相应处理，按照标准文档流模式，从上到下、从左到右布局，就会产生很多不便。而这是我们采用position:absolute绝对定位就可轻松搞定这些问题。
使用绝对定位的方法：
一般来说元素的绝对定位的是相对于它所在的父级盒子而言的，通常是将父级盒子定义为position:relative相对定位，子级元素定义position:absolute绝对定位，并且子级里的元素使用left或right和top或bottom进行定位，还可使用z-index进行分层叠加。
定位小例子：
示例代码：
像这样，先给父级盒子设置相对定位，子级元素设置绝对定位，在借助top、right、bottom、left进行大致的位置调整，margin值、padding值进行微调，就可以将H5页面中，快速实现很多元素不规则布局的效果。但是绝对定位如果父级不使用position:relative相对定位，而里面的元素直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义的元素对象无论位于div多少层结构，都将会被拖出以为父级进行绝对定位。所以，绝对定位应在合适的地方使用，这样才能达到事半功倍的效果。
以上为“H5案例分享”团队原创文章，转载请注明出处！
分享到微信朋友圈x
打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。
相关推荐：
关注h5-share，获取更多牛逼H5案例分享！也可访问H5案例分享网站 www. ，搜索查阅~
微信扫一扫关注该公众号
微信极速登录/注册
Copyright (C)
Jiandou Technology Co.,Ltd. All Rights Reserved.
北京简豆科技有限公司版权所有 京ICP备号-1
对汉语支持不错，别对小五说英文
微信公众号
请pc端输入网址""下载截图压缩包~
标签已提交成功小编正在审核请等待一下下啦
哎呀标签已存在换个新的呗~手机号/邮箱:?
使用第三方登录：?
还可以输入 300 字符
请输入举报理由
选择收藏分类：
默认收藏夹
添加收藏分类：
观点：2015年度优秀H5制作案例(原创文章)
系统分类：
文章版权：
原创，如需商业用途或转载请与
联系，谢谢配合！
深圳 / 设计爱好者1年前发布
H5微场景作为2014年以来炙手可热的新媒体营销手段，进入2015年以来，热度不减。随着技术的革新以及创意的不断涌入，2015年H5的精品案例持续刷爆朋友圈。下文列举了5个算是他们中的佼佼者，是创意和技术的有机结合的代表作。
2015年度优秀H5制作案例
又到一年将尽之时，每年这个时候，各路盘点接踵而来。随着移动互联网的浪潮和手机技术的日新月异，H5经历了从全民兴起到爆发再到沉淀然后再爆发式增长的过程。H5“即点即玩、病毒传播、用户粘性”的特点备受广告主青睐，极具创意的H5也就成了爆款。下面就一起来看看2015年度爆款H5吧!
爆款01号：吴亦凡即将入伍
出品：腾讯
吴亦凡H5入选本年度最佳H5案例实在是毫无悬念，暂且抛开这款H5宣传什么产品不讲，就凭这款H5的风头一时无两，连续两天都霸占我们的朋友圈微信群，吴亦凡是谁？认识他的人为之雀跃，不认识他的人到处打听，然后，再看大众的声音"哇，吴亦凡跟我视频了哎！"、"吴亦凡从报纸里面走出来了！"、"快点截图截图！这个技术太炫酷啦！"这款H5成功与否？传播到位，媒体争相报道、各路专家开笔点评，由此可见，其传播力不容小觑。
爆款02号：嫦娥来电
出品：咫尺网络
咫尺网络趁着中秋佳节推出的模拟电话H5微场景首次出场就惊艳了整个朋友圈。就创意点而言，借助国人熟悉而且与中秋节息息相关的嫦娥，再加之吊足人满的好奇心，第一波扩散出去的人群全凭这个吊胃口的标题开始进行大规模扩散传播，这款H5的成功全凭"全新创意+时下热点+传播渠道+一个好标题"这四步打法，走上H5最热浪潮。
爆款03号：你相信圣诞老人吗
出品： 腾讯
你相信圣诞老人吗？仅凭这个标题相信已经抓住不少人的眼球。由腾讯在刚过不久圣诞节日推出的模拟电话H5微场景在朋友圈暴走了一回。这款H5借助圣诞老人一臂之力，潜移默化的植入了腾讯手机管家APP，成功的把小伙伴们“吭“了一回！
爆款04号：王祖蓝聊天记录被曝光
出品：滴滴出行
玩够了陌生来电，这次换个玩法玩玩微信聊天，打开滴滴出行的这款H5，王祖蓝，古巨基、叶世荣、井柏然、刘若英、郭采洁、韩庚等这么多明星跟自己聊天，这种受欢迎程度实在是忍不住要截图发个朋友圈来"装逼"一下下，敢问一个H5凭什么会获得传播过百万，那就要看够不够本事让用户主动分享，转或不转，全在一念之间。滴滴出行这个逼，装得我给满分。
爆款05号：小杜杜的第一座美术馆
出品：杜蕾斯
俗话说得好：好钢用在刀刃上，杜蕾斯的品牌调性再加之环时互动的借力打力，这款H5的成功可谓呼之欲出，由美术创意到设计意念，各种细节尽收眼底，没有一丝一毫的马虎，环时互动和杜蕾斯一直在做的事，就是用俏皮好玩，更容易被用户接受的手段和创意来抓住眼球，清新脱俗走入大众视野。
H5微场景作为2014年以来炙手可热的新媒体营销手段，进入2015年以来，热度不减。随着技术的革新以及创意的不断涌入，2015年H5的精品案例持续刷爆朋友圈。以上列举了5个算是他们中的佼佼者，是创意和技术的有机结合的代表作。相信，2016年随着更多的品牌对于H5微场景营销的重视，会有更多精彩的案例让我们大饱眼福的。
深圳 / 设计爱好者1年前发布
同时推荐此文章
还可以输入2000 个字符
所有，如需商业用途或转载请与
联系，谢谢配合！您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
想要做选择题H5案例,以下这些逻辑你必须知道.doc 8页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：150 &&
想要做选择题H5案例,以下这些逻辑你必须知道
你可能关注的文档：
··········
··········
想要做选择题H5案例，以下这些逻辑你必须知道！?iH5?首先，在正文开始前，先向大家说明一下最近公众号后台咨询反馈情况。?以近期公众号后台的反馈来看，好多用户咨询选择题案例怎么制作。确实现在很多个人、企业用户对测试、选择题等类型的H5需求越来越大，利用此类H5达到扩大品牌影响力、了解目标用户的需求等目的。?目前业内有很多H5制作工具，虽然都兼具制作测试、选择题H5的基础功能，可达到的效果大不相同，就以业内比较出名的某秀、某展、某KA举例（摘取其平台的用户案例）：由于都支持并重视模板套用，动态十足的页面实现相对简单，比较适合简单粗暴的入门用户。但细看不难得知，案例中交互功能的缺陷十分明显，用户在每次点击后得到的反馈信息十分缺乏。用户最想看到的是每一次点击后会弹出什么、下一页面会出现什么有趣的东西、到案例的最后能得到什么总结性信息。?反观iH5，兼具计数器、变量、数据库等实用功能，明显地在交互这一版块更胜一筹；再说，利用时间轴、轨迹、动效等功能也能轻松实现动态十足的页面。好吧，这可能看起来是一个广告，可目的也是为了广大有需求的用户啊！不吹不黑，是骡子是马拉出来溜溜便知道！?使用iH5如何制作选择题案例，小编就以一个在iH5平台上发布的用户案例给大家详细讲解实现的逻辑：关键思路分为三部分：计数器应用、单页面点击交互、尾页总结反馈计数器应用?何为计数器，从字面上理解就是记录次数的容器。在选择题案例中，我们可以利用计数器记录统计用户点击某按钮的次数、计算用户选择正确答案后的得分等。?设置的逻辑为：对象通过事件绑定数据库，当用户触发该对象使计数器+/-n。所以在具体案例中，应该这样设置：?在需要让计数器加/减数值的元素下添加事件。事件对象为【该触发对象】，触发条件为【轻触手机中】，目标对象为【计数器】，目标动作为【加n】，值项输入你想要计数器增加的数值。以此类推将所有的题目的选项都按照此步骤绑定计数器即可。▲添加事件，链接计数器，设置分数值[注]：案例中对事件的控制运用了事件组（即用同一触发条件控制多个事件动作）；计数器隐藏。二、单页面点击交互?“为什么一点某一个答案，还没提示对错就自动跳到下一页了”；“怎么设置让提示对错后过1S自动跳转下一页”，此类的问题相信你可以在这里得到解决：?首先我们先了解最基础的交互逻辑：用户点击某选项——提示正确/错误——有下一题按钮提示用户跳转/提示完正确或错误后自动跳转下一题。?为了当用户在点击某选项后触发正确/错误提示，我们先导入“对/错”提示图标并将其隐藏，接着在选项元素下添加事件，事件对象为【该触发对象】，触发条件为【轻触手机中】，目标对象为【“对”提示图标】，目标动作为：【显示】。▲隐藏提示素材，通过事件触发显示当用户点击选项提示对错图标显示完成后，设置跳转下一页，这部分可以有不同的形式实现，最常见的有两种：通过设置“下一题”按钮触发跳转、自动跳转。?通过设置“下一题”按钮触发跳转逻辑：“下一题”素材——透明按钮——事件触发跳转。设置事件触发跳转时应注意目标对象应该先选择【舞台】，再选择跳转下一页or跳转页面。其他就不赘述了，这里侧重讲解较为方便的自动跳转实现步骤：?自动跳转逻辑：提示对/错图标显示动效结束——自动触发跳转。在对/错素材下插入动效，动效【时长】和【类型】根据需要设置，【自动播放】、【开始时隐藏】设置为yes，【循环播放】设置为no。?[注]：如果想要让该动效延时出现，可以对【触发时延时】进行时间调整。▲添加动效，动效下添加事件自动跳转紧接着在该动效下插入事件，由动效的结束来触发跳转事件的开始：触发条件为【结束】，对象为舞台，目标动作为【下一页】。?三、尾页的反馈总结?在尾页对用户前面所有操作得分进行统计并显示，案例中采用的实现方法为：直接显示计数器数值作为分数，并设置数值范围对分数进行识别，显示相应的成绩标题。?实现逻辑：尾页显示——计数器数值显示——判断计数器数值范围——显示成绩结果?在尾页下直接添加事件，触发对象为【尾页】，触发条件为【显示】，目标对象为【计数器】，目标动作为【显示】，以此触发计数器数值作为获得的分数显示在页面中。?为了让计数器根据数值范围显示相应的成绩结果，我们先导入相应的成绩标题素材到尾页中，并将其隐藏。在计数器下设置事件，触发条件为【数值范围】，根据实际输入最小最大值范围，目标对象选择该数值范围所对应的成绩结果，目标动作为【显示】即可。▲计数器下添加事件，判断数值显示反馈图片关于重新答题的逻辑设置：?由于如果用户想重新答题，那么之前计数器的数值就必须要重置，用户再下一次答题时才能准确计算出应有的分数。?实现逻辑：事件触发——重新加载（计数器重新赋值）——返回初始页。?所以，重新回答按钮除了设置跳转事件外，还需要设
正在加载中，请稍后...