模仿小米首页效果
<!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="icon" href="images/favicon.ico"> <!-- 全局样式 --> <link rel="stylesheet" href="css/reset.css"> <!-- 字体图标 --> <link rel="stylesheet" href="css/iconfont.css"> <!-- 自己的css文件 --> <link rel="stylesheet" href="css/mi.css"> </head> <body> <!-- 广告图开始 --> <div class="ad-img"> </div> <!-- 广告图介绍 --> <!-- 黑色导航条开始 --> <div class="black-nav"> <div class="wrap"> <ul class="nav-left"> <li><a href="#">小米商城</a><span>|</span></li> <li><a href="#">MIUI</a><span>|</span></li> <li><a href="#">loT</a><span>|</span></li> <li><a href="#">云服务</a><span>|</span></li> <li><a href="#">金融</a><span>|</span></li> <li><a href="#">有品</a><span>|</span></li> <li><a href="#">小爱开放平台</a><span>|</span></li> <li><a href="#">企业团购</a><span>|</span></li> <li><a href="#">资质证照</a><span>|</span></li> <li><a href="#">协议规则</a><span>|</span></li> <li> <a href="#">下载app</a><span>|</span> <div class="download"> <img src="images/download.png" alt=""> <p>小米商城APP</p> </div> <div class="sanjiao"></div> </li> <li><a href="#">SelectLocation</a></li> </ul> <ul class="nav-right"> <li><a href="login.html">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="#">消息通知</a></li> <li class="cart"> <a href="gwc.html"><i class="iconfont"></i>购物车(0)</a> <div class="cart-list">购物车里没有商品，赶紧买吧！</div> </li> </ul> </div> </div> <!-- 黑色导航条结束 --> <!-- 白导航开始了 --> <div class="white-nav"> nbsp; <div class="wrap"> <div class="logo"> <div class="logo-box"> <a href="#"> <img src="images/logo-footer.png" alt="" class="logo-img"> <img src="images/logo.png" alt="" class="home"> </a> </div> </div> <div class="nav-bar"> <ul> <li> <a href="#">小米手机</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> </ul> </div> </div> </li> <li> <a href="#">Redmi红米</a> <div class="nav-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="img-box"> <img src="images/cff2977b8aab1e43b94b2f00083f4ae1.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> <li> <a href="#"> <div class="img-box"> <img src="images/82ddffd7562c54f9166fa876c143ff22.webp" alt=""> </div> <p class="nav-name">小米10 Pro</p> <p class="nav-price">4999元起</p> </a> </li> </ul> </div> </div> </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> <div class="search"> <form action=""> <input type="text"> <button class="iconfont"></button> <div class="hot-words"> <a href="#">小米9 Pro 5G</a> <a href="#">Redmi Note 8</a> </div> <div class="hot-list"></div> </form> </div> </div> </div> <!-- 白色导航介绍 --> <!-- 轮播图开始 --> <div class="banner"> <div class="wrap"> <div class="banner-box"> <div class="slide"> <ul> <li> <a href="#">手机 电话卡</a> <i class="iconfont"></i> <div class="slide-list"> <ul> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> </ul> </div> </li> <li> <a href="#">电视 盒子</a> <i class="iconfont"></i> <div class="slide-list"> <ul> <li> <a href="#"> <img src="images/23316088a9182a08c624958319924d8d.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米10 Pro</span> </a> </li> <li> <a href="#"> <img src="images/d622e8a81f81caa0f619ee750cf64501.png" alt=""> <span>小米