html
文章平均质量分 67
weiweitb8
这个作者很懒,什么都没留下…
展开
-
H5实战(一):照片墙效果
照片墙的思路与实现1.实现思路*首先在html中插入图片,设置整个容器的整体大小,然后设置每个图片的宽度,并为它们添加边框边距等,设置成为相框的效果。*然后为每个图片设置旋转角度,top,left等,此时每个图片都有了一定的倾斜度。*最后制作鼠标悬浮效果,当鼠标放置时,使图片旋转角度为0,图片变大,并使其显示在最上层(可设置z-index实现),为其设置动画过渡效果。2.代码实原创 2017-09-05 15:02:10 · 7318 阅读 · 0 评论 -
H5实战(三):路径图页面布局
1.目标效果实现一个不同阶段的导航布局,如实现学习的各个阶段的路径导航页面。有一条线为轴,左侧是每个阶段的题目,右侧为相应的学习课程的展示。2.实现思路1)首先制作左侧导航部分的效果,使用div的左边框作为轴,并以span显示为正方形作为轴上的点,原创 2017-09-15 11:26:08 · 1213 阅读 · 0 评论 -
H5实战(四):导航栏
1.导航栏效果导航栏主要分为两种:水平导航栏和垂直导航栏,其中水平导航栏又有普通导航栏与简约导航栏等样式设置。2.实现思路:导航栏的实现主要使用ul标签结合a标签,设置a标签为块元素,可为其设置宽高,将其向左浮动就可形成水平导航栏,取消其默认的原点与下划线样式,并为鼠标移入时增加样式,颜色较深的背景色的导航栏,鼠标移入时,多会修改移入部分背景色,背景为白色的导航栏在鼠标移入时,可为其添原创 2017-09-18 11:03:59 · 5761 阅读 · 0 评论 -
H5实战(二):Tab标签切换效果
一 Tab标签切换效果的思路与实现1.目标效果:实现鼠标移到不同的tab标签上,下面对应的内容进行切换的效果,同时,被选中的选项卡有左右边框,无下边框,而未被选中的则存在下边框。2.实现思路1)点击选择的部分使用ul实现,设定好整个装标题的div的宽度,然后计算出每个标题所占的宽度,并设置文字居中即可,这里应注意留出边框的位置,比如装标题的容器宽度为300,有5个标题,那么可设置每原创 2017-09-11 16:57:41 · 9683 阅读 · 0 评论 -
H5实战(五):幽灵按钮效果
1.目标效果现在幽灵按钮是网站上十分常见的一种效果,通过使按钮变的薄透来提高页面的美观性,这里我们要实现的效果是有三个图片,在鼠标悬浮时可以放大并旋转360度,每个图标下面都有一个幽灵按钮,当鼠标悬浮时会有四边飞入,tooltip等效果,下面介绍下实现的具体过程。2.实现思路1)图片部分:首先设定整体盒子的宽度,然后设定每个装有图片和按钮的盒子的宽度,span标签以背景图片的方式导原创 2017-09-20 10:04:33 · 3045 阅读 · 1 评论 -
H5实战(六):固定边栏滚动特效
1.目标效果现在各大网站常常使用固定边栏滚动特效,即页面内容较长时,边栏先随着页面向下滚动,当边栏滚动到底时,则不会随着页面的滚动而滚动,而是固定在页面上保持不动。2.实现思路1)设计好页面布局,页面向左浮动,边栏向右浮动。2)当滚动高度加上页面高度大于侧边栏的高度时,应设置侧边栏的position为fixed,否则就将position变回static。3.代码实现1)jq原创 2017-09-21 15:36:04 · 825 阅读 · 0 评论 -
H5实战(七):列表布局切换
1.目标效果实现信息列表的平铺布局与列表布局的切换效果。2.实现思路1)写出信息列表与切换按钮,切换按钮可使用正方形中间插入span的白条而形成两种不同的按钮。2)为两种不同布局设置样式,一种是列表形式,另一种为平铺方式,可设定每个li宽度并向左浮动而形成。3)为没有被选中的按钮添加类,当点击事件发生时,判断若是此类,则切换布局(即将列表部分的类名改变)。3.代码实现原创 2017-09-22 09:50:09 · 2344 阅读 · 0 评论