HTML-CSS-JS插件实现小米商城首页源码
小米商城-html-css-swiper插件
·
HTML-CSS-JS插件实现小米商城首页源码
直接上源码
源码链接
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城 - Xiaomi 12、Redmi K50、MIX FOLD，小米电视官方网站</title>
<!-- 图标 -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<!-- 引入重置文件 -->
<link rel="stylesheet" href="./css/reset.css">
<!-- 链接图标文件 -->
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<!-- 引入swiper样式表 -->
<link rel="stylesheet" href="./swiper-7.4.1/swiper/swiper-bundle.min.css">
<!-- 个人定制的样式表 -->
<link rel="stylesheet" href="./css/index.css">
<script src="./swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<!-- 右侧定位导航 -->
<div class="right-nav">
<a href="">
<div class="icon">
<i class="fa fa-mobile" aria-hidden="true" style="position: absolute; left: 10px;"></i>
</div>
<span class="text">手机APP</span>
<!-- 左侧隐藏栏 -->
<div class="nav-content">
<img src="./images/78c30d4f259ed43ab20e810a522a6249.png" alt="">
<span>扫码领取新人百元礼包</span>
</div>
<div class="triangle2"></div>
</a>
<a href="">
<div class="icon">
<i class="fa fa-user-o" aria-hidden="true"></i>
</div>
<span class="text">个人中心</span>
</a>
<a href="">
<div class="icon">
<i class="fa fa-wrench" aria-hidden="true"></i>
</div>
<span class="text">售后服务</span>
</a>
<a href="">
<div class="icon">
<i class="fa fa-headphones" aria-hidden="true"></i>
</div>
<span class="text">人工客服</span>
</a>
<a href="">
<div class="icon">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</div>
<span class="text">购物车</span>
</a>
<a class="item backtop active" href="">
<div class="icon" id="dh1">
<i class="fa fa-long-arrow-up" aria-hidden="true" style="position: absolute; left: 10px;"></i>
</div>
<span class="text" id="gotop">回顶部</span>
</a>
</div>
<!-- 头部开始 -->
<div class="header">
<div class="wrap">
<ul class="header-left">
<li><a href="https://www.mi.com/">小米官网</a><span>|</span></li>
<li><a href="">小米商城</a><span>|</span></li>
<li><a href="">MIUI</a><span>|</span></li>
<li><a href="">IoT</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">
<a href="#">
<img src="./images/download.png" alt="" width="90" height="90">
<p>小米商城app</p>
</a>
</div>
<div class="triangle"></div>
</li>
<li><a href="">智能生活</a><span>|</span></li>
<li><a href="">Select Location</a><span>|</span></li>
</ul>
<ul class="header-right">
<li><a href="">登录 <span>|</span></a></li>
<li><a href="">注册 <span>|</span></a></li>
<li><a href="">消息通知</a></li>
<li class="cart">
<a href=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> 购物车(0)</a>
<div class="cart-list">
购物车中还没有商品，赶紧选购吧！
</div>
</li>
</ul>
</div>
</div>
<!-- 导航开始 -->
<div class="nav">
<div class="wrap">
<div class="logo">
<a href="https://www.mi.com/" alt="小米官网">
<!-- <img src="./images/logo-mi2.png" alt=""> -->
</a>
</div>
<div class="nav-bar">
<ul>
<li><a href="">Xiaomi手机</a>
<!-- 小米手机下方下拉列表 -->
<div class="nav-bar-list">
<!-- 下拉列表的容器 -->
<div class="wrap">
<!-- 排序 -->
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/88ae9b85c5f8fbdae2ea98d58a045e1e.png" alt="">
<p class="name1">Xiaomi Civi 1S</p>
<p class="price1">2299元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/02ac31f8d3848f71617e074e8e50879e.png" alt="">
<p class="name1">小米 12 Pro</p>
<p class="price1">4699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/34eec49ce46adcd4739e60a2b56062fc.png" alt="">
<p class="name1">小米 12</p>
<p class="price1">3699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/075d45f17b32b39c98be850a5592bbee.png" alt="">
<p class="name1">小米 12X</p>
<p class="price1">2699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/fea69fb5990da9dfc909aa8279aaea7e.png" alt="">
<p class="name1">小米 11 青春活力版</p>
<p class="price1">1769元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8cad77bda138fd94eadbc2ddfced7c56.png" alt="">
<p class="name1">小米 Civi</p>
<p class="price1">2099元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="">Redmi 红米</a>
<div class="nav-bar-list">
<!-- 红米下拉列表的容器 -->
<div class="wrap">
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/1e1f915167554e99916273b5269da1b5.webp" alt="">
<p class="name1">Redmi Note 11T Pro+</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/f11d7da9517953d11e02d0b459003f19.webp" alt="">
<p class="name1">Redmi Note 11T Pro</p>
<p class="price1">1999元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/30969671b2829cbc625f018c6c998708.webp" alt="">
<p class="name1">Redmi Note 11SE</p>
<p class="price1">1699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/ae5b5a8e24272dd4cdd77bf6d26954b6.webp" alt="">
<p class="name1">Redmi 10A</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/418f4cb7536265cd99bdf8b2e88d1f84.webp" alt="">
<p class="name1">Redmi 50 Pro</p>
<p class="price1">649元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8725dc0e5b0def0155a219a1fc316cca.webp" alt="">
<p class="name1">Redmi K50</p>
<p class="price1">2999元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">电视</a>
<div class="nav-bar-list">
<!-- 下拉列表的容器 -->
<div class="wrap">
<!-- 排序 -->
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/88ae9b85c5f8fbdae2ea98d58a045e1e.png" alt="">
<p class="name1">Xiaomi Civi 1S</p>
<p class="price1">2299元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/02ac31f8d3848f71617e074e8e50879e.png" alt="">
<p class="name1">小米 12 Pro</p>
<p class="price1">4699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/34eec49ce46adcd4739e60a2b56062fc.png" alt="">
<p class="name1">小米 12</p>
<p class="price1">3699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/075d45f17b32b39c98be850a5592bbee.png" alt="">
<p class="name1">小米 12X</p>
<p class="price1">2699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/fea69fb5990da9dfc909aa8279aaea7e.png" alt="">
<p class="name1">小米 11 青春活力版</p>
<p class="price1">1769元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8cad77bda138fd94eadbc2ddfced7c56.png" alt="">
<p class="name1">小米 Civi</p>
<p class="price1">2099元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">笔记本</a>
<div class="nav-bar-list">
<!-- 红米下拉列表的容器 -->
<div class="wrap">
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/1e1f915167554e99916273b5269da1b5.webp" alt="">
<p class="name1">Redmi Note 11T Pro+</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/f11d7da9517953d11e02d0b459003f19.webp" alt="">
<p class="name1">Redmi Note 11T Pro</p>
<p class="price1">1999元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/30969671b2829cbc625f018c6c998708.webp" alt="">
<p class="name1">Redmi Note 11SE</p>
<p class="price1">1699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/ae5b5a8e24272dd4cdd77bf6d26954b6.webp" alt="">
<p class="name1">Redmi 10A</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/418f4cb7536265cd99bdf8b2e88d1f84.webp" alt="">
<p class="name1">Redmi 50 Pro</p>
<p class="price1">649元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8725dc0e5b0def0155a219a1fc316cca.webp" alt="">
<p class="name1">Redmi K50</p>
<p class="price1">2999元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">平板</a>
<div class="nav-bar-list">
<!-- 下拉列表的容器 -->
<div class="wrap">
<!-- 排序 -->
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/88ae9b85c5f8fbdae2ea98d58a045e1e.png" alt="">
<p class="name1">Xiaomi Civi 1S</p>
<p class="price1">2299元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/02ac31f8d3848f71617e074e8e50879e.png" alt="">
<p class="name1">小米 12 Pro</p>
<p class="price1">4699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/34eec49ce46adcd4739e60a2b56062fc.png" alt="">
<p class="name1">小米 12</p>
<p class="price1">3699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/075d45f17b32b39c98be850a5592bbee.png" alt="">
<p class="name1">小米 12X</p>
<p class="price1">2699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/fea69fb5990da9dfc909aa8279aaea7e.png" alt="">
<p class="name1">小米 11 青春活力版</p>
<p class="price1">1769元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8cad77bda138fd94eadbc2ddfced7c56.png" alt="">
<p class="name1">小米 Civi</p>
<p class="price1">2099元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">家电</a>
<div class="nav-bar-list">
<!-- 红米下拉列表的容器 -->
<div class="wrap">
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/1e1f915167554e99916273b5269da1b5.webp" alt="">
<p class="name1">Redmi Note 11T Pro+</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/f11d7da9517953d11e02d0b459003f19.webp" alt="">
<p class="name1">Redmi Note 11T Pro</p>
<p class="price1">1999元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/30969671b2829cbc625f018c6c998708.webp" alt="">
<p class="name1">Redmi Note 11SE</p>
<p class="price1">1699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/ae5b5a8e24272dd4cdd77bf6d26954b6.webp" alt="">
<p class="name1">Redmi 10A</p>
<p class="price1">4499元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/418f4cb7536265cd99bdf8b2e88d1f84.webp" alt="">
<p class="name1">Redmi 50 Pro</p>
<p class="price1">649元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8725dc0e5b0def0155a219a1fc316cca.webp" alt="">
<p class="name1">Redmi K50</p>
<p class="price1">2999元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="">路由器</a>
<div class="nav-bar-list">
<!-- 下拉列表的容器 -->
<div class="wrap">
<!-- 排序 -->
<ul>
<li>
<a href="">
<div class="img-box">
<img src="./images/88ae9b85c5f8fbdae2ea98d58a045e1e.png" alt="">
<p class="name1">Xiaomi Civi 1S</p>
<p class="price1">2299元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/02ac31f8d3848f71617e074e8e50879e.png" alt="">
<p class="name1">小米 12 Pro</p>
<p class="price1">4699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/34eec49ce46adcd4739e60a2b56062fc.png" alt="">
<p class="name1">小米 12</p>
<p class="price1">3699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/075d45f17b32b39c98be850a5592bbee.png" alt="">
<p class="name1">小米 12X</p>
<p class="price1">2699元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/fea69fb5990da9dfc909aa8279aaea7e.png" alt="">
<p class="name1">小米 11 青春活力版</p>
<p class="price1">1769元起</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="img-box">
<img src="./images/8cad77bda138fd94eadbc2ddfced7c56.png" alt="">
<p class="name1">小米 Civi</p>
<p class="price1">2099元起</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="">服务中心</a></li>
<li><a href="">社区</a></li>
</ul>
</div>
<div class="search">
<input type="text" placeholder=" 黑鲨5">
<a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
<!-- 搜索框下拉点击框 -->
<div class="search-list">
<a href="">小米手机</a>
<a href="">红米手机</a>
<a href="">电视</a>
<a href="">笔记本</a>
<a href="">家电</a>
<a href="">路由器</a>
<a href="">智能硬件</a>
<a href="">社区</a>
</div>
</div>
</div>
</div>
<!-- 导航结束 -->
<!-- banner开始 -->
<div class="banner">
<div class="wrap">
<!-- <div class="banner-box">
</div> -->
<div class="swiper-wrapper">
<div class="swiper-slide"><a href=""><img src="./images/27c7f7fe4e1621bee3fc4acedbe3d9dd.jpg" alt=""></a></div>
<div class="swiper-slide"><a href=""><img src="./images/8764fab6f4d9e2fde9b6171eb41cbd55.webp" alt=""></a></div>
<div class="swiper-slide"><a href=""><img src="./images/143ceae1731ac47fe7fa68dde2978bdc.webp" alt=""></a></div>
<div class="swiper-slide"><a href=""><img src="./images/987c34b474be111ba87f0321082eb2f3 (1).webp" alt=""></a></div>
<div class="swiper-slide"><a href="https://www.mi.com/shop/buy/detail?product_id=10000403"><img src="./images/36b45c624f42fa81732457e3f9773dbd.webp" alt=""></a></div>
</div>
<div class="slide">
<ul>
<li><a href="">手机<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/d8aeccb0bad7f28a44aa89b2ddb51010.webp" alt="">
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5cef72d0fea727cdf62b8e18b3d039d1.webp" alt="">
<span>Note 11T Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6932d946285eb25ea28837eee21cbcd3.webp" alt="">
<span>Note 11SE</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c680c8d69a77ebfa924af7daa1a854be.webp" alt="">
<span>小米 Civi 1S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/58eff3ffcf8df68e9ee8bbf90f1e8fa9.webp" alt="">
<span>黑鲨5 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a75970583c27c5cfe61f8dcafc3245c1.webp" alt="">
<span>黑鲨5</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/cd1f0b06757ab64cb320a9a545f616ef.webp" alt="">
<span>Redmi 10A</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c1f27bd990c9b9380fb7685639b3f503.webp" alt="">
<span>Redmi K50 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/199b6e1769dd4002b0e6373fd3a5dd0e.webp" alt="">
<span>Redmi K50</span>
</a>
</li>
<li>
<a href="#">
<img src="images/574efed01e8d437aa5c82fdc515b7e65.webp" alt="">
<span>Redmi K40S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b251574ddd82dca50a160d4acc09ceb5.webp" alt="">
<span>Redmi K50 电竞版</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6c0553468a73cc445012577d8993dfc9.webp" alt="">
<span>小米 12 Pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ae8f6a46838f737d69290f12fd95de35.webp" alt="">
<span>小米 12</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6a7002e89afcdc705744bb395ad29ca4.webp" alt="">
<span>小米 12X</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2ea5e610875460bc0cda0e45f4822ec.webp" alt="">
<span>Xiaomi 11 青春活力版
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a95d59ec8c9c6ae7061f314eb4901e7c.webp" alt="">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2c570b7cd666114a7d351a1dd10a527.webp" alt="">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ca3caca774dc8be0a453c90d1fa58e13.webp" alt="">
<span>Note 11 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/92fdd051100722d25323e9bd188befc5.webp" alt="">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="images/f33903e1162959f500360a39896f2306.webp" alt="">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="#">
<img src="images/fa2bae1f43611e80a8e4877719c76bdb.webp" alt="">
<span>Xiaomi MIX 4</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ab345272bf9894bb8269d4901344b068.webp" alt="">
<span>Xiaomi MIX 4 FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a1241b5a94ba1739e85f72d46592af0e.webp" alt="">
<span>小米 11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.webp" alt="">
<span>小米 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">电视<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/943995e8d1b1a884e123aec25cc1f8b8.webp" alt="">
<span>小米拍拍4K高清投屏器</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 55" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 65" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b91c9ef670fa1c12eddf23b209f9ff33.webp" alt="">
<span>小米电视 大师77" OLED</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES43 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES65 2022款</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES75 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/d219d8b9c4a74eda4ae6c0222d194cd2.webp" alt="">
<span>金属全面屏电视
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/7da49e7ada2229c963c9c7353a58d49b.webp" alt="">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1df560d16cc983b0f34d24fc484bd697.webp" alt="">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/070b329c18c1ab167df2a42564a67813.webp" alt="">
<span>Redmi 智能电视 X56</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8aeae36f5d088f22c84b8953bd0d08b4.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ce75f4a3fef148b6729061a18f994aa7.webp" alt="">
<span>米家激光投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="images/9d649ec3d7d14da7090e396d56b7cc92.webp" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="images/3fbb9ad7c67775fcc1a10219bdbd7257.webp" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6797917392e912577135d9eb8ad92f1f.webp" alt="">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8cb5791161d8b25897f60385f0ec7ab2.webp" alt="">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4fa264c15d3829e6de4283a552651e22.webp" alt="">
<span>激光投影电视</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">笔记本 平板<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/d8aeccb0bad7f28a44aa89b2ddb51010.webp" alt="">
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5cef72d0fea727cdf62b8e18b3d039d1.webp" alt="">
<span>Note 11T Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6932d946285eb25ea28837eee21cbcd3.webp" alt="">
<span>Note 11SE</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c680c8d69a77ebfa924af7daa1a854be.webp" alt="">
<span>小米 Civi 1S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/58eff3ffcf8df68e9ee8bbf90f1e8fa9.webp" alt="">
<span>黑鲨5 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a75970583c27c5cfe61f8dcafc3245c1.webp" alt="">
<span>黑鲨5</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/cd1f0b06757ab64cb320a9a545f616ef.webp" alt="">
<span>Redmi 10A</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c1f27bd990c9b9380fb7685639b3f503.webp" alt="">
<span>Redmi K50 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/199b6e1769dd4002b0e6373fd3a5dd0e.webp" alt="">
<span>Redmi K50</span>
</a>
</li>
<li>
<a href="#">
<img src="images/574efed01e8d437aa5c82fdc515b7e65.webp" alt="">
<span>Redmi K40S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b251574ddd82dca50a160d4acc09ceb5.webp" alt="">
<span>Redmi K50 电竞版</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6c0553468a73cc445012577d8993dfc9.webp" alt="">
<span>小米 12 Pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ae8f6a46838f737d69290f12fd95de35.webp" alt="">
<span>小米 12</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6a7002e89afcdc705744bb395ad29ca4.webp" alt="">
<span>小米 12X</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2ea5e610875460bc0cda0e45f4822ec.webp" alt="">
<span>Xiaomi 11 青春活力版
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a95d59ec8c9c6ae7061f314eb4901e7c.webp" alt="">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2c570b7cd666114a7d351a1dd10a527.webp" alt="">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ca3caca774dc8be0a453c90d1fa58e13.webp" alt="">
<span>Note 11 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/92fdd051100722d25323e9bd188befc5.webp" alt="">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="images/f33903e1162959f500360a39896f2306.webp" alt="">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="#">
<img src="images/fa2bae1f43611e80a8e4877719c76bdb.webp" alt="">
<span>Xiaomi MIX 4</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ab345272bf9894bb8269d4901344b068.webp" alt="">
<span>Xiaomi MIX 4 FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a1241b5a94ba1739e85f72d46592af0e.webp" alt="">
<span>小米 11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.webp" alt="">
<span>小米 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">出行 穿戴<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/943995e8d1b1a884e123aec25cc1f8b8.webp" alt="">
<span>小米拍拍4K高清投屏器</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 55" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 65" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b91c9ef670fa1c12eddf23b209f9ff33.webp" alt="">
<span>小米电视 大师77" OLED</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES43 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES65 2022款</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES75 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/d219d8b9c4a74eda4ae6c0222d194cd2.webp" alt="">
<span>金属全面屏电视
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/7da49e7ada2229c963c9c7353a58d49b.webp" alt="">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1df560d16cc983b0f34d24fc484bd697.webp" alt="">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/070b329c18c1ab167df2a42564a67813.webp" alt="">
<span>Redmi 智能电视 X56</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8aeae36f5d088f22c84b8953bd0d08b4.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ce75f4a3fef148b6729061a18f994aa7.webp" alt="">
<span>米家激光投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="images/9d649ec3d7d14da7090e396d56b7cc92.webp" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="images/3fbb9ad7c67775fcc1a10219bdbd7257.webp" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6797917392e912577135d9eb8ad92f1f.webp" alt="">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8cb5791161d8b25897f60385f0ec7ab2.webp" alt="">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4fa264c15d3829e6de4283a552651e22.webp" alt="">
<span>激光投影电视</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">耳机 音响<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/d8aeccb0bad7f28a44aa89b2ddb51010.webp" alt="">
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5cef72d0fea727cdf62b8e18b3d039d1.webp" alt="">
<span>Note 11T Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6932d946285eb25ea28837eee21cbcd3.webp" alt="">
<span>Note 11SE</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c680c8d69a77ebfa924af7daa1a854be.webp" alt="">
<span>小米 Civi 1S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/58eff3ffcf8df68e9ee8bbf90f1e8fa9.webp" alt="">
<span>黑鲨5 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a75970583c27c5cfe61f8dcafc3245c1.webp" alt="">
<span>黑鲨5</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/cd1f0b06757ab64cb320a9a545f616ef.webp" alt="">
<span>Redmi 10A</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c1f27bd990c9b9380fb7685639b3f503.webp" alt="">
<span>Redmi K50 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/199b6e1769dd4002b0e6373fd3a5dd0e.webp" alt="">
<span>Redmi K50</span>
</a>
</li>
<li>
<a href="#">
<img src="images/574efed01e8d437aa5c82fdc515b7e65.webp" alt="">
<span>Redmi K40S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b251574ddd82dca50a160d4acc09ceb5.webp" alt="">
<span>Redmi K50 电竞版</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6c0553468a73cc445012577d8993dfc9.webp" alt="">
<span>小米 12 Pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ae8f6a46838f737d69290f12fd95de35.webp" alt="">
<span>小米 12</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6a7002e89afcdc705744bb395ad29ca4.webp" alt="">
<span>小米 12X</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2ea5e610875460bc0cda0e45f4822ec.webp" alt="">
<span>Xiaomi 11 青春活力版
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a95d59ec8c9c6ae7061f314eb4901e7c.webp" alt="">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2c570b7cd666114a7d351a1dd10a527.webp" alt="">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ca3caca774dc8be0a453c90d1fa58e13.webp" alt="">
<span>Note 11 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/92fdd051100722d25323e9bd188befc5.webp" alt="">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="images/f33903e1162959f500360a39896f2306.webp" alt="">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="#">
<img src="images/fa2bae1f43611e80a8e4877719c76bdb.webp" alt="">
<span>Xiaomi MIX 4</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ab345272bf9894bb8269d4901344b068.webp" alt="">
<span>Xiaomi MIX 4 FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a1241b5a94ba1739e85f72d46592af0e.webp" alt="">
<span>小米 11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.webp" alt="">
<span>小米 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">家电<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/943995e8d1b1a884e123aec25cc1f8b8.webp" alt="">
<span>小米拍拍4K高清投屏器</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 55" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 65" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b91c9ef670fa1c12eddf23b209f9ff33.webp" alt="">
<span>小米电视 大师77" OLED</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES43 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES65 2022款</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES75 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/d219d8b9c4a74eda4ae6c0222d194cd2.webp" alt="">
<span>金属全面屏电视
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/7da49e7ada2229c963c9c7353a58d49b.webp" alt="">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1df560d16cc983b0f34d24fc484bd697.webp" alt="">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/070b329c18c1ab167df2a42564a67813.webp" alt="">
<span>Redmi 智能电视 X56</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8aeae36f5d088f22c84b8953bd0d08b4.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ce75f4a3fef148b6729061a18f994aa7.webp" alt="">
<span>米家激光投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="images/9d649ec3d7d14da7090e396d56b7cc92.webp" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="images/3fbb9ad7c67775fcc1a10219bdbd7257.webp" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6797917392e912577135d9eb8ad92f1f.webp" alt="">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8cb5791161d8b25897f60385f0ec7ab2.webp" alt="">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4fa264c15d3829e6de4283a552651e22.webp" alt="">
<span>激光投影电视</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">智能 路由器<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/d8aeccb0bad7f28a44aa89b2ddb51010.webp" alt="">
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5cef72d0fea727cdf62b8e18b3d039d1.webp" alt="">
<span>Note 11T Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6932d946285eb25ea28837eee21cbcd3.webp" alt="">
<span>Note 11SE</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c680c8d69a77ebfa924af7daa1a854be.webp" alt="">
<span>小米 Civi 1S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/58eff3ffcf8df68e9ee8bbf90f1e8fa9.webp" alt="">
<span>黑鲨5 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a75970583c27c5cfe61f8dcafc3245c1.webp" alt="">
<span>黑鲨5</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/cd1f0b06757ab64cb320a9a545f616ef.webp" alt="">
<span>Redmi 10A</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c1f27bd990c9b9380fb7685639b3f503.webp" alt="">
<span>Redmi K50 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/199b6e1769dd4002b0e6373fd3a5dd0e.webp" alt="">
<span>Redmi K50</span>
</a>
</li>
<li>
<a href="#">
<img src="images/574efed01e8d437aa5c82fdc515b7e65.webp" alt="">
<span>Redmi K40S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b251574ddd82dca50a160d4acc09ceb5.webp" alt="">
<span>Redmi K50 电竞版</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6c0553468a73cc445012577d8993dfc9.webp" alt="">
<span>小米 12 Pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ae8f6a46838f737d69290f12fd95de35.webp" alt="">
<span>小米 12</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6a7002e89afcdc705744bb395ad29ca4.webp" alt="">
<span>小米 12X</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2ea5e610875460bc0cda0e45f4822ec.webp" alt="">
<span>Xiaomi 11 青春活力版
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a95d59ec8c9c6ae7061f314eb4901e7c.webp" alt="">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2c570b7cd666114a7d351a1dd10a527.webp" alt="">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ca3caca774dc8be0a453c90d1fa58e13.webp" alt="">
<span>Note 11 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/92fdd051100722d25323e9bd188befc5.webp" alt="">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="images/f33903e1162959f500360a39896f2306.webp" alt="">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="#">
<img src="images/fa2bae1f43611e80a8e4877719c76bdb.webp" alt="">
<span>Xiaomi MIX 4</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ab345272bf9894bb8269d4901344b068.webp" alt="">
<span>Xiaomi MIX 4 FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a1241b5a94ba1739e85f72d46592af0e.webp" alt="">
<span>小米 11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.webp" alt="">
<span>小米 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">电源 配件<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/943995e8d1b1a884e123aec25cc1f8b8.webp" alt="">
<span>小米拍拍4K高清投屏器</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 55" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 65" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b91c9ef670fa1c12eddf23b209f9ff33.webp" alt="">
<span>小米电视 大师77" OLED</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES43 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES65 2022款</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES75 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/d219d8b9c4a74eda4ae6c0222d194cd2.webp" alt="">
<span>金属全面屏电视
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/7da49e7ada2229c963c9c7353a58d49b.webp" alt="">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1df560d16cc983b0f34d24fc484bd697.webp" alt="">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/070b329c18c1ab167df2a42564a67813.webp" alt="">
<span>Redmi 智能电视 X56</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8aeae36f5d088f22c84b8953bd0d08b4.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ce75f4a3fef148b6729061a18f994aa7.webp" alt="">
<span>米家激光投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="images/9d649ec3d7d14da7090e396d56b7cc92.webp" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="images/3fbb9ad7c67775fcc1a10219bdbd7257.webp" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6797917392e912577135d9eb8ad92f1f.webp" alt="">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8cb5791161d8b25897f60385f0ec7ab2.webp" alt="">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4fa264c15d3829e6de4283a552651e22.webp" alt="">
<span>激光投影电视</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">健康 儿童<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/d8aeccb0bad7f28a44aa89b2ddb51010.webp" alt="">
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img src="images/5cef72d0fea727cdf62b8e18b3d039d1.webp" alt="">
<span>Note 11T Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6932d946285eb25ea28837eee21cbcd3.webp" alt="">
<span>Note 11SE</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c680c8d69a77ebfa924af7daa1a854be.webp" alt="">
<span>小米 Civi 1S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/58eff3ffcf8df68e9ee8bbf90f1e8fa9.webp" alt="">
<span>黑鲨5 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a75970583c27c5cfe61f8dcafc3245c1.webp" alt="">
<span>黑鲨5</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/cd1f0b06757ab64cb320a9a545f616ef.webp" alt="">
<span>Redmi 10A</span>
</a>
</li>
<li>
<a href="#">
<img src="images/c1f27bd990c9b9380fb7685639b3f503.webp" alt="">
<span>Redmi K50 Pro</span>
</a>
</li>
<li>
<a href="#">
<img src="images/199b6e1769dd4002b0e6373fd3a5dd0e.webp" alt="">
<span>Redmi K50</span>
</a>
</li>
<li>
<a href="#">
<img src="images/574efed01e8d437aa5c82fdc515b7e65.webp" alt="">
<span>Redmi K40S</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b251574ddd82dca50a160d4acc09ceb5.webp" alt="">
<span>Redmi K50 电竞版</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6c0553468a73cc445012577d8993dfc9.webp" alt="">
<span>小米 12 Pro</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ae8f6a46838f737d69290f12fd95de35.webp" alt="">
<span>小米 12</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6a7002e89afcdc705744bb395ad29ca4.webp" alt="">
<span>小米 12X</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2ea5e610875460bc0cda0e45f4822ec.webp" alt="">
<span>Xiaomi 11 青春活力版
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a95d59ec8c9c6ae7061f314eb4901e7c.webp" alt="">
<span>Note 11 Pro系列</span>
</a>
</li>
<li>
<a href="#">
<img src="images/e2c570b7cd666114a7d351a1dd10a527.webp" alt="">
<span>Note 11 4G</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ca3caca774dc8be0a453c90d1fa58e13.webp" alt="">
<span>Note 11 5G</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/92fdd051100722d25323e9bd188befc5.webp" alt="">
<span>Redmi K40</span>
</a>
</li>
<li>
<a href="#">
<img src="images/f33903e1162959f500360a39896f2306.webp" alt="">
<span>Xiaomi Civi</span>
</a>
</li>
<li>
<a href="#">
<img src="images/fa2bae1f43611e80a8e4877719c76bdb.webp" alt="">
<span>Xiaomi MIX 4</span>
</a>
</li>
<li>
<a href="#">
<img src="images/ab345272bf9894bb8269d4901344b068.webp" alt="">
<span>Xiaomi MIX 4 FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a1241b5a94ba1739e85f72d46592af0e.webp" alt="">
<span>小米 11 Ultra</span>
</a>
</li>
<li>
<a href="#">
<img src="images/a51c1afa4db8e47e62fad1f6fa4a8970.webp" alt="">
<span>小米 11</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="">生活 箱包<i class="fa fa-angle-right" aria-hidden="true"></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/943995e8d1b1a884e123aec25cc1f8b8.webp" alt="">
<span>小米拍拍4K高清投屏器</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b656495821144d92bd932d91eedcf659.webp" alt="">
<span>Redmi X55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 55" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/50194366cfebbc7c82489d0094c1f944.webp" alt="">
<span>小米电视6 65" OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/b91c9ef670fa1c12eddf23b209f9ff33.webp" alt="">
<span>小米电视 大师77" OLED</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 55英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 65英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/aa3954f817a23443c0b6b523ebbd09f6.webp" alt="">
<span>小米电视6 至尊版 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES43 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES55 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES65 2022款</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/1c0d83dd59a3dd91372d867864b35554.webp" alt="">
<span>小米电视 ES75 2022款</span>
</a>
</li>
<li>
<a href="#">
<img src="images/d219d8b9c4a74eda4ae6c0222d194cd2.webp" alt="">
<span>金属全面屏电视
</span>
</a>
</li>
<li>
<a href="#">
<img src="images/7da49e7ada2229c963c9c7353a58d49b.webp" alt="">
<span>大师电视 65英寸 OLED</span>
</a>
</li>
<li>
<a href="#">
<img src="images/1df560d16cc983b0f34d24fc484bd697.webp" alt="">
<span>小米电视4A 60英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/070b329c18c1ab167df2a42564a67813.webp" alt="">
<span>Redmi 智能电视 X56</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8aeae36f5d088f22c84b8953bd0d08b4.jpg" alt="">
<span>小米全面屏电视</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img src="images/ce75f4a3fef148b6729061a18f994aa7.webp" alt="">
<span>米家激光投影仪</span>
</a>
</li>
<li>
<a href="#">
<img src="images/9d649ec3d7d14da7090e396d56b7cc92.webp" alt="">
<span>Redmi 智能电视 MAX 98"</span>
</a>
</li>
<li>
<a href="#">
<img src="images/3fbb9ad7c67775fcc1a10219bdbd7257.webp" alt="">
<span>小米电视5 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/6797917392e912577135d9eb8ad92f1f.webp" alt="">
<span>小米电视4A 70英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/8cb5791161d8b25897f60385f0ec7ab2.webp" alt="">
<span>小米电视4S 75英寸</span>
</a>
</li>
<li>
<a href="#">
<img src="images/4fa264c15d3829e6de4283a552651e22.webp" alt="">
<span>激光投影电视</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<!-- 分页器 -->
<div class="swiper-pagination"></div>
<div class="prev"></div>
<div class="next"></div>
</div>
<script>
var mySwiper = new Swiper ('.wrap', {
effect : 'fade',//渐入渐出
autoplay: true, // 自动播放
autoplay:{delay:3000},//每张图片显示的时间
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable: true, //配置点击切换效果
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.next',
prevEl: '.prev',
},
// 如果需要滚动条
//scrollbar: {
// el: '.swiper-scrollbar',
//},
})
evant
</script>
</div>
<!-- banner结束 -->
<!-- 头部结束 -->
<!-- 底部的adv -->
<div class="adv">
<div class="wrap">
<div class="adv-aside">
<ul>
<li class="row col"><a href="">
<i class="fa fa-clock-o" aria-hidden="true"></i>
<p>保障服务</p>
</a>
</li>
<li class="row col"><a href="">
<i class="fa fa-building-o" aria-hidden="true"></i>
<p>企业团购</p>
</a>
</li>
<li class="row"><a href="">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<p>F码通道</p>
</a>
</li>
<li class="row"><a href="">
<i class="fa fa-microchip" aria-hidden="true"></i>
<p>米粉卡</p>
</a>
</li>
<li class="row"><a href="">
<i class="fa fa-money" aria-hidden="true"></i>
<p>以旧换新</p>
</a>
</li>
<li><a href="">
<i class="fa fa-plug" aria-hidden="true"></i>
<p>话费充值</p>
</a>
</li>
</ul>
</div>
<!-- 头部底部的图片 -->
<div class="adv-img">
<a href="#">
<img src="./images/290270b6fc499fc5fcb653417e99fe91.jpg" alt="">
</a>
</div>
<div class="adv-img">
<a href="#">
<img src="images/5d1892854c8bb165e755d68bde287d71.jpg" alt="">
</a>
</div>
<div class="adv-img">
<a href="#">
<img src="images/28c13d0d11b38ec17fa5d83bc6ba5912.jpg" alt="">
</a>
</div>
</div>
</div>
<!-- 主体开始 -->
<div class="container">
<div class="wrap">
<!--手机开始-->
<div class="phone">
<div class="home-banner-box">
<a href="#">
<img src="images/2656295f6c067f48a04a425acf15a096.webp" alt="">
</a>
</div>
<h2 class="title">手机
<a href="#" class="more">查看更多 <i class="fa fa-angle-right" aria-hidden="true"></i></a>
</h2>
<div class="home-box">
<div class="home-box-left home-box-left1">
<a href="#">
<img src="images/ac5cafc68c10ce4471869d378f594b52.png" alt="">
</a>
</div>
<div class="home-box-right">
<ul>
<li class="items">
<a href="#">
<img src="images/61454401f855cf5ed64747a6ac04bae5.webp" alt="" class="img1">
<p class="name2">Redmi Note 11T Pro+</p>
<p class="desc2">天玑8100 | 真旗舰芯</p>
<p class="price2">1999元起
<del>2000元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/5713971c4bb6512743dfd06023080268.png" alt="" class="img1">
<p class="name2">Redmi Note 10 Pro</p>
<p class="desc2">天玑8100 | 真旗舰芯</p>
<p class="price2">1699元起
<del>1799元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/7fccce9e65aff2d7c913e40f4bee1b0b.png" alt="" class="img1">
<p class="name2">Redmi Note 11SE</p>
<p class="desc2">双卡双5G | 极速登录</p>
<p class="price2">999元起
<del>1000元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/0bcd64f412dfb5e15695fa96d21ecb23.png" alt="" class="img1">
<p class="name2">Xiaomi Civi 1S</p>
<p class="desc2">原生美肌人像 | 奇迹阳光动人新色 |...</p>
<p class="price2">2299元起
<!-- <del>1699元</del> -->
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/d764150a470174741d8b0b04515f7a78.jpg" alt="" class="img1">
<p class="name2">Redmi 10A</p>
<p class="desc2">大电量、大音量、大屏幕</p>
<p class="price2">649元起
<del>699元</del>
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/18d2099cb0b05bbd23cb1915dfc9d0d6.jpg" alt="" class="img1">
<p class="name2">Redmi K50 Pro</p>
<p class="desc2">2K直屏的狠旗舰</p>
<p class="price2">2999元起
<!-- <del>1699元</del> -->
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/28c14106b688ac7ae88e761564789b37.jpg" alt="" class="img1">
<p class="name2">Redmi K50 Pro</p>
<p class="desc2">2K直屏的狠旗舰</p>
<p class="price2">2399元起
<!-- <del>1699元</del> -->
</p>
</a>
</li>
<li class="items">
<a href="#">
<img src="images/28febc579eaea6b07c96c0ec48b89f7a.jpg" alt="" class="img1">
<p class="name2">Redmi K40S</p>
<p class="desc2">口碑真旗舰</p>
<p class="price2">1799元起
<!-- <del>1699元</del> -->
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<!--手机结束-->
</div>
<!-- <script src="dist/js/swiper-bundle.min.js"></script> -->
</body>
</html>
CSS
/* CSS样式开始 */
.header{
width: 100%;
height: 40px;
line-height: 40px;
color: #b0b0b0;
font-size: 12px;
background-color: #333;
}
.wrap{
width: 1226px;
margin: 0 auto;
}
.header li, .header-left{
float: left;
}
.header-right{
float: right;
}
.header a{
color: #b0b0b0;
}
/* 鼠标悬停在a上，字体颜色产生变化 */
.header a:hover{
color: #fff;
}
.header span{
color: #424242;
margin: 0 3.6px;
}
/* 购物车 */
.cart{
position: relative;
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 25px;
cursor: pointer;
transition: all .2s;
}
/* 购物车图标 */
.cart i{
margin-right: 4px;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{
color: #ff6700;
}
/* 购物车的下拉列表 */
.cart-list{
z-index: 850;
position: absolute;
top: 40px;
/* 默认是左对齐，现在修改为右对齐 */
right: 0;
width: 316px;
height: 0px;
color: #424242;
background-color: #fff;
box-shadow: 0.2px 2px 10px rgba(0,0,0, .15);
transition: all .3s;
/* 溢出的文字隐藏掉 */
overflow: hidden;
}
.cart:hover>.cart-list{
height: 100px;
line-height: 100px;
}
/* 下载的下拉app列表 */
/* .header-left li{
position: relative;
} */
.download{
z-index: 900;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
width: 124px;
height: 0px;
background-color: #fff;
box-shadow: 0 1px 5px #ccc;
overflow: hidden;
transition: all .3s;
/* line-height: 148px; */
}
/* 二维码 */
.download img{
width: 90px;
margin: 18px 0 12px;
}
.download p{
color: #333;
font-size: 14px;
line-height: 14px;
}
.header-left>li:hover>.download{
height: 148px;
}
/* 三角形 */
.header-left li{
position: relative;
}
.triangle{
display: none;
z-index: 900;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
/* background-color: #424242; */
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
/* 三角形hover */
.header-left>li:hover>.triangle{
display: block;
}
/* 导航开始 */
.nav{
position: relative;
width: 100%;
height: 100px;
background-color: #fff;
}
.logo{
width: 62px;
height: 56px;
/* 设置logo居中 */
float: left;
margin-top: 22px;
text-align: left;
background: url(../images/logo-mi2.png);
background-size: 56px;
background-repeat: no-repeat;
}
.logo img{
width: 56px;
}
.nav-bar{
width: 868px;
height: 100px;
float: left;
padding-left: 172px;
box-sizing: border-box;
}
.nav-bar>ul>li{
height: 100px;
padding: 38px 10px;
float: left;
box-sizing: border-box;
}
.nav-bar>ul>li>a:hover{
color: #ff6700;
}
/* 中间nav的下拉列表开始 */
.nav-bar-list{
z-index: 850;
position: absolute;
left: 0px;
top: 100px;
width: 100%;
height: 0px;
/* background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
display: none; */
transition: all .4s;
overflow: hidden;
}
.nav-bar li:hover>.nav-bar-list{
/* display: block; */
height: 229px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
}
.nav-bar-list li{
float: left;
width: 204px;
padding-top: 35px;
}
.img-box{
width: 100%;
height: 110px;
border-right: 1px solid #e0e0e0;
box-sizing: border-box;
margin-bottom: 16px;
}
.name1,.price1{
font-size: 12px;
line-height: 20px;
}
.price1{
color: #ff6700;
}
.nav-bar-list li:last-child .img-box{
border-right: none;
}
/* 中间nav的下拉列表结束 */
/* 搜索开始 */
.search{
width: 296px;
height: 50px;
/* 设置search居中 */
margin: 25px 0px;
/* background-color: pink; */
float: left;
position: relative;
}
.search>input{
width: 245px;
height: 50px;
border: 1px solid#e0e0e0;
border-right: none;
box-sizing: border-box;
float: left;
transition: all .2s;
outline: none;
}
.search>a{
float: left;
width: 50px;
height: 50px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
font-size: 24px;
line-height: 48px;
color: rgb(98,103,143);
transition: all .2s;
}
/* 按钮hover */
.search>a:hover{
background-color: #ff6700;
border-color: #ff6700;
color: #fff;
}
.search>input:hover,.search>input:hover+a{
border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+a{
border-color: #ff6700;
}
/* 搜索框下拉列表开始 */
.search-list{
z-index: 800;
position: absolute;
top: 50px;
left: 0;
width: 246px;
height: 0px;
/* border: 1px solid #ff6700;
border-top: none;
box-sizing: border-box;
background-color: #fff;
display: none; */
overflow: hidden;
transition: all 0.3s;
}
.search>input:focus~.search-list{
height: 241px;
border: 1px solid #ff6700;
border-top: none;
box-sizing: border-box;
background-color: #fff;
display: block;
}
.search-list>a{
width: 243px;
height: 30px;
padding: 6px 15px;
display: block;
box-sizing: border-box;
color: #424242;
font-size: 12px;
text-align: left;
}
/* 搜索框下拉列表结束 */
/* 搜索结束 */
/* 导航结束 */
/* banner样式开始 */
.banner{
width: 100%;
height: 460px;
position: relative;
}
/* .banner-box{
width: 1226px;
height: 460px;
background-image: url(../images/02248aa55d5bef10c9013297074d7795.jpg);
background-size: 100%;
animation: banner 15s linear infinite;
} */
.banner>.wrap{
width: 1226px;
height: 460px;
overflow: hidden;
}
.swiper-slide>a>img{
width: 1226px;
height: 460px;
}
.swiper-wrapper{
position: absolute;
z-index: 1;
}
.prev,.next{
position: absolute;
top: 50%;
margin-top: -34.5px;
width: 41px;
height: 69px;
background-image: url("../images/icon-slides.png");
cursor: pointer;
}
.prev{
position: absolute;
z-index: 1;
left: 234px;
background-position: -83px;
}
.next{
position: absolute;
z-index: 1;
right: 0;
background-position: -124px;
}
.prev:hover{
background-position: 0;
}
.next:hover{
background-position: -42px;
}
.swiper-pagination{
position: absolute;
z-index: 10;
cursor: pointer;
}
/* 分页器 */
.wrap .swiper-pagination{
right: 30px;
left: auto;
width: 400px;
bottom: 20px;
text-align: right;
}
.swiper-pagination>span{
width: 6px;
height: 6px;
border: 2px solid #fff;
border-color: hsla(0,0%,100%,.3);
border-radius: 10px;
overflow: hidden;
background: rgba(0,0,0,.4);
/* opacity: 1; */
}
.swiper-pagination>span:hover{
background: hsla(0,0%,100%,.4);
border-color: rgba(0,0,0,.4);
}
/* 轮播图动画 */
/* @keyframes banner {
0%{
background-image: url(../images/02248aa55d5bef10c9013297074d7795.jpg);
}
25%{
background-image: url(../images/02248aa55d5bef10c9013297074d7795.jpg);
}
50%{
background-image: url(../images/4a7872075a72ffc83108c2efcbfc92e5.jpg);
}
75%{
background-image: url(../images/06c044611f215ddef570d3a6a9a60725.jpg);
}
100%{
background-image: url(../images/02248aa55d5bef10c9013297074d7795.jpg);
}
} */
/* 滑动门 */
.banner>.wrap{
position: relative;
}
.slide{
z-index: 700;
position: absolute;
left: 0;
top: 0;
width: 234px;
height: 420px;
padding: 20px 0;
background-color: rgba(105,101,101,.6);
}
.slide>ul>li{
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide>ul>li>a{
color: #fff;
font-size: 14px;
}
.slide i{
float: right;
margin-right: 20px;
font-size: 20px;
line-height: 40px;
font-weight: bold;
}
.slide-list{
z-index: 700;
display: none;
position: absolute;
top: 0;
left: 234px;
width: 992px;
/* width: 0; */
height: 456px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-left: none;
padding-top: 2px;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
/* overflow: hidden;
transition:all .3s; */
}
.slide li:hover>.slide-list{
display: block;
/* width: 992px; */
}
.slide-list>ul{
width: 248px;
float: left;
}
.slide-list li{
width: 100%;
height: 76px;
padding: 18px 0 18px 20px;
box-sizing: border-box;
}
.slide-list img{
margin-right: 12px;
}
.slide-list span{
line-height: 40px;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.slide-list li:hover span{
color: #ff6700;
}
.slide-list1{
width: 744px;
}
/* 左右箭头 */
/* banner样式结束 */
/* 广告样式开始 */
.adv{
width: 100%;
height: 170px;
margin: 14px 0 26px;
}
.adv-aside{
width: 234px;
height: 170px;
padding: 3px;
box-sizing: border-box;
background-color: #5f5750;
float: left;
}
.adv-img{
width: 316px;
height: 170px;
float: left;
margin-left: 14.6px;
transition: all .2s linear;
}
.adv-img img{
width: 100%;
}
.adv-img:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.adv-aside li{
position: relative;
float: left;
width: 76px;
height: 82px;
padding: 19px 0;
box-sizing: border-box;
}
.adv-aside i{
display: block;
font-size: 22px;
margin-bottom: 4px;
}
.adv-aside a{
display: block;
color: #fff;
font-size: 12px;
opacity: .7;
transition: all .2s;
}
.adv-aside a:hover{
opacity: 1;
}
/* 边框的线 */
.row::after,.col::before{
position: absolute;
content:"";
background-color: #665e57;
}
.row::after{
bottom: 0;
left: 6px;
height: 1px;
width: 64px;
}
.col::before{
top: 6px;
right: 0;
width: 1px;
height: 70px;
}
/*广告样式结束*/
/*主体样式开始*/
.container{
width: 100%;
background-color: #f5f5f5;
padding: 4px 0 12px;
overflow: hidden;
}
/*主体样式结束*/
/*手机样式开始*/
.home-banner-box{
width: 100%;
height: 120px;
margin: 22px 0;
}
.title{
color: #333;
font-size: 22px;
font-weight: 200;
text-align: left;
line-height: 58px;
}
.more{
float: right;
color: #424242;
font-size: 16px;
}
.more:hover{
color: #ff6700;
}
.more>i{
display: inline-block;
width: 12px;
height: 12px;
padding: 4px;
background-color: #b0b0b0;
border-radius: 50%;
line-height: 12px;
color: #fff;
margin-left: 8px;
transition: all .4s;
}
.more:hover>i{
background-color: #ff6700;
}
.home-box{
width: 100%;
height: 614px;
}
.home-box-left{
width: 234px;
height: 614px;
float: left;
transition: all .2s linear;
}
.home-box-right{
width: 992px;
height: 614px;
float: left;
}
.items{
width: 234px;
height: 300px;
background-color: #fff;
float: left;
margin-bottom: 14px;
margin-left: 14px;
transition: all .2s linear;
}
.items:hover,.home-box-left1:hover,.last-items>div:hover,.video-items:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
transform: translateY(-2px);
}
.img1{
width: 160px;
margin-top: 20px;
margin-bottom: 18px;
}
.name2,.desc2{
width: 214px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.name2{
height: 21px;
line-height: 21px;
font-size: 14px;
margin-bottom: 2px;
}
.desc2{
height: 18px;
line-height: 18px;
margin-bottom: 10px;
font-size: 12px;
color: #b0b0b0;
}
.price2{
color: #ff6700;
font-size: 14px;
}
.price2>del{
color: #b0b0b0;
margin-left: 7px;
}
/*手机样式结束*/
/* 右侧侧边栏 */
.right-nav{
position: fixed;
bottom: 70px;
right: 0px;
z-index: 99;
}
.right-nav a{
position: relative;
display: block;
width: 82px;
height: 90px;
margin-top: -1px;
background-color: #fff;
border: 1px solid #f5f5f5;
text-align: center;
color: rgb(154,154,154);
}
.right-nav a:hover{
color: #ff6700;
}
.right-nav>a>div.icon{
position: relative;
width: 30px;
height: 30px;
margin: 0 auto 8px;
padding-top: 18px;
text-align: center;
}
.right-nav>a>div>i{
position: absolute;
bottom: 0;
left: 0px;
font-size: 35px;
}
span.text{
font-size: 14px;
}
div.nav-content{
position: absolute;
right: 90px;
top: 0;
padding: 14px;
background-color: #fff;
opacity: 0;
transition: all 0.3s;
}
.nav-content img{
width: 100px;
height: 100px;
margin: 6px auto;
}
.nav-content span{
display: block;
color: #757575;
text-align: center;
width: 82px;
height: 42px;
margin: 14px auto 0px;
}
.right-nav :hover .nav-content,.right-nav :hover .triangle2{
transition: translate3d(-110%,0,0);
opacity: 1;
}
.triangle2{
/* display: none; */
z-index: 99;
position: absolute;
bottom: 50%;
left: 0;
margin-left: -8px;
width: 0;
height: 0;
/* background-color: #424242; */
border-left: 8px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
opacity: 0;
transition: all 0.3s;
}
/* 右侧侧边栏结束 */
/* 去顶部 */
.item.backtop.active{
display: none;
}
.item.backtop{
margin-top: 14px;
border-top: 1px solid #f5f5f5;
}
/* CSS样式结束 */
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)