前言

记一次小米商城导航栏下载app弹出层的知识。在跟课练习的过程中发现用到的不熟悉的知识点有定位弹出层中出现的向上的小三角形的处理以及过渡动效和隐藏元素

提示：以下是本篇文章正文内容，下面案例可供参考

一、弹出层中小三角形的处理

在HTML中div的边框是一个t型结构，当宽度和高度都为0时就成了小三角。其次要朝上的要留着下右左其余同理。在小米商城的例子中小三角的左和右都是背景色，所以将border全部设置为transparent 然后设置下边框是white即可

        .box1{width: 0;height: 0;/*如果将宽高设置为0之后还是大小不太合适，那么可以再进行调整border来改变大小*/border: 10px solid transparent;border-bottom-color: red;}

元素的隐藏以及过渡动效

利用display这个属性的block和none属性来设置（不好控制，没有办法设置一些比较好看的动效）

.box1{display:none;
}
.box1:hover{display:block;
}

<div class="box1"></box1>

利用隐藏宽高和transtion属性来设置元素的隐藏，同时弥补了上个的缺点

过渡效果的可选值，过渡开始的时间以毫秒或者秒为单位来计算

  <div class="outer-wrapper"><span>显示与隐藏</span><div class="box1"><img src="./img/1.jpg" alt=""></div></div>

<style>.{margin: 0;padding: 0;}.outer-wrapper{width: 685px;margin: 10px auto;}.box1{height: 0px;overflow: hidden;transition: height 0.9s;}span:hover + .box1{height: 685px;}.box img{width: 1265px;}</style>

效果演示：

总结

总的来讲，并没有什么大的难点，就是定位用的麻烦一些。另外就是结构的设计。

小米导航栏中的下载app弹出层相关推荐

layui点击弹出层中按钮，关闭弹出层
layui点击弹出层中按钮,关闭弹出层原理:点击自己定义的button时,触发弹出层右上角取消按钮. <button type="button" lay-submit=&q ...
微信扫一扫点击下载App弹出引导页引导在外部浏览器中打开
使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等. 解决方案:弹出一个遮罩提示用户在新的浏览器窗口打开. 使用的是纯JS+HTML+CSS结合的方式,但不要一进入微信就弹出提示它在新浏览 ...
[置顶] 推荐一款好用的jquery弹出层插件——wbox
在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点和新版本增加的功能 wBox特点背景透明度可以根据实际情况进行调节可以根据需要添加wBox标 ...
推荐一款好用的jquery弹出层插件——wbox
阅读原文:http://www.xuejiehome.com/blread-1621.html 在我们做项目的过程中难免会让弹出层来展示一些信息,这里推荐一款比较不错的jquery插件,下面说一下特点 ...
Jquery UI dialog弹出层插件
必须先下载Jquery UI插件然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...
使用jquery的blockui插件显示弹出层
使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者阅读(9975) 评论(0) 编辑收藏在做网站的开发过程中,可能需要使用弹出层,使用j ...
layui之layer各种弹出层
layui提供了页面弹出层组件layer,能够满足用户的各种需求,它不仅可以作为独立组件使用也可以在layui模块化中使用. layer弹出层分类 layer弹出层有5种,使用type配置参数来指定分 ...
弹出层blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏
https://blog.csdn.net/echocdzh/article/details/50294353 在做网站的开发过程中,可能需要使用弹出层,使用jquery的blockui插件可以很轻松 ...
HTMLCSS设计小米导航栏
小米导航栏: 准备工作: 把需要实现的设计图放到ps中,量取需要的宽度高度间距值: 话不多说:直接上代码: <div class="box"> // 一个大盒子可以用n ...

小米导航栏中的下载app弹出层

前言

一、弹出层中小三角形的处理

元素的隐藏以及过渡动效

总结

小米导航栏中的下载app弹出层相关推荐

最新文章

热门文章