admin管理员组

文章数量:1530017

小米商城

    • 一、Html网页
    • 二、CSS美化样式
    • 三、成果图

一、Html网页

<!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>Document</title>
    <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\base.css">

    <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\index.css">

    <!-- <link rel="stylesheet" href="C:\Users\Administrator\Desktop\HTML\图片素材\reset.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:;">云服务</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="qracode">
                            <img src="C:\Users\Administrator\Desktop\HTML\图片素材\小米二维码.png" alt="此照片无法访问">
                            <span>小米商城app</span>
                        </div>
                    </a></li>

                <li class="line">|</li>
                <li><a href="javascript:;">Select Location</a></li>
                <li class="line"></li>
            </ul>

            <ul class="shop-cart">
                <li>
                    <a href="javascript:;"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\京东小图片.png" alt="">购物车</a>
                </li>
            </ul>

            <ul class="user-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>
            </ul>



        </div>
</div>



    <div class="header-wrapper">
        <div class="header w clearfix">
            <h1 class="logo"><a href="/">
                <img src="C:\Users\Administrator\Desktop\HTML\图片素材\logo-mi2.png" alt="">
            </a>
            </h1>
        </div>
        <div class="header-list clearfix">
            <ul class="nav">
                <li><a class="all-goods" href="#">全部商品分类</a></li>
                <!-- 创建一个左侧导航菜单 -->
                <ul class="left-menu">
                    <li><a href="#">手机 电话卡</a>
                    </li>
                </ul>

                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi 红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>

                <!-- 创建一个弹出层 -->
                <div class="goods-info"></div>
            </ul>
            <div class="search-warpper">

                <form action="search" action="#" >
                    <input class="search-inp" type="text">
                    <a href="#"><img src="C:\Users\Administrator\Desktop\HTML\图片素材\搜索框.png" alt=""></a>
                </form>

            </div>
        </div>
    </div>
</body>

</html>

二、CSS美化样式

/* 顶部导航条的样式 */
.topbar-wrapper{
    /* 设置宽度全屏 */
    margin-top: -8px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    position: relative;
    
}
/* 设置超链接颜色 */
.topbar a{
    font-size: 13px;
    color: #b0b0b0;
}

/* 设置左侧导航栏 */
.service, .topbar li{

    /* 使标签整体并排 */
    float: left;
    /* 无序样式列表无 */
    list-style: none;

    margin-top: -1px;
    margin-left: 4px;
    padding-left: 3px;
    color:gray;
}
.app:hover .qracode{
    display: block;
}

/* 设置下载app的下拉 */
.app .qracode{
    display: none;
    position: absolute;
    left:-35px;
    width: 124px;
    height: 148px;
    line-height: 1;
    text-align: center;
    background-color:#fff ;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}
.app{
    position: relative;
}
/* 设置二维码的图片 */
.app .qracode img{
    width: 90px;
    margin: 17px;
    margin-bottom: 2px;
}
/* 设置二维码中的文字 */
.app .qracode span{
    color: #000;
    font-size: 14px;
}

/* 鼠标移动到下载app处打开 */
.app-wrapper:hover>.app .qracode{
    display: block;
}


/* 设置app的下三角 */
li:hover >.app::after{
    display: none;
    content: '';
    position: absolute;
    line-height: 1;
    width: 0;
    height: 0;
     /* 设置四个方向的边块 */
    border: 6px solid transparent;
    /* 去除上边框 */
    border-top: none;
    /* 单独设置下边框的颜色 */
    border-bottom-color: #fff;
    bottom: -12px;
    left: 0;
    right: 0;
    margin: auto;

}
  
/* 设置导航条标签鼠标移动的颜色 */
.service li a:hover{
    color: #fff;
}

.shop-cart img{
    padding-top: 4px;
}

/* 设置右侧导航栏 */
.shop-cart, .user-info{
    float:right ;
    margin-top: 0px;
    padding-left: 25px;
}
.user-info a:hover{
    color: #fff;
}
.shop-cart:hover a{
    color: #fff;
    
}






/* 设置中间的header */

.header{
    height: 100px;
}

.header .logo{
    float: left;
    margin-top: 22px;
    margin-left: -800px;
    width: 55px;
    height: 55px;
    
}

.header .logo img{
    
    position: absolute;
    width: 55px;
    height: 55px;
}
.header .logo a img:hover{
    padding-left: 1px;
}


.header-list{
    float: left;
    margin-top: -70px;
    margin-left: 200px;

}
.header-list li{
    float: left;
    list-style: none;
    padding-left: 35px;
    font-weight: 500;
}
.header-list li a:hover{
    color: #f33;
}





.all-goods{
    visibility: hidden;
}

.nav li: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, .2);
}
.nav .goods-info{
    height: 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 110px;
    left: 0; 
    transition: height 0.3s;
}
/* .search-warpper{
    float: right;
} */

/* .search-warpper form{
    margin-left: 200px;
} */
.search-warpper{
    float: right;
}

/* 设置input获取焦点后的样式 */
.search-warpper .search-inp:focus{
    outline: 1px solid #ff6700;
}

/* 设置搜索框的图片样式,这里没有使用图片家族 */
.search-warpper img{
    float: left;
    height: 50px;
    width: 52px;
    border: none;
    padding: 0;
    background-color: #fff;
    color: #616161;
    font-size: 18px;
    border-left: 2px solid rgb(224, 224, 224);
    position: absolute;
    right: 46px;
    margin-top: -20px
}

/* 文本框的长度宽度以及颜色 */
.search-warpper .search-inp{
    width: 227px;
    float: left;
    padding: 0 10px;
    height: 46px;
    font-size: 16px;
    position: absolute;
    right: 100px;
    margin-top: -20px

}

三、成果图

本文标签： 小米样式菜单商城项目

版权声明：本文标题：CSS样式：小米商城导航栏及下拉菜单小项目 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726414310a1069621.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。