<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米官网模仿</title> <link rel="stylesheet" href="./小米.css"> <style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> </head> <body> <!-- 导航开始 --> <div class="black_nav"> <div class="black_nav_div"> <ul class="black_left"> <li><a href="#">小米官网</a><span class="black_nav_span">|</span></li> <li><a href="#">小米商城</a><span class="black_nav_span">|</span></li> <li><a href="#">小米汽车</a><span class="black_nav_span">|</span></li> <li><a href="#">云服务</a><span class="black_nav_span">|</span></li> <li><a href="#">loT</a><span class="black_nav_span">|</span></li> <li><a href="#">有品</a><span class="black_nav_span">|</span></li> <li><a href="#">小爱开放平台</a><span class="black_nav_span">|</span></li> <li><a href="#">资质证照</a><span class="black_nav_span">|</span></li> <li><a href="#">协议规则</a><span class="black_nav_span">|</span></li> <li><a href="#">下载app</a><span class="black_nav_span">|</span></li> <li><a href="#">Select Location</a></li> </ul> <ul class="black_right"> <li><a href="#">登陆</a><span class="black_nav_span">|</span></li> <li><a href="#">注册</a><span class="black_nav_span">|</span></li> <li><span class="black_nav_right_span"><a href="#">消息通知</a></span></li> <li><a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gouwuchekong"></use></svg>购物车(0)</a></li> </ul> </div> </div> <!-- 黑色导航结束 --> <!-- 白色导航开始 --> <div class="white_nav"> <div class="white_nav_div"> <div class="loge"> <svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-xiaomiguishu"></use></svg> </div> <ul class="white_nav_ul"> <li class="special"><a href="#"></a></li> <li><a href="#">Xiaomi手机</a></li> <li><a href="#">REDMI手机</a></li> <li><a href="#">电视</a></li> <li><a href="#">笔记本</a></li> <li><a href="#">平板</a></li> <li><a href="#">家电</a></li> <li><a href="#">路由器</a></li> <li><a href="#">服务中心</a></li> <li><a href="#">社区</a></li> </ul> <div class="search"> <select name="" id=""> <option value="" disabled selected>路由器</option> <option value="">手机换新</option> <option value="">耳机</option> <option value="">REDMI K90 Pro Max</option> <option value="">冰箱</option> <option value="">空调</option> <option value="">洗衣机</option> <option value="">充电宝</option> <option value="">电池</option> </select> <div class="search_icon"><a href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg></a></div> </div> </div> </div> <!-- 白色导航结束 --> <!-- 侧边开始 --> <div class="beside"> <ul> <li><a><img src="./image/beside1.png" alt=""><p class="beside_word">手机App</p></a></li> <li><a><img src="./image/beside2.png" alt=""><p class="beside_word">个人中心</p></a></li> <li><a><img src="./image/beside3.png" alt=""><p class="beside_word">售后服务</p></a></li> <li><a><img src="./image/beside4.png" alt=""><p class="beside_word">人工客服</p></a></li> <li><a><img src="./image/beside5.png" alt=""><p class="beside_word">购物车</p></a></li> </ul> </div> <!-- 侧边结束 --> <!-- 主体部分开始 --> <div class="main_body"> <div class="main_body_div"> <img src="./image/小米1.jpg" alt=""> <ul> <li>手机<span class="gt">></span></li> <li>电视<span class="gt">></span></li> <li>家电<span class="gt">></span></li> <li>笔记本 平板 显示器<span class="gt">></span></li> <li>出行 穿戴<span class="gt">></span></li> <li>耳机 音箱<span class="gt">></span></li> <li>健康 儿童<span class="gt">></span></li> <li>生活 钱包<span class="gt">></span></li> <li>智能 路由器<span class="gt">></span></li> <li>电源 配件<span class="gt">></span></li> </ul> </div> </div> <!-- 主体部分结束 --> <script src="./download/font_5089909_3ewtuqewtur/iconfont.js"></script> </body> </html>*{ margin: 0; padding: 0; box-sizing: border-box; } a{ text-decoration: none; color: black; } li{ list-style: none; } /* 黑色导航开始 */ .black_nav{ width: 100%; height: 40px; background-color: #333; font-size: 12px; line-height: 40px; } .black_nav .black_nav_div{ width: 1226px; margin: 0 auto; } .black_nav .black_nav_div .black_left{ float: left; } .black_nav .black_nav_div .black_right{ float: right; } .black_nav .black_nav_div li{ float: left; } .black_nav_span{ margin: 0 3.6px; color: #424242; } .black_nav li a{ color: #b0b0b0; } .black_nav_right_span{ padding: 0 10px; } /* 黑色导航结束 */ /* 白色导航开始 */ .white_nav{ width: 100%; height: 100px; font-size: 14px; line-height: 100px; margin: 0px 0px 50px 0px; } .white_nav_div{ width: 1226px; height: 100px; margin: 0 auto; position: relative; } .loge{ width: 56px; height: 56px; font-size: 56px; position:absolute; top: 10px; } .white_nav .white_nav_div .white_nav_ul{ width: 1100px; height: 88px; padding: 12px 0 0 30px; position: absolute; top: 2px; text-align: center; } .white_nav .white_nav_div .white_nav_ul li{ padding: 0px 10px 38px 10px; float: left; font-size: 18px; } .special{ width: 127px; height: 88px; padding: 0px 38px 0px 0px; } .search{ position: absolute; right: 0px; top: 15px; } .search select{ width: 223px; height: 48px; appearance: none; text-align: center; } .search_icon{ width: 52px; height: 50px; font-size: 30px; position: absolute; right: 0px; top: 2px; text-align: center; } /* 白色导航结束 */ /* 侧边开始 */ .beside{ width: 82px; height: 450px; position: fixed; top: 200px; right: 0px; } .beside li{ width: 82px; height: 90px; text-align: center; border: 1px solid #b0b0b0; } .beside img{ width: 30px; height: 30px; } /* 侧边结束 */ /* 主体部分开始 */ .main_body{ width: 100%; height: 460px; } .main_body_div{ width: 1226px; height: 460px; margin: 0 auto; position: relative; } .main_body_div img{ width: 100%; height: 100%; } .main_body ul{ position: absolute; top: 0px; background-color: #424242; height: 460px; } .main_body .main_body_div li{ color:white; height: 46px; line-height: 46px; } .gt{ float: right; } /* 主体部分结束 */运行结果：
