实现展示:

代码总共 808行 ,其中实现了小米官网外观布局的大部分。
在这里插入图片描述
在这里插入图片描述
网址和图标
在这里插入图片描述

在这里插入图片描述
类似的菜单也可以实现下拉
在这里插入图片描述
透明度为0.3
在这里插入图片描述
每一个地方都是超链接,可以进行点击
在这里插入图片描述
搜索栏获得焦点后会变颜色
在这里插入图片描述
光标停留也有响应特效
在这里插入图片描述
相关的图片和代码

实现代码:

html 代码

<html>
    <head>
        <meta charset="utf-8">
        <title>小米商城</title>
        <link rel='stylesheet' href='reset.css'>
        <link rel='stylesheet' href='css/all.css'>
        <link rel='stylesheet' href='Index.css'>
        <link rel='icon' href='favicon.ico'>
    </head>
    <body>
        <div class='body'>
            <div class='daohan'>
                <div class='generallist'>
                    <ul>
                        <li>
                            <a href='' class='white'>小米商城</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>MIUI</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>IoT</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>云服务</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>天星数科</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>有品</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>小爱开放平台</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>企业团购</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>资质证照</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>协议规则</a>
                        </li>
                        <li class='xiazai'>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>下载app</a>
                            <div class='app'>
                                <img src='img/download.png'>
                                小米商城APP
                            </div>
                            <div class='sanjiaoxing'></div>
                        </li>   
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>智能生活</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>Select Location</a>
                        </li>
                    </ul>
                </div>
                <div class='useroperate'>
                    <ul>
                        <li>
                            <a href='' class='white'>登录</a>
                        </li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>注册</a></li>
                        <li>
                            <span class='fenge'>|</span>
                            <a href='' class='white'>消息通知</a></li>
                        <li class='gouwuche'>                            
                            <a href=''>
                                <i class='fas fa-shopping-cart car'></i>
                                <span>购物车</span>
                                <span>(0)</span>                                
                            </a>
                            <div class='gw'></div>
                        </li>
                    </ul> 
                </div>
            </div>
            <div class='shouye'>
                <div class='shouyetuisong'>
                    <div class='shouyetubiao'>
                        <a href=''>
                            <img src='img/mi.png'>
                        </a>
                    </div>
                    <div class='tuisongdaohang'>
                        <div class='xialazangshi'>
                            <ul>
                                <!--小米手机-->
                                <li class='zangshi'>
                                    <a href=''>小米手机</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/xmsj1.webp'>
                                                </br>小米手机MIX FOLD</br>
                                                <span class='biankuang'>9999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/xmsj2.webp'>
                                                </br>小米11 Ultra</br>
                                                <span class='biankuang'>5499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/xmsj3.webp'>
                                                </br>小米11 Pro</br>
                                                <span class='biankuang'>4499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/xmsj4.webp'>
                                                </br>小米11 青春版</br>
                                                <span class='biankuang'>2099元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/xmsj5.webp'>
                                                </br>小米10S</br>
                                                <span class='biankuang'>2999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img  src='img/xmsj6.webp'>
                                                </br>小米11</br>
                                                <span>3799元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--Redmi 红米-->
                                <li class='zangshi'>
                                    <a href=''>Redmi 红米</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj1.webp'>
                                                </br>Redmi Note 10 Pro</br>
                                                <span class='biankuang'>1699元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj2.webp'>
                                                </br>Redmi Note 10 5G</br>
                                                <span class='biankuang'>1099元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj3.webp'>
                                                </br>K40 游戏增强版</br>
                                                <span class='biankuang'>1999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj4.webp'>
                                                </br>K40 Pro</br>
                                                <span class='biankuang'>2799元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj5.webp'>
                                                </br>Redmi K40</br>
                                                <span class='biankuang'>1999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/hmsj6.webp'>
                                                </br>Redmi Note 9 4G</br>
                                                <span>999元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--电脑-->
                                <li class='zangshi'>
                                    <a href=''>电视</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/dn1.webp'>
                                                </br>小米电视6 至尊版 55英寸</br>
                                                <span class='biankuang'>5999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/dn2.webp'>
                                                </br>小米电视 ES55 2022款</br>
                                                <span class='biankuang'>3399元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/dn3.webp'>
                                                </br>小米电视大师 82英寸</br>
                                                <span class='biankuang'>11999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/dn4.webp'>
                                                </br>小米透明电视</br>
                                                <span class='biankuang'>49999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/dn5.webp'>
                                                </br>小米电视大师 65英寸OLED</br>
                                                <span class='biankuang'>10999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/dn6.webp'>
                                                </br>Redmi 智能电视 MAX 98</br>
                                                <span>19999元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--笔记本-->
                                <li class='zangshi'>
                                    <a href=''>笔记本</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/bjb1.webp'>
                                                </br>小米笔记本 Pro X 15</br>
                                                <span class='biankuang'>8499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/bjb2.webp'>
                                                </br>Redmibook Pro 14 锐龙版</br>
                                                <span class='biankuang'>4499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/bjb3.webp'>
                                                </br>Redmibook Pro 15 锐龙版</br>
                                                <span class='biankuang'>4999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/bjb4.webp'>
                                                </br>小米笔记本 Pro 15 锐龙版</br>
                                                <span class='biankuang'>6799元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/bjb5.webp'>
                                                </br>小米笔记本 Pro 15</br>
                                                <span class='biankuang'>6499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/bjb6.webp'>
                                                </br>RedmiBook Pro 14</br>
                                                <span>4499元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--家电-->
                                <li class='zangshi'>
                                    <a href=''>家电</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/jd1.webp'>
                                                </br>米家风冷对开门冰箱 483L</br>
                                                <span class='biankuang'>2399元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/jd2.webp'>
                                                </br>米家扫地机器人1T</br>
                                                <span class='biankuang'>1999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/jd3.png'>
                                                </br>米家互联网洗烘一体机10kg</br>
                                                <span class='biankuang'>1799元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/jd4.webp'>
                                                </br>小米净水器S1 800G</br>
                                                <span class='biankuang'>2199元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/jd5.webp'>
                                                </br>米家空气净化器3 高效除菌</br>
                                                <span class='biankuang'>749元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/jd6.jpg'>
                                                </br>Redmi全自动波轮洗衣机1A</br>
                                                <span>749元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--路由器-->
                                <li class='zangshi'>
                                    <a href=''>路由器</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/lyq1.webp'>
                                                </br>小米路由器AX6000</br>
                                                <span class='biankuang'>599元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/lyq2.webp'>
                                                </br>小米路由器AX9000</br>
                                                <span class='biankuang'>1299元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/lyq3.webp'>
                                                </br>小米AloT路由器AX3600</br>
                                                <span class='biankuang'>499元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/lyq4.webp'>
                                                </br>Redmi路由器AC2100</br>
                                                <span class='biankuang'>169元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/lyq5.jpg'>
                                                </br>小米路由器 Mesh</br>
                                                <span class='biankuang'>999元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/lyq6.jpg'>
                                                </br>小米路由器4A 千兆版</br>
                                                <span>119元起</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <!--智能硬件-->
                                <li class='zangshi'>
                                    <a href=''>智能硬件</a>
                                    <div class='zangshilist'>
                                        <div class='zangshiqu'>
                                            <div class='zangshitai'>
                                                <img src='img/znyj1.webp'>
                                                </br>小米全自动智能门锁</br>
                                                <span class='biankuang'>1799元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/znyj2.webp'>
                                                </br>Redmi小爱触屏音箱Pro8</br>
                                                <span class='biankuang'>599元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/znyj3.jpg'>
                                                </br>小米小爱触屏音箱</br>
                                                <span class='biankuang'>249元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/znyj4.webp'>
                                                </br>Redmi小爱音箱 Play</br>
                                                <span class='biankuang'>89元起</span>
                                            </div>
                                            <div class='zangshitai'>
                                                <img src='img/znyj5.webp'>
                                                </br>查看全部</br>
                                                智能硬件
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <ul>
                            <li><a href=''>服务</a></li>
                            <li><a href=''>社区</a></li>
                        </ul>
                    </div>
                    <form class='sousuolan' action=''>
                        <input class='ssl1' type='search'>
                        <div class='sousuotuan'>
                            <input class='ssl2' type='submit' value=''>
                            <i class='fas fa-search'></i>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class='lunbotu'>
            <div class='lunbodaohang'>
                <div>
                    <a href=''>手机 电话卡</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>电视 盒子</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>笔记本 显示器</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>家电 插线板</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>出行 穿戴</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>智能 路由器</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>电源 配件</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>健康 儿童</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>耳机 音箱</a>
                    <span>></span>
                </div>
                <div>
                    <a href=''>生活 箱包</a>
                    <span>></span>
                </div>
            </div>
        </div>
        <div class='generalsantu'>
            <div class='generalyewu'>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_1.png'>
                        小米秒杀
                    </div>
                </a>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_2.png'>
                        企业团购
                    </div>
                </a>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_3.png'>
                        F码通道
                    </div>
                </a>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_4.png'>
                        米粉卡
                    </div>
                </a>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_5.png'>
                        以旧换新
                    </div>
                </a>
                <a href=''>
                    <div class='yewu'>
                        <img class='tubiao' src='img/santu_1_6.png'>
                        话费充值
                    </div>
                </a>
            </div>
            <div class='santu'>
                <a href=''>
                    <img class='ph' src='img/santu_2.jpg'>
                </a>
            </div>
            <div class='santu'>
                <a href=''>
                    <img class='ph' src='img/santu_3.jpg'>
                </a>
            </div>
            <div class='santu'>
                <a href=''>
                    <img class='ph' src='img/santu_4.png'>
                </a>
            </div>
        </div>
        <div class='changtu'>
            <a href=''>
                <img src='img/changtu.webp'>
            </a>
        </div>
    </body>
</html>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐