小米商城顶部导航栏练习

学习过程中并记录了这篇笔记

目录

css代码

html代码

效果

---

使用的图标字体在阿里iconfont下载，关于商城例如图片等素材在商城官网mi.com下载。

css代码

body{
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
}


.top-bar{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
    color: #b0b0b0;
    font-size: 12px;
    position: relative;
}

.container{
    width: 1226px;
    margin:0 auto;
}

.l-nav{
    float: left;
}

.r-nav{
    float: right;
}

.container li{
    float: left;
    position: relative;
}

.top-bar a{
    color: #b0b0b0;
    text-decoration: none;
}

.top-bar .sep{
    color: #424242;
    margin: 0 6px;
}

.top-bar a:hover{
    color: #fff;
}

.cart{
    width: 120px;
    height: 40px;
    text-align: center;
    background-color: #424242;
    margin-left: 25px;
    cursor: pointer;            /* 鼠标移入到这个区域，鼠标指针变为小手状态 */
    transition: all 0.2s;       /* 过渡效果 */
    position: relative;
}

.cart:hover{
    background-color: #fff;
}

.r-nav .cart:hover a{
    color: #FF6700;
}

.cart:hover .cart-active{
    height: 100px;
    line-height: 100px;
}

.cart-active{
    width: 316px;
    height: 0;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    position: absolute;
    right: 0;
    top: 40px;
    color: #424242;
    overflow: hidden;
    transition: all 0.2s;
    cursor: auto;
}


.download{
    width: 124px;
    height: 0px;
    background-color: #fff;
    box-shadow: 0 1px 5px #ccc;
    position: absolute;
    top: 40px;
    left: 50%;
    margin-left: -62px;
    overflow: hidden;
    transition: all .3s;
}

.download img{
    width: 90px;
    height: 90px;
    margin: 18px 17px 12px;
}

.download p{
    color: #444;
    font-size: 14px;
    line-height: 14px;
    position: absolute;
    top: 120px;
    left: 20px;
}

.l-nav li:hover .download{
    height: 148px;
}

.sanjiao{
    display: none;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #e8e8e8;
    position: absolute;
    left: 17px;
    bottom: 0;
}

.l-nav li:hover .sanjiao{
    display: block;
}

.nav-wrap{
    width: 100%;
    height: 100px;
    background-color: #fff;

}

.nav-bar{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}

.logo{
    width: 62px;
    height: 56px;
    float: left;
    margin-top: 22px;
}

.logo img{
    width: 56px;
    height: 56px;
}

.search{
    width: 296px;
    height: 50px;
    float: left;
    margin-top: 25px;
}

.center-bar{
    width: 868px;
    height: 100px;
    float: left;
    padding-left: 172px;
    box-sizing: border-box;
}

.center-bar>ul>li{
    float: left;
    padding: 38px 10px;
}

a{
    color: #333;
    text-decoration: none;
}

.center-bar>ul>li>a{
    font-size: 16px;
}

.center-bar>ul>li>a:hover{
    color: #FF6700;
}


.search>input{
    width: 245px;
    height: 50px;
    border: 1px solid #e0e0e0;
    border-right: none;
    padding: 0 10px;
    box-sizing: border-box;
    float: left;
    outline: none;
    transition: all 0.2s;
}

.search>a{
    width: 50px;
    height: 50px;
    float: left;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    font-size: 24px;
    line-height: 2;
    color: #616161;
    text-align: center;
    font-weight: 600;
    transition: all 0.2s;
}

.search>a:hover{
    background-color: #FF6700;
    border-color: #FF6700;
    color: #fff;
}


.search>input:hover , .search>input:hover+a{
    border-color: #b0b0b0;
}

.search>input:focus , .search>input:focus+a{
    border-color: #FF6700;
}


.nav-bar-list1{
    width: 100%;
    height: 229px;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 3px 4px rgba(0,0,0,.18);
    position: absolute;
    left: 0;
    top: 140px;
    display: none;
}



.center-bar li:hover>.nav-bar-list1{
    display: block;
}


.nav-bar-list1 li{
    float: left;
    width: 204px;
    padding-top: 35px;

}

.img-list1{
    width: 100%;
    height: 110px;
    border-right: 1px solid #e0e0e0;
    box-sizing: border-box;
    text-align: center;
    margin-bottom: 16px;
}

.list1{
    text-align: center;
    font-size: 12px;
}

.prices{
    color: #FF6700;
}

.wrap-list1 li:last-child .img-list1{
    border-right: none;
}

.wrap-list1{
    position: relative;
    left: 150px
}

html代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Mi</title>

    <!--    网页图标-->
    <link rel="icon" href="img/favicon.ico">

    <!--    css样式重置文件-->
    <link rel="stylesheet" href="css/reset.css">

    <!--    字体图标-->
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">

    <!--    引入外部样式-->
    <link rel="stylesheet" href="css/mi.css">
</head>
<body>

<div class="top-bar">
    <div class="container">
        <ul class="l-nav">
            <li><a href="javascript:;">小米商城</a><span class="sep">|</span></li>
            <li><a href="javascript:;">MIUI</a><span class="sep">|</span></li>
            <li><a href="javascript:;">IoT</a><span class="sep">|</span></li>
            <li><a href="javascript:;">云服务</a><span class="sep">|</span></li>
            <li><a href="javascript:;">天星数科</a><span class="sep">|</span></li>
            <li><a href="javascript:;">有品</a><span class="sep">|</span></li>
            <li><a href="javascript:;">小爱开放平台</a><span class="sep">|</span></li>
            <li><a href="javascript:;">企业团购</a><span class="sep">|</span></li>
            <li><a href="javascript:;">资质证照</a><span class="sep">|</span></li>
            <li><a href="javascript:;">协议规则</a><span class="sep">|</span></li>
            <li>
                <a href="javascript:;">下载app</a><span class="sep">|</span>
                <div class="download">