文章目录
小米官网
小米官网是学习前端实战项目锻炼最多的一个项目，基本上就是学习完HTML和CSS之后就可以开始锻炼自己实战的能力，学习如何搭建自己一个完整的页面实战，对之后的学习打下很好的基础，在这个博客的代码中，我只是涉及到相关的HTML和CSS，图片路径可以自己改并且找一些相关的图片，或者下载我主页的资源。
小米官网的效果图
小米官网的HTML代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="./css/banner.css"><linkrel="stylesheet"href="./css/banner2.css"><linkrel="stylesheet"href="./css/common.css"><linkrel="stylesheet"href="./css/fonter.css"><linkrel="stylesheet"href="./css/header.css"><linkrel="stylesheet"href="./css/main.css"><linkrel="stylesheet"href="./css/rm.css"><linkrel="stylesheet"href="./css/topnav.css"></head><body><!-- 顶部导航 开始 --><divclass="topnav"><divclass="container clearfix"><ulclass="fl topnav-menu"><liclass="fl"><ahref="">小米商城</a></li><liclass="fl"><ahref="">MIUI</a></li><liclass="fl"><ahref="">IoT</a></li><liclass="fl"><ahref="">云服务</a></li><liclass="fl"><ahref="">天星数科</a></li><liclass="fl"><ahref="">有品</a></li><liclass="fl"><ahref="">小爱开放平台</a></li><liclass="fl"><ahref="">企业团购</a></li><liclass="fl"><ahref="">资质证照</a></li><liclass="fl"><ahref="">协议规则</a></li><liclass="fl"><ahref="">下载app</a></li><liclass="fl"><ahref="">智能生活</a></li><liclass="fl"><ahref="">Select Location</a></li></ul><divclass="fr"><!-- 登录、注册、消息通知 --><ulclass="topnav-menu fl"><liclass="fl"><ahref="">登录</a></li><liclass="fl"><ahref="">注册</a></li><liclass="fl"><ahref="">消息通知</a></li></ul><!-- 购物车 --><divclass="fl topnav-car"><aclass="topnav-link"href=""><iclass="iconfont i-car"></i><span>购物车（0）</span></a><divclass="topnav-detail">购物车中还没有商品，赶紧选购吧！</div></div></div></div></div><!-- 顶部导航 结束 --><!-- 页头 开始 --><divclass="header"><divclass="container clearfix"><ahref=""class="header-logo fl"><h1>小米商城</h1></a><divclass="header-menu fl"><aclass="fl"href="">小米手机</a><aclass="fl"href="">红米手机</a><aclass="fl"href="">电视</a><aclass="fl"href="">笔记本</a><aclass="fl"href="">平板</a><aclass="fl"href="">家电</a><aclass="fl"href="">路由器</a><aclass="fl"href="">服务</a><aclass="fl"href="">社区</a>++++
<!-- 二级菜单 --><divclass="header-submenu"><divclass="container clearfix"><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a><ahref=""class="fl"><divclass="header-cover"><imgsrc="./img/product.webp"alt=""/></div><divclass="header-name">Redmi Note 11 5G</div><divclass="header-price">1199元起</div></a></div></div></div><!-- 搜索区域 --><formclass="header-search fr"><inputclass="fl"type="text"placeholder="手机"/><buttonclass="header-searchicon fl"><iclass="iconfont i-fangdajing"></i></button><divclass="header-suggest"><ahref="">全部商品</a><ahref="">手机</a><ahref="">耳机</a><ahref="">小米平板5 Pro</a><ahref="">加湿器</a><ahref="">笔记本</a></div></form></div></div><!-- 页头 结束 --><!-- 横幅 开始 --><divclass="banner container"><ahref=""class="banner-cover"><imgsrc="./img/banner.jpeg"alt=""/></a><divclass="banner-pointer banner-pointer-left"><iclass="iconfont i-left"></i></div><divclass="banner-pointer banner-pointer-right"><iclass="iconfont i-right"></i></div><divclass="banner-dots"><spanclass="fl"></span><spanclass="banner-dots-selected fl"></span><spanclass="fl"></span></div><!-- 横幅-菜单 --><ulclass="banner-menu"><li><divclass="banner-menu-item clearfix"><spanclass="fl">手机</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a><ahref=""class="fl"><imgsrc="./img/mobile.webp"alt=""class="fl"/><spanclass="fl">Note 11 Pro 系列</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">电视</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a><ahref=""class="fl"><imgsrc="./img/tv.webp"alt=""class="fl"/><spanclass="fl">Redmi 智能电视X65 2022款</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">笔记本 平板</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a><ahref=""class="fl"><imgsrc="./img/notebook.webp"alt=""class="fl"/><spanclass="fl">小米笔记本 Pro 14 锐龙版</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">家电</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a><ahref=""class="fl"><imgsrc="./img/fridge.webp"alt=""class="fl"/><spanclass="fl">冰箱</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">出行 穿戴</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a><ahref=""class="fl"><imgsrc="./img/watch.webp"alt=""class="fl"/><spanclass="fl">Redmi 手表 2</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">智能 路由器</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a><ahref=""class="fl"><imgsrc="./img/ai.webp"alt=""class="fl"/><spanclass="fl">CyberDog</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">电源 配件</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a><ahref=""class="fl"><imgsrc="./img/power.webp"alt=""class="fl"/><spanclass="fl">移动电源</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">健康 儿童</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a><ahref=""class="fl"><imgsrc="./img/health.webp"alt=""class="fl"/><spanclass="fl">米家跑步机</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">耳机 音箱</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a><ahref=""class="fl"><imgsrc="./img/earphone.webp"alt=""class="fl"/><spanclass="fl">Redmi Buds 3 青春版</span></a></div></li><li><divclass="banner-menu-item clearfix"><spanclass="fl">生活 箱包</span><iclass="iconfont i-right fr"></i></div><divclass="banner-sub-menu"><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a><ahref=""class="fl"><imgsrc="./img/bag.webp"alt=""class="fl"/><spanclass="fl">小背包</span></a></div></li></ul></div><!-- 横幅 结束 --><!-- 横幅2 开始 --><divclass="banner2 container clearfix"><divclass="banner2-service fl"><ahref=""class="fl"><iclass="iconfont i-shijian"></i>
保障服务
</a><ahref=""class="fl"><iclass="iconfont i-qiye"></i>
企业团购
</a><ahref=""class="fl"><iclass="iconfont i-Fma"></i>
F码通道
</a><ahref=""class="fl"><iclass="iconfont i-Sim-Card"></i>
米粉卡
</a><ahref=""class="fl"><iclass="iconfont i-yijiuhuanxin"></i>
以旧换新
</a><ahref=""class="fl"><iclass="iconfont i-chongzhi"></i>
话费充值
</a></div><ahref=""class="fl banner2-item"><imgsrc="./img/banner1.jpg"alt=""/></a><ahref=""class="fl banner2-item"><imgsrc="./img/banner2.jpg"alt=""/></a><ahref=""class="fl banner2-item"><imgsrc="./img/banner3.jpg"alt=""/></a></div><!-- 横幅2 结束 --><!-- 主区域 开始 --><divclass="main"><ahref=""class="banner3 container"><imgsrc="./img/full-banner.webp"alt=""/></a><!-- 橱窗 --><divclass="sc container"><divclass="sc-top clearfix"><h2class="sc-title fl">手机</h2><ahref=""class="sc-more fr">
查看更多
<iclass="iconfont i-right"></i></a></div><divclass="sc-container clearfix"><divclass="sc-item-first fl"><ahref=""><imgsrc="./img/mobile-first.webp"alt=""/></a></div><divclass="sc-item-list fl"><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a><ahref=""class="sc-item fl"><imgsrc="./img/heisha.webp"alt=""/><pclass="sc-name">黑鲨4S Pro</p><pclass="sc-desc">磁动力升降肩键</p><pclass="sc-price">4799元起</p></a></div></div></div></div><!-- 主区域 结束 --><!-- 页脚区域 开始 --><divclass="footer"><divclass="container"><divclass="footer-top clearfix"><aclass="fl"href=""><iclass="iconfont i-weixiu1"></i>
预约维修服务
</a><aclass="fl"href=""><iclass="iconfont i-7tianwuliyoutuihuo"></i>
7天无理由退货
</a><aclass="fl"href=""><iclass="iconfont i-tian"></i>
15天免费换货
</a><aclass="fl"href=""><iclass="iconfont i-liwu"></i>
满69包邮
</a><aclass="fl"href=""><iclass="iconfont i-didian"></i>
520余家售后网点
</a></div><divclass="footer-bottom clearfix"><divclass="footer-links fl"><h3>帮助中心</h3><ahref="">账号管理</a><ahref="">购物指南</a><ahref="">订单操作</a></div><divclass="footer-links fl"><h3>服务支持</h3><ahref="">售后政策</a><ahref="">自助服务</a><ahref="">相关下载</a></div><divclass="footer-links fl"><h3>线下门店</h3><ahref="">小米之家</a><ahref="">服务网点</a><ahref="">授权体验店/专区</a></div><divclass="footer-links fl"><h3>关于小米</h3><ahref="">了解小米</a><ahref="">加入小米</a><ahref="">投资者关系</a><ahref="">企业社会责任</a><ahref="">廉洁举报</a></div><divclass="footer-links fl"><h3>关注我们</h3><ahref="">新浪微博</a><ahref="">官方微信</a><ahref="">联系我们</a><ahref="">公益基金会</a></div><divclass="footer-links fl"><h3>特色服务</h3><ahref="">F 码通道</a><ahref="">礼物码</a><ahref="">防伪查询</a></div><!-- 联系 --><divclass="footer-contact fr"><pclass="footer-phone">400-100-5678</p><pclass="footer-phone-desc">8:00-18:00（仅收市话费）</p><ahref=""class="footer-support"><iclass="iconfont i-liaotian"></i>
人工客服
</a><pclass="footer-subcribe">
关注小米：
<iclass="iconfont i-xinlang"></i><iclass="iconfont i-weixin"></i></p></div></div></div></div><!-- 页脚区域 结束 --><!-- 右侧固定菜单 开始 --><divclass="rm"><ahref=""class="rm-item"><iclass="iconfont i-tel"></i><spanclass="rm-title">手机APP</span><divclass="rm-mention"><imgsrc="./img/qrcode.png"alt=""/><p>
扫码领取新
<br/>
人百元礼包
</p></div></a><ahref=""class="rm-item"><iclass="iconfont i-yonghu"></i><spanclass="rm-title">个人中心</span></a><ahref=""class="rm-item"><iclass="iconfont i-weixiu1"></i><spanclass="rm-title">售后服务</span></a><ahref=""class="rm-item"><iclass="iconfont i-kefu"></i><spanclass="rm-title">人工客服</span></a><ahref=""class="rm-item"><iclass="iconfont i-car"></i><spanclass="rm-title">购物车</span></a><ahref="javascript:scrollTo(0,0)"class="rm-item rm-to-top"><iclass="iconfont i-dingbu"></i><spanclass="rm-title">回到顶部</span></a></div><!-- 右侧固定菜单 结束 --></body></html>
小米官网的CSS代码——banner
.banner{height: 460px;position: relative;}.banner-cover img{width: 1226px;height: 460px;}.banner-pointer{/* 箭头的统一样式 */position: absolute;width: 40px;height: 70px;color: #b8c3cb;text-align: center;line-height: 70px;cursor: pointer;top: 50%;margin-top: -35px;}.banner-pointer:hover{background:rgba(0, 0, 0, 0.5);color: #fff;}.banner-pointer .iconfont{font-size: 30px;}.banner-pointer-left{left: 234px;}.banner-pointer-right{right: 0;}.banner-dots{position: absolute;right: 30px;bottom: 30px;}.banner-dots span{width: 10px;height: 10px;background:rgba(0, 0, 0, 0.4);border-radius: 50%;border: 2px solid rgba(255, 255, 255, 0.3);margin: 0 4px;cursor: pointer;}.banner-dots span.banner-dots-selected{border-color:rgba(0, 0, 0, 0.4);background:rgba(255, 255, 255, 0.3);}/* 横幅-菜单 */.banner-menu{width: 234px;height: 100%;background:rgba(105, 101, 101, 0.6);position: absolute;left: 0;top: 0;padding: 20px 0;}.banner-menu-item{color: #fff;padding: 0 20px 0 30px;height: 42px;/* outline: 1px solid; */line-height: 42px;cursor: pointer;}.banner-menu li:hover .banner-menu-item{background: #ff6700;}.banner-menu li:hover .banner-sub-menu{display: block;}/* 子菜单 */.banner-sub-menu{position: absolute;top: 0;left: 234px;width: 992px;height: 100%;background: #fff;/* outline: 1px solid; */border: 1px solid #eee;display: none;}.banner-sub-menu a{width: 25%;height: 16.666%;padding: 0 20px;}.banner-sub-menu img{width: 40px;height: 40px;margin-top: 17px;margin-right: 12px;}.banner-sub-menu span{width: 154px;margin-top: 28px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
小米官网的CSS代码——banner2
.banner2{margin-top: 14px;margin-bottom: 26px;}.banner2-service{width: 234px;height: 170px;/* outline: 1px solid; */margin-right: 14px;}.banner2-item{width: 316px;height: 170px;/* outline: 1px solid; */margin-right: 15px;}.banner2-item img{width: 100%;height: 100%;}.banner2-item:last-child{margin-right: 0;}.banner2-service{background: #5f5750;padding: 3px;font-size: 12px;color: #ccc;}.banner2-service a:hover{color: #fff;}.banner2-service .iconfont{font-size: 26px;display: block;}.banner2-service a{width: 76px;height: 82px;text-align: center;padding-top: 10px;position: relative;}.banner2-service a::before{content:'';position: absolute;width: 1px;height: 70px;background: #665e57;left: 0;top: 6px;}.banner2-service a::after{content:'';position: absolute;width: 64px;height: 1px;background: #665e57;left: 6px;bottom: 0;}.banner2-service a:nth-child(3n + 1)::before{content: none;}.banner2-service a:nth-child(n + 4)::after{content: none;}
小米官网的CSS代码——common
/* 通用的css代码 */*{margin: 0;padding: 0;list-style: none;box-sizing: border-box;}*::before,
*::after{box-sizing: border-box;}a{text-decoration: none;color: inherit;}a:hover{color: #ff6700;}html{color: #333;min-width: 1226px;font: 14px/1.5 'Helvetica Neue', Helvetica, Arial,'Microsoft Yahei','Hiragino Sans GB','Heiti SC','WenQuanYi Micro Hei', sans-serif;}/* 浮动处理 */.fl{float: left;}.fr{float: right;}.clearfix::after{content:'';display: block;clear: both;}/* 通用容器 */.container{width: 1226px;margin-left: auto;margin-right: auto;}
小米官网的CSS代码——fonter
/* 页脚-顶部 */.footer-top{padding: 27px 0;border-bottom: 1px solid #e0e0e0;height: 75px;color: #616161;}.footer-top a{/* outline: 1px solid; */width: 20%;font-size: 16px;text-align: center;height: 20px;line-height: 20px;border-right: 1px solid #e0e0e0;}.footer-top .iconfont{font-size: 26px;vertical-align: -4px;}.footer-top a:last-child{border-right: none;}/* 页脚-底部 */.footer-bottom{padding: 40px 0;}.footer-links{width: 160px;color: #757575;}.footer-links h3{font-size: 14px;font-weight: normal;color: #424242;margin-bottom: 17px;}.footer-links a{display: block;font-size: 12px;margin-top: 10px;}/* 页脚-联系 */.footer-contact{width: 245px;text-align: center;border-left: 1px solid #e0e0e0;font-size: 12px;}.footer-phone{font-size: 22px;color: #ff6700;}.footer-phone-desc{color: #616161;}.footer-support{width: 118px;border: 1px solid #ff6700;color: #ff6700;display: block;margin: 6px auto;height: 30px;line-height: 30px;}.footer-support .iconfont{vertical-align: -1px;font-size: 14px;}.footer-support:hover{background: #ff6700;color: #fff;}.footer-subcribe{color: #616161;}.footer-subcribe .iconfont{font-size: 20px;vertical-align: middle;cursor: pointer;}.footer-subcribe .iconfont:hover{color: #ff6700;}
小米官网的CSS代码——header
.header{height: 100px;/* background: lightblue; */position: relative;}.header-logo h1{display: none;}.header-logo{background:url('../img/logo.png');width: 56px;height: 56px;background-size: 100% 100%;margin-top: 22px;margin-right: 172px;}.header-menu > a{height: 100px;line-height: 100px;padding: 0 10px;font-size: 16px;}.header-submenu{position: absolute;display: none;z-index: 30;background: #fff;/* background: red; */left: 0;width: 100%;top: 100px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;padding: 30px 0;}.header-cover img{width: 160px;height: 110px;}.header-submenu a{width: 204px;text-align: center;font-size: 12px;}.header-cover{/* background: red; */border-right: 1px solid #eee;}.header-submenu a:last-child .header-cover{border-right: none;}.header-name{margin-top: 10px;color: #333;}.header-price{color: #ff6700;}.header-menu:hover .header-submenu{display: block;}.header-search{margin-top: 25px;position: relative;}.header-search input{width: 245px;height: 50px;font-size: 16px;padding: 0 15px;outline: none;border: 1px solid #ccc;}.header-searchicon{width: 55px;height: 50px;background: #fff;border: 1px solid #ccc;border-left: none;cursor: pointer;color: #777;}.header-searchicon .iconfont{font-size: 20px;}.header-suggest{position: absolute;left: 0;top: 50px;width: 245px;border: 1px solid #ff6700;border-top: none;z-index: 40;background: #fff;display: none;}.header-suggest a{display: block;font-size: 12px;height: 30px;line-height: 30px;padding: 0 10px;}.header-suggest a:hover{background: #eee;color: inherit;}.header-search input:hover{border-color: #aaa;}.header-search input:hover ~ .header-searchicon{border-color: #aaa;}.header-search input:focus ~ .header-suggest{display: block;}.header-search input:focus{border-color: #ff6700;}.header-search input:focus ~ .header-searchicon{border-color: #ff6700;}.header-searchicon:hover{background: #ff6700;border-color: #ff6700;color: #fff;}
小米官网的CSS代码——main
.main{background: #f5f5f5;padding: 22px 0;}/* banner3 */.banner3{display: block;background: red;}.banner3 img{width: 100%;display: block;}/* 橱窗 */.sc{margin-top: 10px;}.sc-top{height: 58px;line-height: 58px;}.sc-title{font-size: 22px;font-weight: normal;}.sc-more .iconfont{background: #aaa;width: 20px;height: 20px;display: inline-block;line-height: 20px;color: #fff;border-radius: 50%;text-align: center;/* vertical-align: -2px; */}.sc-more:hover .iconfont{background: #ff6700;}.sc-item-first{width: 234px;height: 614px;margin-right: 14px;}.sc-item-first img{width: 100%;height: 100%;}.sc-item-list{width: 978px;}.sc-item{background: #fff;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;text-align: center;}.sc-item img{width: 160px;height: 160px;margin-top: 20px;}.sc-name{margin-top: 20px;color: #333;}.sc-desc{font-size: 12px;color: #b0b0b0;margin-top: 3px;margin-bottom: 10px;}.sc-price{color: #ff6700;}.sc-item:nth-child(4n){margin-right: 0;}
小米官网的CSS代码——rm
.rm{width: 84px;position: fixed;right: 0;bottom: 70px;z-index: 999;}.rm-item{width: 100%;height: 92px;background: #fff;border: 1px solid #f5f5f5;border-top: none;color: #757575;text-align: center;display: block;padding-top: 14px;position: relative;}.rm-item:first-child,
.rm-to-top{border-top: 1px solid #f5f5f5;}.rm-to-top{margin-top: 18px;}.rm-item .iconfont{display: block;font-size: 30px;}/* 弹出层 */.rm-mention{width: 128px;padding: 14px;position: absolute;right: 90px;top: 0;border: 1px solid #f5f5f5;background: #fff;display: none;}.rm-mention img{width: 100px;height: 100px;display: block;margin-bottom: 20px;}.rm-mention p{color: #757575;}
小米官网的CSS代码——topnav
.topnav{background: #333;height: 40px;color: #b0b0b0;font-size: 12px;}.topnav-menu{line-height: 40px;}.topnav-menu a{padding: 0 7px;border-right: 1px solid #424242;}.topnav-menu li:last-child a{border-right: none;}.topnav-menu li:first-child a{padding-left: 0;}.topnav-menu a:hover{color: #fff;}.topnav-car{background: #424242;width: 120px;height: 40px;margin-left: 13px;position: relative;}.topnav-link{width: 100%;height: 100%;display: block;text-align: center;line-height: 40px;}.topnav-link .iconfont{margin-right: 3px;}.topnav-detail{background: #fff;width: 320px;height: 100px;position: absolute;right: 0;top: 40px;border: 1px solid #ccc;border-top: none;text-align: center;line-height: 100px;display: none;z-index: 50;}.topnav-car:hover .topnav-detail{display: block;}.topnav-car:hover .topnav-link{background: #fff;color: #ff6700;}
本文转载自: https://blog.csdn.net/weixin_64993156/article/details/129233075
版权归原作者 Nempohilist. 所有， 如有侵权，请联系我们删除。
版权归原作者 Nempohilist. 所有， 如有侵权，请联系我们删除。