小米官网导航栏的实现

已于 2022-02-01 22:44:48 修改
阅读量3.1k 收藏 15
点赞数
分类专栏： 网页制作 文章标签： 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
关注
专栏目录
HTML+CSS实现小米官网顶部导航栏
重生之我是泰勒
07-01 3800
HTML+CSS实现小米官网顶部导航栏
用HTML和CSS写小米商城导航栏
cj1555640的博客
08-19 3508
Java学习第二十天开始做小米商城的首页
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
＜html＞小米官网导航栏制作
askerkiller的博客
07-15 566
小米商城底部导航实现
最新发布
weixin_58833319的博客
09-13 197
在pages.json中插入。
小米官网竖直导航栏html,小米官网css3导航菜单代码_html/css_WEB-ITnose
weixin_39600837的博客
06-03 1027
小米官网css3导航菜单代码。这是一款黑色风格的小米官方网站css3导航下拉菜单代码。效果图如下：在线预览 源码下载实现的代码。html代码：css代码：* { margin: 0px; padding: 0px; } .nav { position: relative; w...
HTML小米官网导航栏设计
M18037112715的博客
03-28 688
天星数科企业团购有品小米官网小米商城小米影像云服务登录|注册
前端实现小米官网导航栏的实现 主要通过HTML+CSS完成效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显
小杨的博客
07-01 1753
话不多说直接上代码效果有下拉列表和一个固定定位，中间色块用来辨识固定定位，效果更加明显 需要图片请私信哦
HTML+CSS实现小米官网顶部导航栏（代码与静态资源）
01-04
在本项目中，我们主要探讨如何使用HTML和CSS来实现类似小米官网的顶部导航栏。这个练习涵盖了网页设计的基础知识，包括结构化HTML元素、CSS样式表的应用以及静态资源的组织。 首先，让我们从HTML部分开始。HTML...
css3仿小米官网导航下拉菜单代码
06-05
小米官网的导航菜单通常有深色背景和高亮的链接文字，可以通过CSS3的颜色和阴影属性来实现。 8. **图标使用**：考虑使用图标字体（如Font Awesome）来增强菜单的视觉效果，它们可以与文本一起使用，并通过CSS进行...
小米官网竖直导航栏html,手把手教你做小米商城顶部导航栏
weixin_35414437的博客
06-03 1982
手把手教你做小米商城顶部导航栏发布时间：2019-04-01 20:19,浏览次数：985<>手把手教你做小米商城顶部导航栏<>思路说明<>1 先确定清除基本的默认样式跟基本的css 样式/* 清除默认样式 */ * { margin: 0; padding: 0; } input { outline: none; border: 0; }/* 清除浮动的样式 ...
小米官网css3导航菜单代码.zip
07-04
小米官网css3导航菜单代码是一款黑色风格的小米官方网站css3导航下拉菜单代码。
小米官网css3导航菜单代码
04-06
小米官网css3导航菜单代码是一款黑色风格的小米官方网站css3导航下拉菜单代码。
小米官网的导航栏
lsy01的博客
02-23 3434
小米官网的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <link rel="icon" href="https://s01.mifile.cn/favicon.ico"> &lt...
小米商城侧导航栏的实现（导航栏的制作）
weixin_65607135的博客
09-01 4179
我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。下面看一看我制作的小米商城的侧导航栏。所涉及到的知识点有定位和格式化文档。css代码段如上所示。...
html 小米商城导航栏示例
weixin_33858336的博客
02-12 2551
　　1.小米导航栏示例 　　　　 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>06小米商城导航条示例</title> <style> /* 全局通...
HTML&CSS设计小米导航栏
egg_er的博客
10-23 1841
小米导航栏： 准备工作： 把需要实现的设计图放到ps中，量取需要的宽度高度间距值； 话不多说：直接上代码： <div class="box"> // 一个大盒子可以用nav，包裹相应数量的超链接。以及符号 <a href="#">小米商城</a> <span>|</span> <a href="#">MIUI</a> <span>|</s
实战小米官网静态页面1：导航栏部分
qq_51704382的博客
11-11 1506
实战小米官网静态页面1：导航栏部分
小米商城的导航栏
qq_45805209的博客
08-14 363
【代码】小米商城的导航栏。
小米官网顶部导航栏的HTML+CSS实现及资源分享
在小米官网顶部导航栏的实现过程中，可能会用到静态资源如CSS样式文件(index.css和reset.css)、JavaScript文件(js)以及字体文件(font_3498162_fgjradjmgqq和font-awesome-4.7.0)。这些资源通过引用的方式嵌入到HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值