admin管理员组

文章数量:1530085

小米商城APP二维码下拉以及过渡效果
结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城 - Redmi Note 8、小米CC9、小米MIX 3，小米电视官方网站</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./css/base1.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./fa/css/all.css">
    <!-- 引入当前页面样式表 -->
    <link rel="stylesheet" href="./css/index1.css">

</head>
<body>
    <!-- 创建顶部导航条 -->
    <!-- 创建顶部导航条外部容器 -->
    <div class="topbar-wrapper">
        <!-- 创建内部容器 -->
        <div class="topbar w clearfix">
            <!-- 左侧的导航条 -->
            <ul class="service">
                <li><a href="javascript:;">小米商城</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">MIUI</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">loT</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">云服务</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">金融</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">有品</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">小爱开放平台</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">企业团购</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">资质证照</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">协议规则</a></li>
                <li class="line">|</li>
                <li class="app-wrapper">
                    <a class="app" href="javascript:;">下载app
                    <div class="qrcode">
                        <img src="../mi/img/download.png" alt="">
                        <span>小米商城APP</span>
                    </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>               
            </ul>

            <!-- 购物车 -->
            <ul class="shop-cart">
                <li><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车（０）
                    </a>
                </li>
            </ul>

            <!-- 用户登录注册 -->
            <ul class="use-info">
                <li><a href="javascript:;">登录</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">注册</a></li>
                <li class="line">|</li>
                <li><a href="javascript:;">消息通知</a></li>
                <li class="line">|</li>
            </ul>
  
        </div>
    </div>

</body>
</html>

CSS样式文档

    /* 主页index1.html的样式表 */

    /* 顶部导航条的样式 */
    .topbar-wrapper{
        /* 设置宽度全屏 */
        width: 100%;
        /* 设置高度和行高 */
        height: 40px;
        line-height: 40px;
        /* 设置背景颜色 */
        background-color: #333;
    }

    /* 设置超链接的颜色 */
    .topbar a{
        font-size: 12px;
        color:#b0b0b0;
        display: block;
    }

    /* 设置超链接移入的效果 */
    .topbar a:hover{
        color: #fff;
    }

    /* 设置中间分割线 */
    .topbar .line{
        font-size: 12px;
        color: #424242;
        margin: 0px 8px;
        margin-top: -1px;
    }

    /* 设置左侧导航栏 */
    .service, .topbar li{
        float: left;
    }

    .app{
        position: relative;
    }
    /* 设置app下的小三角 */
    /* .app-wrapper:hover > .app::after*/
    .app::after{ 
        display: none;
        content: "";
        /* 设置绝对定位 */
        position: absolute;
        width: 0;
        height: 0;
        /* 设置四个方向的边框 */
        border: 8px solid transparent;
        /* 去除上边框 */
        border-top: none;
        /* 单独设置下边框的颜色 */
        border-bottom-color: #fff;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }

    /* .app-wrapper:hover>.app .qrcode{
        display: block;
    } */
    .app:hover .qrcode,
    .app:hover::after{
        display: block;
        height: 148px;
    }
    /* 设置下载app二维码的下拉 */
    .app .qrcode{
        /* 使其脱离文档流 */
        /* display: none; */
        position: absolute;
        left: -40px;
        width: 124px;
        /* height: 148px; */
        height: 0;
        overflow: hidden;
        /* 设置行高 */
        line-height: 1;
        /* 使文字居中 */
        text-align: center;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .5);
        /* transition用来为样式设置过渡效果 */
        transition: height 0.3s;
    }

    /* 设置二维码图片 */
    .app .qrcode img{
        width: 90px;
        margin: 17px;
        margin-bottom: 10px;
    }

    /* 设置二维码中的文字 */
    .app .qrcode span{
        font-size: 14px;
        color: #000;
    }

    /* 设置右侧导航 */
    .shop-cart, .use-info{
        float: right;
    }

    /* 设置购物车的内边距 */
    .shop-cart{
        margin-left: 26px;
    }

    /* 设置购物车（０）这个超链接 */
    .shop-cart a{
        width: 120px;
        background: #424242;
        /* 设置购物车居中 */
        text-align: center;
    }

    /* 设置图标购物车与购物车之间的距离 */
    .shop-cart i{
        margin-right: 2px;
    }

    /* 设置超链接购物车移入效果 */
    .shop-cart:hover a{
        background-color: #fff;
        color:#FF6700;
    }

PS:鼠标移入下载app二维码下拉效果有多种方法。
效果图：

本文标签： 小米官网静态实战网页

版权声明：本文标题：小米官网静态网页项目实战3 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1726414416a1069634.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。