小米官网导航栏的实现

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商品导航title>
    <style>
        .box{
            width: 1000px;
            height: 400px;
            border: black solid 1px;
            margin: 0 auto;
            margin-top: 50px;
            /* 子绝父相:对右边的东西 定位 */
            position: relative;
        }
        .left{
            float: left;
            width: 20%;
            height: 100%;
            background-color: rgb(72, 63, 81);
        }
        .right{
            float: left;
            width: 80%;
            height: 100%;
        }
        .nav{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        /* 避免右边商品区的padding-left与nav下的链接区混淆,所以用子类选择器 */
        .nav>li>a{
            /* a标签转化为块元素,设置高 */
            display: block;
            height: 40px; 
            /* 内容垂直居中 */
            line-height: 40px;
            color: white;
            text-decoration: none;
            padding-left: 30px;
            position: relative;
        }
        li span{
            display: inline-block;
            color: white;
            position: absolute;
            right: 30px;
        }
        li:hover{
            background-color: rgb(255,103,0);
        }

/* 手机 */
        .shouji{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .shouji ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .shouji ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .shouji{
            display: block;
        }

/* 电视 */
        .dianshi{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .dianshi ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .dianshi ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .dianshi{
            display: block;
        }
/* 笔记本 */
        .bijiben{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .bijiben ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .bijiben ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .bijiben{
            display: block;
        }
/* 家电 */
        .jiadian{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .jiadian ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .jiadian ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .jiadian{
            display: block;
        }
/* 出行 */
        .chuxing{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .chuxing ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .chuxing ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .chuxing{
            display: block;
        }
/* 智能 */
        .zhineng{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .zhineng ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .zhineng ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .zhineng{
            display: block;
        }
/* 电源 */
        .dianyuan{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .dianyuan ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .dianyuan ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .dianyuan{
            display: block;
        }
/* 健康 */
        .jiankang{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .jiankang ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .jiankang ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .jiankang{
            display: block;
        }
/* 耳机 */
        .erji{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .erji ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .erji ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .erji{
            display: block;
        }
/* 生活 */
        .shenghuo{
            width: 800px;
            height: 400px;
            /* 子绝父相  对于最大的盒子 */
            position: absolute;
            top: 0px;
            right: 0px;   
            /* 开始要隐藏盒子 */
            display: none;     
        }
        .shenghuo ul li{
            width: 400px;
            height: 400px;
            margin-left: 0px;
            float: left;
            display: block;
        }
        .shenghuo ul{
            list-style: none;
            margin: 0 0;
            padding: 0 0;
        }
        .nav>li:hover .shenghuo{
            display: block;
        }
    style>
head>
<body>
    <div class="box">
        <div class="left">
            <ul class="nav">
                <li>
                    <a href="https://www.mi.com/p/1915.html">手机 电话卡<span>>span>a>
                    <div class="shouji">
                        <ul>
                            <li><a href="https://www.mi.com/buy/detail?product_id=12609"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1597145894.51396359.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/buy/detail?product_id=10000244"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1590373114.47998349.jpg" width="400px">a>li>
                        ul>
                    div>                
                li>
                <li>
                    <a href="https://www.mi.com/a/h/9819.html">电视 盒子<span>>span>a>
                    <div class="dianshi">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E9%87%8F%E5%AD%90%E7%82%B9%E7%94%B5%E8%A7%86"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1593671513.90269727.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%B1%B3%E7%9B%92%E5%AD%90"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1546997991.03868800.jpg" width="400px">a>li>
                        ul>
                    div>     
                li>
                <li>
                    <a href="https://www.mi.com/a/h/7529.html">笔记本 显示器<span>>b>a>
                        <div class="bijiben">
                            <ul>
                                <li><a href="https://www.mi.com/buy/detail?product_id=10000242"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1594107583.22838030.jpg" width="400px">a>li>
                                <li><a href="https://www.mi.com/buy/detail?product_id=12290"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1591755481.58867678.jpg" width="400px">a>li>
                            ul>
                        div>     
                    li>
                <li>
                    <a href="https://www.mi.com/p/9285.html">家电 插线板<span>>span>a>
                    <div class="jiadian">
                        <ul>
                            <li><a href="https://www.mi.com/buy/detail?product_id=10330"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1563787495.73232959.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E6%8F%92%E6%8E%92"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1571660595.33144009.jpg" width="400px">a>li>
                        ul>
                    div>     
                li>
                <li>
                    <a href="https://www.mi.com/p/9289.html">出行 穿戴<span>>span>a>
                    <div class="chuxing">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E6%BB%91%E6%9D%BF%E8%BD%A6"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1553484007.64174630.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E7%9F%B3%E8%8B%B1%E8%A1%A8"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1597029198.00185696.jpg" width="400px">a>li>
                        ul>
                    div> 
                li>
                <li>
                    <a href="https://www.mi.com/a/h/8363.html">智能 路由器<span>>span>a>
                    <div class="zhineng">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%88%B1%E9%9F%B3%E7%AE%B1"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ab7943ae5215e0faacb04f7270d9cfb.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E5%B0%8F%E7%B1%B3%E8%B7%AF%E7%94%B1%E5%99%A8"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1581411766.33688586.jpg" width="400px">a>li>
                        ul>
                    div> 
                li>
                <li>
                    <a href="https://www.mi.com/p/9290.html">电源 配件<span>>span>a>
                    <div class="dianyuan">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E5%85%85%E7%94%B5%E5%AE%9D"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1572510715.11624812.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E9%BB%91%E9%B2%A8%E9%85%8D%E4%BB%B6"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1582894555.2518310.jpg" width="400px">a>li>
                        ul>
                    div>                 
                li>
                <li>
                    <a href="https://www.mi.com/p/9291.html">健康 儿童<span>>span>a>
                    <div class="jiankang">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E6%97%A9%E6%95%99%E5%90%AF%E6%99%BA"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-miapp-a1/1acf1167-8a6d-cefb-7805-628f78a6aa33.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/buy/detail?product_id=9834"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1558685484.81067420.jpg" width="400px">a>li>
                        ul>
                    div>  
                li>
                <li>
                    <a href="https://www.mi.com/p/9292.html">耳机 音箱<span>>span>a>
                    <div class="erji">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E5%A4%B4%E6%88%B4%E8%80%B3%E6%9C%BA"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b8b1dd3a6fb92bd0c08bdef02e77a4d2.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/buy/detail?product_id=13032"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1603769846.04494192.jpg" width="400px">a>li>
                        ul>
                    div> 
                li>
                <li>
                    <a href="https://www.mi.com/p/9293.html">生活 箱包<span>>span>a>
                    <div class="shenghuo">
                        <ul>
                            <li><a href="https://www.mi.com/search?keyword=%E5%8F%8C%E8%82%A9%E5%8C%85"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1561718076.45448546.jpg" width="400px">a>li>
                            <li><a href="https://www.mi.com/search?keyword=%E7%9C%BC%E9%95%9C"><img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1556533073.62795224.jpg" width="400px">a>li>
                        ul>
                    div> 
                li>
            ul>
        div>
        <div class="right">
            <div class="backimage">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi11/section1-1.jpg" width="100%" height="400px">
            div>
        div>
    div>
body>
html>

小米官网导航栏效果

你可能感兴趣的:(网页制作,css,css3,html)