欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

如何设置CSS下拉层？

程序员文章站 2024-02-08 21:43:58
...

CSS 设置下拉层

以小米商城页面为例

如何设置CSS下拉层？

  • 设置HTML
<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>例子1</title>
</head>
<body>
   <div class="shop">
       <div class="shop-cart"></div>
   </div>
</body>
  • 设置CSS下拉样式
//开启相对定位
.shop {
	position: relactive;
}
.shop .shop-cart {
	width: 设置宽度;
	bakcground-color: 背景色;
	box-shadow: 设置阴影效果;
	position: absoulte /*开启绝对定位*/
	left:根据实际情况，自己调整;
	top:根据实际情况，自己调整;
	bottom:根据实际情况，自己调整;
	right:根据实际情况，自己调整;
	/*配合使用，隐藏文本框*/ 
	height: 0;
	overflow: hidden;
	/*文本框显示的速度*/
	transition: height 0.3s;
	z-index: 可以设置层级;
}
.shop:hover .shop-cart {
	display: block;
	height: 高度;
}

案例2

如何设置CSS下拉层？

  • 设置HTML
 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>例子2</title>
</head>
<body>
	<div class="app" href="javascript:;">
		下载app
		<!--添加一个下拉层-->
		<div class="qrcode">
			<img src="图片地址" alt="描述">
			<span>小米商城APP</span>
		</div>
	</div>
</body>
  • 设置css样式
/* 设置二维码大小 */
.app .qrcode img {
    width: 90px;
    margin: 17px;
    margin-bottom: 10px;
}
/* 设置二维码的文本 */
.app .qrcode span {
    font-size: 14px;
    color: #000;
}
/* 开启相对定位 */
.app {
    position: relative;
}
/* 使用伪类 来设置三角型△ */
.app::after {
    /* 宽高都是0，这样边框就显示四个△了 */
    width: 0;
    height: 0;
    content: "";
    /* display:none 此元素不会被显示，并且不会占据页面的位置 */
    display: none;
    /* 设置边框样式 透明*/
    border: 8px solid transparent;
    /* 去除上边框 */
    border-top: none;
    /* 单独设置下边框为白色 */
    border-bottom-color: white;
    /* 设置绝对定位 */
    position: absolute;
    /* 设置 “△”左右内边距都是0，然后让它自动居中 */
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* 设置鼠标经过时样式 */
.app:hover .qrcode,
.app:hover::after {
    display: block;
    height: 148px;
}

/* 设置下载app的下拉二维码 */
.app .qrcode {
    width: 124px;
    /* 文本“小米商城”默认会继承父类样式，所以重新设置行高 */
    line-height: 1;
    /* 文本居中 */
    text-align: center;
    background-color: white;
    /* 添加阴影效果 */
    box-shadow: 0 0 10px rgba(0,0,0,0.3);

    /* 开启绝对定位，不应该在父元素里面占据位置 */
    position: absolute;
    /* 设置二维码位置 */
    left: -40px;
    /* 
       高度为0可以隐藏内容 ，但是实际没有隐藏、因为内容溢出了，
       所以配合overflow
    */
    height: 0;
    /* 把溢出的东西裁掉 */
    overflow: hidden;

    /* 设置过渡效果 */
    transition: height 0.3s;
    z-index: 9999;
}

案例3

如何设置CSS下拉层？

  • 设置HTML
 <!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>例子3</title>
</head>
<body>
	<!-- 创建一个弹出层 -->
    <div class="container">
        <ul class="children-list clearfix">
            <li class="first">
                <a href="#">
                    <div class="mi-phone"><img src="图片地址"></div>
                    <div class="title">小米CC9 Pro</div>
                    <p class="price">2599元起</p>
               </a>
           </li>
        </ul>
     </div>
</body>
  • 设置CSS样式
/* --------------------设置下拉层------------------------ */
/*整体思路一样*/
.goods-info {
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100px;
    left: 0;
    transition: height 0.3s;
    z-index: 9999;
}

.nav .show-goods:hover ~ .goods-info,
.goods-info:hover {
    height: 228px;
    border-top: 1px solid rgb(224,224,224);
    box-shadow: 0 5px 3px rgba(0,0,0,0.2);
}
/*设置弹出层内的容器样式*/
.container {
    width: 1226px;
    height: 201px;
    margin: auto;
}
.container .children-list .mi-phone {
    height: 120px;
}
.container .children-list {
    height: 100%;
}
/*设置图片样式*/
.children-list li {
    position: relative;
    float: left;
    padding: 35px 12px 0;
    text-align: center;
}
/*设置title样式*/
.children-list .title {
    width: 180px;
    line-height: 30px;
}
/*设置价钱price样式*/
.children-list .price {
    line-height: 18px;
}

/* 设置分隔线 */
.container .children-list li::before {
    position: absolute;
    left: 0;
    top: 35px;                                                                                                                                 
    z-index: 9999;
    width: 1px;
    height: 100px;
    content: "";
    background-color: #e0e0e0;
}
/* 隐藏第一个分割线 */
.container .children-list li.first::before {
    width: 0;
}
相关标签： 实践总结

上一篇： Vue中使用腾讯移动分析小结

下一篇： JS 网站性能优化笔记

推荐阅读