前言

本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。

一、下载app下拉框实现

解决思路：

1、可以将下拉框设为下载app的一个子元素并将下拉框的位置，样式设置完备。

2、将准备好的下拉框起初设置为不可见。

3、当鼠标悬停在下载app 这个父元素时下拉框才可呈现。

HTML结构

<li class="code-upbox">
<a href="#">下载app</a>

<div class="triangle">
</div>

<div class="two-code">
<img src="./image/小米二维码.png" alt="">
<span>小米商城APP</span>
</div>
</li>

CSS样式

/* 下载app 二维码下拉框设置 */

.two-code {

visibility: hidden;

height: 0px;

width: 124px;

font-size: 14px;

box-shadow: 0 1px 5px #aaa;

color: #333;

position: absolute;

top: 40px;

left: 50%;

background: #fff;

text-align: center;

line-height: 1;

z-index: 99;

transition: height .3s linear;

}

/* 给二维码下拉框添加动画效果 */

.code-upbox:hover .two-code {

height: 148px;

}

.code-upbox:hover .two-code>img {

height: 90px;

}

/* 上方小三角形 */

.triangle {

visibility: hidden;

position: absolute;

top: 26px;

width: 0;

height: 0;

margin-left: 15px;

border: 7px solid white;

border-top-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

/* 设置二维码下拉框的样式 */

.two-code>img {

width: 90px;

height: 0px;

margin: 18px 17px 10px 17px;

transition: height .2s;

}

/* 使二维码下拉框hover时显示出来*/

.code-upbox:hover .two-code {

visibility: visible;

}

.code-upbox:hover .triangle {

visibility: visible;

}

二、购物车下拉框实现

解决思路在上文已经介绍，这里不再赘述。

HTML结构

<li class="shopping-car">

<div class="car-upbox">

<i class="iconfont"></i>

<a href="#">购物车（0）</a>

</div>

<div class="car-downbox"><span>购物车中还没有商品，赶紧选购吧！</span></div>

</li>

CSS样式

/* 导航购物车的样式 */

.shopping-car {

background-color: #424242;

width: 120px;

height: 40px;

margin-left: 15px;

}

/* 购物车下拉框的上方盒子样式 */

.car-upbox {

position: relative;

padding-left: 20px;

z-index: 1000;

}

/* 购物车下拉框的样式 */

.car-downbox {

visibility: hidden;

position: relative;

width: 316px;

height: 0px;

background-color: #fff;

right: 196px;

box-shadow: 0 2px 10px rgb(0 0 0 / 15%);

z-index: 40;

transition: height .3s;

}

/* 给购物车下拉框添加动画效果 */

.shopping-car:hover .car-downbox {

height: 98px;

}

/* 下拉框中文字的样式设置 */

.car-downbox span {

color: #424242;

line-height: 100px;

text-align: center;

margin-left: 70px;

}

/* 购物车的hover效果 */

.shopping-car:hover .car-upbox,

.shopping-car:hover .car-downbox {

background-color: #ffffff;

visibility: visible;

}

/* 使购物车区域hover时变色 */

.shopping-car:hover .car-upbox i,

.shopping-car:hover .car-upbox a {

color: #FF6714;

}

三、display:none 和visibility:hidden的区别

display:none；——隐藏，并且不占位，宽高各种属性值，都‘丢失’。
visibility：hidden;——隐藏，占位，仅是视觉上‘看不见’
width:0;height:0;overflow:hidden;这只是通过设置元素的大小使元素不显示

CSS——下拉框的制作（以小米商城为例）相关推荐

css下拉框带三角符号_创建带有符号的下拉列表
css下拉框带三角符号 To make data entry easier, you can create a drop down list in an Excel cell, using data ...
好看的css下拉框样式,实用的漂亮的下拉框-CUSTOM DROP-DOWN LIST STYLING
插件描述:今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的今天我给大家介绍一款下拉选择框,有5种漂亮的样式可供我们选择,真的蛮实用的预览图 width="474 ...
css 下拉框下三角形
css 用border属性实现下拉框三角形效果如图思路设置一个空元素,设置左右边框以及上边框,其宽度即为三角形的高, 效果如图: 1.当设置上边框以及左右边框,再将左右边框颜色透明,则为下三角 ...
用 :focus-within 实现纯 CSS 下拉框组件
:focus-within 伪类:当本节点或其子节点获得焦点时被激活. 借用 MDN 的例子 https://jsfiddle.net/d4w8h2ge/ 当点击表单中的文本框时需高亮整个表单元素.但 ...
web开发课程，css下拉框默认选中
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识_,希望对初学者有用. 一.css盒子模型概念 CSS c ...
python爬虫selenium操作下拉框详解
使用python爬虫的selenium操作网页的下拉框. 以该网站为例:https://www.17sucai.com/pins/demo-show?id=5926 该网页下存在多个可供测试的下拉框. ...
js中select下拉框重置_如何利用CSS3制作炫酷的下拉框
很多小伙伴都不清楚CSS3是做什么?用途是什么? 接下来我就给展示一个css3制作一个炫酷下拉框.其实不只是这些,还有很多. CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,200 ...
jQuery+css模拟下拉框模糊搜索的实现
html: @*输入框*@ <div><input type="text" style="width: 85%; height: 34px;" ...
html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法在页面中引入下面的文件. lt;l ...
Javascript 调用XML制作连动下拉框
Javascript 调用XML制作连动下拉框作者: 何耀 Thursday, June 5 2003 2:44 PM 传统的HTML页面中连动下拉框采用了两种方法: 1)直接将下拉框中的内容har ...

CSS——下拉框的制作（以小米商城为例）

文章目录

前言

一、下载app下拉框实现

解决思路：

HTML结构

CSS样式

二、购物车下拉框实现

HTML结构

CSS样式

三、display:none 和visibility:hidden的区别

CSS——下拉框的制作（以小米商城为例）相关推荐

最新文章

热门文章