小米官网导航栏的实现

已于 2022-02-01 22:44:48 修改
阅读量2.9k 收藏 14
点赞数
分类专栏： 网页制作 文章标签： css css3 html
于 2020-12-30 12:36:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46250447/article/details/111967144
版权 
<!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>

小米官网导航栏效果

高同学_Luka
关注
  • 0
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3286
HTML+CSS实现小米官网顶部导航栏
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
小米官网竖直导航栏html,手把手教你做小米商城顶部导航栏
weixin_35414437的博客
06-03 1851
手把手教你做小米商城顶部导航栏发布时间：2019-04-01 20:19,浏览次数：985<>手把手教你做小米商城顶部导航栏<>思路说明<>1 先确定清除基本的默认样式跟基本的css 样式/* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; }/* 清除浮动的样式 ...
web前端学习——纵向导航栏（小米纵向导航栏效果）
迷逝
08-13 1878
web前端学习——小米纵向导航栏效果 最终效果：鼠标悬停，背景变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style
＜html＞小米官网导航栏制作
askerkiller的博客
07-15 370
用HTML和CSS写小米商城导航栏
cj1555640的博客
08-19 3272
Java学习第二十天开始做小米商城的首页
HTML小米官网导航栏设计
M18037112715的博客
03-28 478
天星数科企业团购有品小米官网小米商城小米影像云服务登录|注册
用html和css仿作小米官网（静态）
m0_70220004的博客
07-09 2966
使用html和css3 制作静态页面
前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
小杨的博客
07-01 1604
话不多说直接上代码效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显 需要图片请私信哦
jQuery的小米官网-----侧边导航栏
chnnds的博客
01-17 1523
目录 前言 1、原生js和jQuery优势对比 1.1、原生JavaScript优点 1.2、jQuery优点 2、侧边栏代码展示 2.1、 原生js代码 2.2、jQuery代码 总结 前言 时隔多少的日日夜夜小编我回来了，这次小编我给你们带来了重构的小米官网的侧边栏。说真的当你写完原生的JavaScript代码之后再去用jQuery再去做一遍，代码量会少的你怀疑人生。当然吐槽归吐槽，咱们还是要实战搞一手！ 1、原生js和jQuery优势对比...
css3仿小米官网导航下拉菜单代码
06-05
一款黑色风格的仿小米官方网站css3导航下拉菜单代码，简洁实用的css3下拉导航菜单网页特效。
HTML+CSS实现小米官网顶部导航栏（代码与静态资源）
01-04
HTML+CSS实现小米官网顶部导航栏（代码与静态资源）
小米首页以及JS实现动效（代码规范，你从未见过的全新版本）
11-22
小米首页，代码规范，包括JS代码全部做了注释，容易懂。是你从未见过的全新版本。轮播以及滚动，选项卡效果等用原生JS实现。（同步参考我上传的另一个资源 苏宁首页）你的前端基础会上个台阶
小米 下划线带子菜单导航栏
11-19
小米 下划线带子菜单导航栏 小米 下划线带子菜单导航栏 小米 下划线带子菜单导航栏 小米 下划线带子菜单导航栏 小米 下划线带子菜单导航栏
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 467
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【CSS】使用 scroll snap 实现页面的垂直大屏滚动
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-22 489
CSS 属性 scroll-snap-type 设置了在有滚动容器的情形下吸附至吸附点的严格程度。使用也可以用于垂直滚动，全屏展示就是一个很好的例子
CSS系列:伪类选择器小记
浪潮行舟_chenjin2136
04-19 799
组合选择器的使用有助于保持HTML代码的语义化，因为它们允许开发者基于元素之间的自然关系来应用样式，而不是强迫添加额外的类或ID。这种做法增加了样式的可复用性，因为相同的组合选择器样式可以在不同的HTML结构中被复用，只要这些结构符合选择器定义的元素关系。组合选择器在CSS中扮演着至关重要的角色，它们提供了一种强大的机制来选择具有特定关系的元素，从而允许开发者以更精细、更具体的方式应用样式。使用伪元素可以在不增加额外HTML元素的情况下实现复杂的设计，这有助于减少DOM的大小，从而提高网页的性能。
CSS实现文本渐变色
JCM_ZZ的博客
04-19 357
【代码】CSS实现文本渐变色。
css：echarts渐变色转换为css渐变色
1111111111
04-19 291
css里线性渐变从上到下，是to bottom，从左到右，是to right，把颜色数组像['#000','#111','#222']放进去即可，不需要设置百分比位置。offset是百分比位置，color是对应位置的颜色，new graphic前面四个参数表示渐变的方向，我这里默认是从上到下，从左到右，想要反过来的话，直接把颜色反过来就行了。通过一个下拉框来选择渐变类型，为了简化，我设置了三种：水平方向的渐变、垂直方向的渐变和径向渐变用，表格来配置echarts渐变色的百分比位置和颜色。
用hmtl写小米商城导航栏下拉框
06-10
这段代码实现了一个简单的小米商城导航栏，下拉框是通过 HTML 和 CSS 实现的。具体来说，是通过设置一个 `dropdown` 类来定义下拉框的样式，然后在导航栏链接中嵌套一个 `dropdown` 类的 `div` 元素来实现下拉框。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值