![]()
练习css，模仿了部分js的效果，所以有点长，css代码块在后面，
大神勿喷！
练习写的，就页脚部分有点赶时间，是个缺陷，后面有时间改一下
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>小米商城</title> <link rel="stylesheet" href="css/xiaomi.css"> </head> <body> <!--头部导航栏--> <div class="header"> <div class="wrap"> <ul class="header-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"> <a href="#"> <img src="img/download.png" alt=""> <p>小米商城app</p> </a> </div> <div class="triangle"></div> </li> <li><a href="#">智能生活</a><span>|</span></li> <li><a href="#">Select Location</a></li> </ul> <ul class="header-right"> <li><a href="#">登录</a><span>|</span></li> <li><a href="#">注册</a><span>|</span></li> <li><a href="#">消息通知</a></li> <li class="cart"> <a href="#">购物车</a> <div class="cart-list"> 哦！购物车是空的！ </div> </li> </ul> </div> </div> <!--头部导航栏结束--> <!--导航开始--> <div class="nav"> <div class="wrap"> <div class="logo"> <a href="#"> <img src="img/logo-mi2.png" alt=""> </a> </div> <div class="nav-bar"> <ul> <li><a href="#">小米手机</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米12</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米13</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米14</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米15</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>小米16</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">Red米</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">电视</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/3d47879ec183e25a36e67e0219636e60.jpg" alt="" width="60%" height="60%"> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">笔记本</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">平板</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">家电</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">路由器</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> </ul> </div> </div> </li> <li><a href="#">智能硬件</a> <div class="nav-bar-list"> <div class="wrap"> <ul> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt=""> </div> <p>红米耳机</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米9</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>红米10</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </a> </li> <li> <a href="#"> <div class="nav-img-box"> <img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt=""> </div> <p>小米11</p> <p>2599元</p> </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="xiaomi11"> <button type="button">搜索</button> <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 class="banner-box-img"> <img src="img/2fd26bb99b723337a2f8eaba84f7d5bb.jpg" alt=""> </div> <div class="slide"> <ul> <li> <a href="#">手机</a><span><strong>></strong></span> <div class="slide-list"> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">电视</a><span><strong>></strong></span> <div class="slide-list"> <ul> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">笔记本 平板</a><span><strong>></strong></span> <div class="slide-list"> <ul> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list3.png" alt=""> <span>小米笔记本</span> </a> </li> <li> <a href="#"> <img src="img/list3.png" alt=""> <span>小米笔记本</span> </a> </li> <li> <a href="#"> <img src="img/list3.png" alt=""> <span>笔记本</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">家电</a><span><strong>></strong></span> <div class="slide-list"> <ul> <li> <a href="#"> <img src="img/list4.jpg" alt=""> <span>冰箱</span> </a> </li> <li> <a href="#"> <img src="img/list4.jpg" alt=""> <span>大冰箱</span> </a> </li> <li> <a href="#"> <img src="img/list4.jpg" alt=""> <span>小冰箱</span> </a> </li> <li> <a href="#"> <img src="img/list4.jpg" alt=""> <span>老冰箱</span> </a> </li> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list4.jpg" alt=""> <span>还是冰箱</span> </a> </li> </ul> </div> </li> <li> <a href="#">出行 穿戴</a><span><strong>></strong></span> <div class="slide-list slide-list1"> <ul> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>手表</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>智能手表</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>防水手表</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">智能 路由器</a><span><strong>></strong></span> <div class="slide-list slide-list1"> <ul> <li> <a href="#"> <img src="img/list2.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>无人机</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>机器狗</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>防水手表</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>machineDog</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">电源 配件</a><span><strong>></strong></span> <div class="slide-list slide-list2"> <ul> <li> <a href="#"> <img src="img/list7.png" alt=""> <span>飞毛腿</span> </a> </li> <li> <a href="#"> <img src="img/list7.png" alt=""> <span>移动电源</span> </a> </li> <li> <a href="#"> <img src="img/list7.png" alt=""> <span>充电宝</span> </a> </li> <li> <a href="#"> <img src="img/list7.png" alt=""> <span>20000ml</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>machineDog</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">健康 儿童</a><span><strong>></strong></span> <div class="slide-list slide-list1"> <ul> <li> <a href="#"> <img src="img/list8.png" alt=""> <span>跑步机</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>无人机</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>机器狗</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>防水手表</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list8.png" alt=""> <span>减肥机</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>machineDog</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list8.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> </div> </li> <li> <a href="#">耳机 音响</a><span><strong>></strong></span> <div class="slide-list slide-list1"> <ul> <li> <a href="#"> <img src="img/list9.png" alt=""> <span>redmi耳机</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>无人机</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>机器狗</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>防水手表</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list9.png" alt=""> <span>运动耳机</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>machineDog</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list8.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list9.png" alt=""> <span>挂脖耳机</span> </a> </li> </ul> </div> </li> <li> <a href="#">生活 箱包</a><span><strong>></strong></span> <div class="slide-list slide-list1"> <ul> <li> <a href="#"> <img src="img/list10.jpg" alt=""> <span>单肩包</span> </a> </li> <li> <a href="#"> <img src="img/list10.jpg" alt=""> <span>单肩包2</span> </a> </li> <li> <a href="#"> <img src="img/list10.jpg" alt=""> <span>背包</span> </a> </li> <li> <a href="#"> <img src="img/list5.png" alt=""> <span>防水手表</span> </a> </li> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>表</span> </a> </li> <li> <a href="#"> <img src="img/list9.png" alt=""> <span>运动耳机</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list6.png" alt=""> <span>machineDog</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> </ul> <ul> <li> <a href="#"> <img src="img/list1.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list8.png" alt=""> <span>米11 青春活力版</span> </a> </li> <li> <a href="#"> <img src="img/list10.jpg" alt=""> <span>小学生书包</span> </a> </li> </ul> </div> </li> </ul> </div> </div> </div> </div> <!--banner结束--> <!--广告部分开始--> <div class="adv"> <div class="wrap"> <div class="adv-aside"> <ul> <li class="row col"><a href="#"><p>保障服务</p></a></li> <li class="row col"><a href="#"><p>企业团购</p></a></li> <li class="row"><a href="#"><p>F码通道</p></a></li> <li class="col"><a href="#"><p>米粉卡</p></a></li> <li class="col"><a href="#"><p>以旧换新</p></a></li> <li><a href="#"><p>话费充值</p></a></li> </ul> </div> <div class="adv-img"><a href="#"><img src="img/adv1.jpg" alt=""></a></div> <div class="adv-img"><a href="#"><img src="img/adv2.jpg" alt=""></a></div> <div class="adv-img"><a href="#"><img src="img/adv3.jpeg" alt=""></a></div> </div> </div> <!--广告部分结束--> <!--主体开始--> <div class="container"> <div class="wrap"> <!--手机部分--> <div class="phone"> <div class="home-banner-box"> <a href="#"> <img src="img/zt1.jpg" alt=""> </a> </div> <h2 class="title">手机 <a href="#" class="more">查看更多<i>></i></a> </h2> <div class="phone-box clear"> <div class="phone-box-left"> <a href="#"><img src="img/sj1.jpg" alt=""></a> </div> <div class="phone-box-right"> <ul> <li class="items"> <a href="#"><img src="img/sj2.jpg" alt="" class="goods-img"> <p class="goods-name">xiaomi 11 青春活力版</p> <p class="goods-desc">轻薄5G，内外皆出彩</p> <p class="goods-price">1999元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj3.jpg" alt="" class="goods-img"> <p class="goods-name">Redmi Note 11Pro系列</p> <p class="goods-desc">Redmi Note 11Pro系列</p> <p class="goods-price">1799元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj4.jpg" alt="" class="goods-img"> <p class="goods-name">RedMi note 11 5G</p> <p class="goods-desc">5000mAh大电量</p> <p class="goods-price">1199元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj5.jpg" alt="" class="goods-img"> <p class="goods-name">RedMi note 11 5G</p> <p class="goods-desc">5000mAh大电量</p> <p class="goods-price">999元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj6.jpg" alt="" class="goods-img"> <p class="goods-name">黑鲨4S Pro</p> <p class="goods-desc">磁动力升降肩键</p> <p class="goods-price">4799元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj7.jpg" alt="" class="goods-img"> <p class="goods-name">黑鲨4S</p> <p class="goods-desc">磁动力升降肩键</p> <p class="goods-price">2699元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj8.jpg" alt="" class="goods-img"> <p class="goods-name">xiaomi Civi</p> <p class="goods-desc">3200万高清质感自拍</p> <p class="goods-price">2599元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/sj9.jpg" alt="" class="goods-img"> <p class="goods-name">xiaomi MIX 4</p> <p class="goods-desc">CUP全面屏</p> <p class="goods-price">4199元起 <s class="goods-price-old">4999元</s></p> </a> </li> </ul> </div> </div> </div> <!--手机部分结束--> <!--家电部分开始--> <div class="elc"> <h2 class="title">家电</h2> </div> <div class="ele-box clear"> <div class="ele-left"> <ul> <li class="items"><a href="#"><img src="img/jd1.jpg" alt=""></a></li> <li class="items"><a href="#"><img src="img/jd2.jpg" alt=""></a></li> </ul> </div> <div class="ele-right"> <ul> <li class="items"> <a href="#"><img src="img/jd3.jpg" alt="" class="goods-img"> <p class="goods-name">小米电视6 65” OLED</p> <p class="goods-desc">小米电视6 65” OLED</p> <p class="goods-price">6999元</p> </a> </li> <li class="items"> <a href="#"><img src="img/jd4.jpg" alt="" class="goods-img"> <p class="goods-name">小米电视6 至尊版 65英寸</p> <p class="goods-desc">画质新境界</p> <p class="goods-price">7499元 <s class="goods-price-old">7999元</s></p> </a> </li> <li class="items"> <a href="#"><img src="img/jd5.jpg" alt="" class="goods-img"> <p class="goods-name">小米电视 ES55 2022款</p> <p class="goods-desc">多分区，画质轻旗舰</p> <p class="goods-price">2999元</p> </a> </li> <li class="items"> <a href="#"><img src="img/jd6.jpg" alt="" class="goods-img"> <p class="goods-name">米家互联网对开门冰箱 540L</p> <p class="goods-desc">新品</p> <p class="goods-price">2899元 <s class="goods-price-old">3699元</s></p> </a> </li> <li class="items"> <a href="#"><img src="img/jd7.jpg" alt="" class="goods-img"> <p class="goods-name">米家超薄电磁炉</p> <p class="goods-desc">纤薄美学，精准猛火</p> <p class="goods-price">499元</p> </a> </li> <li class="items"> <a href="#"><img src="img/jd8.jpg" alt="" class="goods-img"> <p class="goods-name">米家集成扫拖机器人</p> <p class="goods-desc">自动倒垃圾</p> <p class="goods-price">2999元</p> </a> </li> <li class="items"> <a href="#"><img src="img/jd9.jpg" alt="" class="goods-img"> <p class="goods-name">redmi全自动波轮洗衣机</p> <p class="goods-desc">一键操作</p> <p class="goods-price">799元 <s class="goods-price-old">899元</s></p> </a> </li> <li class="items1"> <div class="items"> <a href="#"> <p class="items1-desc"> <span>米家电烤箱</span> <br> <span>299元</span> </p> <img src="img/jd10.jpg" alt="" class="items1-img"> </a> </div> <div class="items"> <a href="#"> <p class="items1-desc"> <span>浏览更多</span> <br> <span class="items1-more">热门</span> </p> <img src="img/more1.png" alt="" class="items1-img2"> </a> </div> </li> </ul> </div> </div> <!--家电部分结束--> <!--穿戴部分--> <div class="phone"> <h2 class="title">智能穿戴 <a href="#" class="more">查看更多<i>></i></a> </h2> <div class="phone-box clear"> <div class="phone-box-left"> <a href="#"><img src="img/cd1.jpg" alt=""></a> </div> <div class="phone-box-right"> <ul> <li class="items"> <a href="#"><img src="img/cd2.jpg" alt="" class="goods-img"> <p class="goods-name">Redmi 手表 2</p> <p class="goods-desc">AMOLED高清大屏</p> <p class="goods-price">399元起</p> </a> </li> <li class="items"> <a href="#"><img src="img/cd3.jpg" alt="" class="goods-img"> <p class="goods-name">Redmi手表</p> <p class="goods-desc">35g大屏/多功能nfc/7天长续航</p> <p class="goods-price">269元 <s class="goods-price-old">299元</s></p> </a> </li> <li class="items"> <a href="#"><img src="img/cd4f.jpg" alt="" class="goods-img"> <p class="goods-name">Xiaomi真无线降噪耳机 3 Pro</p> <p class="goods-desc">动态降噪</p> <p class="goods-price">699</p> </a> </li> <li class="items"> <a href="#"><img src="img/cd5.jpg" alt="" class="goods-img"> <p class="goods-name">RedMi 半入耳式无线蓝牙耳机666666666666</p> <p class="goods-desc">轻巧入耳</p> <p class="goods-price">199</p> </a> </li> <li class="items"> <a href="#"><img src="img/cd8.jpg" alt="" class="goods-img"> <p class="goods-name">耳机</p> <p class="goods-desc">磁动力升降肩键</p> <p class="goods-price">299</p> </a> </li> <li class="items"> <a href="#"><img src="img/cd6.jpg" alt="" class="goods-img"> <p class="goods-name">Redmi buds 3青春版</p> <p class="goods-desc">轻巧无线 持久动听</p> <p class="goods-price">99</p> </a> </li> <li class="items"> <a href="#"><img src="img/cd78.jpg" alt="" class="goods-img"> <p class="goods-name">Redmi AirDots3 Pro</p> <p class="goods-desc">智能降噪</p> <p class="goods-price">259</p> </a> </li> <li class="items1"> <div class="items"> <a href="#"> <p class="items1-desc"> <span>浏览更多</span> <br> <span class="items1-more">热门</span> </p> <img src="img/more1.png" alt="" class="items1-img2"> </a> </div> </li> </ul> </div> </div> </div> <!--穿戴部分结束--> <!--视频部分--> <div class="video clear"> <h2 class="title">视频 <a href="#" class="more">查看全部<i>></i></a> </h2> <div class="video-box"> <ul> <li> <a href="#"> <div class="video-img"> <img src="img/sp1.jpg" alt=""> <div class="play"> <div class="fang"></div> </div> </div> <div class="video-box-name"> <p class="video-box-name1">2021年春季新品发布会</p> <p class="video-box-name2"></p> </div> </a> </li> <li> <a href="#"> <div class="video-img"> <img src="img/sp2.jpg" alt=""> <div class="play"> <div class="fang"></div> </div> </div> <div class="video-box-name"> <p class="video-box-name1">Redmi 10X系列发布会</p> <p class="video-box-name2">Redmi 10X系列发布会</p> </div> </a> </li> <li> <a href="#"> <div class="video-img"> <img src="img/sp3.jpg" alt=""> <div class="play"> <div class="fang"></div> </div> </div> <div class="video-box-name"> <p class="video-box-name1">小米10青春版发布会</p> <p class="video-box-name2"></p> </div> </a> </li> <li> <a href="#"> <div class="video-img"> <img src="img/sp4.jpg" alt=""> <div class="play"> <div class="fang"></div> </div> </div> <div class="video-box-name"> <p class="video-box-name1">小米10 8K手机拍大片</p> <p class="video-box-name2"></p> </div> </a> </li> </ul> </div> </div> <!--视频部分结束--> </div> </div> <!--主体结束--> <!--页脚开始--> <div class="footer"> <div class="wrap"> <div class="footer-server"> <ul> <li><a href="#">预约维修服务</a></li> <li><a href="#">7天无理由退货</a></li> <li><a href="#">15天免费换货</a></li> <li><a href="#">包邮</a></li> <li><a href="#">520余家售后网点</a></li> </ul> </div> <div class="footer-list"> <ul> <li class="footer-list-span">帮助中心</li> <li><a href="#">账户管理</a></li> <li><a href="#">购物指南</a></li> <li><a href="#">订单操作</a></li> </ul> <ul> <li class="footer-list-span">服务支持</li> <li><a href="#">售后政策</a></li> <li><a href="#">自助服务</a></li> <li><a href="#">相关下载</a></li> </ul> <ul> <li class="footer-list-span">线下门店</li> <li><a href="#">服务网点</a></li> <li><a href="#">小米之家</a></li> <li><a href="#">授权体验店/专区</a></li> </ul> <ul> <li class="footer-list-span">关于小米</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> <ul> <li class="footer-list-span">关注我们</li> <li><a href="#">新浪微博</a></li> <li><a href="#">官方微信</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">公益基金会</a></li> </ul> <ul> <li class="footer-list-span">特色服务</li> <li><a href="#">F码通道</a></li> <li><a href="#">礼物码</a></li> <li><a href="#">防伪查询</a></li> </ul> <div class="footer-right"> <p class="tel">400-100-5678</p> <p class="time">8:00-18:00(仅收市话费)</p> <a href="#" class="kf">人工客服</a> <p class="follow"> 关注小米： <a href="#" class="wb"></a> <span class="wx"></span> <img src="img/wx-img.png" alt="" class="wx-img"> </p> </div> </div> </div> <div class="footer-info"> <div class="wrap"> <div class="end-top"> <img src="img/logo-mi2.png" alt=""> <div class="info-right"> <ul class="end-top-p1"> <li><a href="#">小米商城</a><span>|</span></li> <li><a href="#">MIUI</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="#">小米公司儿童信息保护规则</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="#">Select Location</a></li> </ul> <ul class="end-top-p1"> <li><a href="#">北京互联网法院法律服务工作站</a><span>|</span></li> <li><a href="#">中国消费者协会</a><span>|</span></li> <li><a href="#" id="01">北京消费者协会</a></li> </ul> <ul class="end-top-p1 second"> <li><span>©</span><a href="#">mi.com</a></li> <li><a href="">京ICP备10046444号</a></li> <li><a href="">京公网安备11010802020134号</a></li> <li><a href="">京网文[2020]0276-042号</a></li> <br> <li><a href="#">（京）网械平台备字（2018）第00005号</a></li> <li><a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a></li> <li><a href="#">营业执照</a></li> <li><a href="#">医疗器械质量公告</a></li> <br> </ul> <div class="end-top-box"> <a href="#"><img src="img/end1.png" alt=""></a> </div> <div class="end-top-box2"> <a href="#"><img src="img/end2.png" alt=""></a> </div> <div class="end-top-box3"> <a href="#"><img src="img/end3.png" alt=""></a> </div> </div> </div> <div class="end-bottom"> <img src="img/slogan2020.png" alt=""> </div> </div> </div> </div> <!--页脚jieshu--> </body> </html>
css部分
/*布局清零*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,textarea,button,p,blockquote,th,td{margin: 0;padding: 0;}
body{text-align: center; height: 100%}
li{list-style-type: none;}
a{text-decoration: none;color: #333333}
img,input,button{border: none;vertical-align: middle;}
/*头部导航栏样式*/
.header{
z-index:200;
position: relative;
line-height: 40px ;
width: 100%;
height: 40px;
background: #333;
font-size: 12px;
}
.wrap{
width: 1226px;
margin: 0 auto;
color: #b0b0b0;
}
.header-left{
float: left;
}
.header-right{
float: right;
}
.header li{
position: relative;
float: left;
}
.header a{
color: #b0b0b0;
}
.header a:hover{
color: #ffffff;
}
.cart:hover{
background-color: #fff;
}
.cart:hover>a{
color: #ff6700;
}
.header span{
color: #424242;
margin: 0 6px;
}
.cart{
position: relative;
width:120px ;
height: 40px;
background-color: #424242;
margin-left: 25px;
cursor: pointer;
}
/*
购物车，下载app下拉思路：
1.绝对定位到相应位置；
2.未触发时隐藏
3.鼠标悬停显示；
*/
.cart-list{
/*display: none;*/
line-height: 100px;
position: absolute;
top: 40px;
right: 0px;
width: 316px;
height: 0px;
overflow: hidden;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
transition: all .3s;
color: #ff6700;
}
.cart:hover>.cart-list{
height: 100px;
}
.download{
width: 124px;
height: 0px;
position: absolute;
top: 40px;
left: 50%;
margin-left:-62px ;
overflow: hidden;
background-color: #fff;
box-shadow: 0 1px 5px #aaaaaa;
transition: all .3s;
}
.download img{
width: 90px;
margin: 18px 0 12px;
}
.download>a{
display: block;
}
.download p{
color: #333333;
font-size: 14px;
line-height: 14px;
}
.header-left>li:hover>.download{
height: 148px;
}
/*绘制三角形*/
.triangle{
display: none;
position: absolute;
bottom: 0;
left: 40%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: white 8px solid;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
}
.header-left>li:hover>.triangle{
display: block;
}
/*头部导航栏结束*/
/*导航栏开始*/
.nav{
z-index: 100;
position: relative;
width: 100%;
height: 100px;
background-color:#ffffff;
}
.logo {
margin-top: 22px;
float: left;
width: 56px;
height: 56px;
}
.nav-bar{
float: left;
width: 874px;
height: 100px;
line-height: 100px;
padding-left: 172px;
box-sizing: border-box;
}
.nav-bar>ul>li>a{
color: #333333;
}
.search{
position: relative;
margin-top: 25px;
float: right;
width:296px;
height: 50px;
background-color: lavender;
}
.logo img{
width:100%;
}
.nav-bar>ul>li{
float: left;
padding: 0 10px;
}
.nav-bar>ul>li>a:hover{
color: #ff6700;
}
.nav-bar-list{
display: none;
position: absolute;
left: 0;
top:100px;
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
.nav-bar-list li{
width: 204px;
height: 200px;
padding-top: 22px;
float: left;
}
.nav-img-box{
width: 100%;
border-right: 2px solid #e0e0e0;
box-sizing: border-box;
}
.nav-img-box img{
width: 70%;
height: 70%;
}
.nav-bar-list p{
font-size: 12px;
line-height: 20px;
}
.nav-bar-list p:nth-of-type(2){
color: #ff6700;
}
.nav-bar-list li:last-child .nav-img-box{
border-right: none;
}
.search>input{
float: left;
width: 223px;
height: 48px;
padding: 0 10px;
border: 1px solid #e0e0e0;
/*去掉input点击时的外边框*/
outline: none;
border-right: none;
transition: all .2s;
}
.search>button{
border:1px solid #e0e0e0;
float: left;
width: 52px;
height: 49px;
transition: all .2s;
font-size: 16px;
background-color: #fff;
}
.search>button:hover{
background-color:#ff6700;
border-color: #ff6700;
color: white;
}
.search>input:hover,.search>input:hover+button{
border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+button{
border-color: #ff6700;
}
.search-list{
background-color: #fff;
display: none;
position: absolute;
left:0px;
top:49px;
width: 243px;
height: 240px;
border: 1px solid #ff6700;
border-top: none;
}
.search>input:focus~.search-list{
display: block;
}
.search-list>a{
color: #b0b0b0;
width: 100%;
height: 30px;
padding: 6px 15px;
box-sizing: border-box;
display: block;
text-align: left;
}
.search-list>a:hover{
background-color: #fafafa;
color: #333333;
}
/*导航栏结束*/
/*banner样式开始*/
.banner,.banner-box{
width: 100%;
height: 460px;
}
.banner-box-img{
float: right;
width: 992px;
height: 460px;
}
.banner-box-img>img{
width: 992px;
height: 460px;
}
.slide{
position: absolute;
left: 0px;
top: 0;
float: left;
height: 420px;
width: 234px;
background-color: rgba(105,101,101,.6);
padding: 20px 0;
}
.banner-box{
clear: both;
position: relative;
}
.slide>ul>li>a{
color: white;
font-size: 14px;
}
.slide>ul>li{
height: 42px;
line-height: 42px;
color: #ffffff;
text-align: left;
padding-left: 30px;
}
.slide span{
float: right;
padding-right: 20px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
.slide-list{
display: none;
position: absolute;
left:234px;
top:0;
width: 992px;
height: 456px;
border: 1px solid #e0e0e0;
border-left: none;
padding-top: 2px;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,.18);
}
.slide>ul>li:hover>.slide-list{
display: block;
}
.slide-list>ul{
width: 248px;
float: left;
}
.slide-list>ul>li{
width: 100%;
height: 76px;
padding: 20px 0 20px 18px;
box-sizing: border-box;
}
.slide-list>img{
margin-right: 12px;
}
.slide-list>span{
font-size: 14px;
}
.slide-list li:hover span{
color: #ff6700;
}
.slide-list1{
width: 744px;
}
.slide-list2{
width: 496px;
}
/*banner样式结束*/
/*广告开始*/
.adv{
width: 100%;
height: 170px;
margin: 14px 0 26px;
}
.adv-aside{
float: left;
width: 228px;
height: 164px;
padding: 3px;
background-color: #5f5750;
}
.adv-img{
margin-left: 14.666px;
float: left;
width: 316px;
height: 170px;
background-color: lightgoldenrodyellow;
transition: all .2s linear;
}
.adv-img:hover{
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.adv-img img{
width: 100%;
}
.adv-aside li{
position: relative;
width: 76px;
height: 82px;
line-height: 82px;
float: left;
}
.adv-aside a{
display: block;
color: #ffffff;
font-size: 12px;
opacity: .7;
transition: all .3s;
}
.adv-aside a:hover{
opacity: 1;
}
.row:after{
position: absolute;
left: 6px;
bottom: 0;
width: 64px;
height: 1px;
content: "";
background-color: #665e57;
/*opacity: .2;*/
}
.col:before{
position: absolute;
top: 6px;
left: 76px;
content: "";
width:1px;
height: 70px;
background-color: #665e57;
/*opacity: .2;*/
}
/*广告结束*/
/*主体样式开始*/
.container{
overflow: hidden;
width: 100%;
background-color: #f5f5f5;
padding: 4px 0 12px;
height: 100%;
}
.home-banner-box{
width: 100%;
height: 120px;
margin: 22px 0;
}
.home-banner-box>a>img{
width: 100%;
}
.title{
color: #333333;
font-weight: 200;
font-size: 22px;
text-align: left;
line-height: 58px;
}
.more{
color: #424242;
font-size: 16px;
font-weight: 200;
float: right;
transition: all .3s;
}
.more:hover{
color: #ff6700;
}
.more:hover>i{
background-color: #ff6700;
}
.more>i{
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: #b0b0b0;
line-height: 22px;
text-align: center;
color: #ffffff;
font-size: 18px;
transition: all .3s;
}
.phone-box{
width: 100%;
height: 614px;
}
.phone-box-left{
float: left;
width: 234px;
height: 614px;
transition: all .2s;
}
.phone-box-right{
float: left;
height: 614px;
width: 992px;
}
.items{
background-color: #fff;
height: 300px;
width: 234px;
float: left;
margin-bottom: 14px;
margin-left: 14px;
transition: all .1s linear;
}
.items:hover,.phone-box-left:hover{
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0,0,0,.5);
}
.phone-box-left img{
width: 100%;
height: 100%;
}
.goods-img{
width: 160px;
margin-top: 20px;
margin-bottom: 18px;
}
.goods-name,.goods-desc{
width: 214px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.goods-name{
height: 21px;
font-size: 14px;
margin-bottom: 2px;
}
.goods-desc{
height: 18px;
font-size: 12px;
margin-bottom: 10px;
color: #b0b0b0;
}
.goods-price{
font-size: 14px;
color: #ff6700;
}
.goods-price-old{
color: #b0b0b0;
margin-left: 7px;
}
/*家电部分*/
.ele-left{
width: 234px;
height: 614px;
float: left;
}
.ele-left>ul>li{
margin-left: 0;
}
.ele-left img{
width: 100%;
}
.ele-right{
float: left;
height: 614px;
width: 992px;
}
.items1{
width: 234px;
height: 300px;
float: left;
margin-left: 14px;
}
.items1 div{
width: 234px;
height: 143px;
margin-bottom: 14px;
background-color: #fff;
margin-left: 0;
}
.items1-desc{
width: 94px;
height: 63px;
float: left;
display: block;
margin-left: 30px;
margin-top: 40px;
font-size: 14px;
text-align: left;
}
.items1-img{
float: right;
width: 80px;
margin-top: 32px;
margin-right: 20px;
}
.items1-desc span:nth-of-type(2){
color: #ff6700;
}
.items1-more{
font-size: 12px;
font-weight: 100;
}
.items1-img2{
width: 50px;
margin-top: 32px;
margin-right: 20px;
}
/*家电部分结束*/
/*视频部分开始*/
.video-box li{
position: relative;
width: 296px;
height: 285px;
background-color: #ffffff;
float: left;
margin-left: 14px;
margin-bottom: 14px;
transition: all .1s linear;
}
.video-box li:hover{
box-shadow:0 15px 30px rgba(0,0,0,.5);
transform: translateY(-3px);
}
.video-box li:first-child{
margin-left: 0;
}
.video-img img{
width: 296px;
height: 180px;
}
.video-box-name{
position: absolute;
top: 180px;
left: 0;
width: 296px;
height:105px;
}
.video-box-name1,.video-box-name2{
width: 296px;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.video-box-name1{
height: 21px;
margin-top: 25px;
font-size: 14px;
}
.video-box-name2{
height: 18px;
margin-top: 10px;
font-size: 12px;
color: #b0b0b0;
}
.video-img{
position: relative;
}
.play{
position: absolute;
bottom: 10px;
left: 20px;
width: 36px;
height: 24px;
border: 2px solid #ffffff;
border-radius: 12px;
box-sizing: border-box;
transition: all .2s;
}
.fang{
margin: 4px auto ;
width: 0;
height: 0;
border-left: 10px solid #ffffff;
border-bottom: 7px solid transparent;
border-top: 7px solid transparent;
}
.play:hover{
background-color: #ff6700;
border-color: #ff6700;
}
/*清除浮动*/
.clear::after{
content: "";
display: block;
clear: both;
}
/*视频部分结束*/
/*主体样式结束*/
.footer{
width: 100%;
background-color: #fff;
}
.footer-server{
width: 100%;
height: 25px;
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}
.footer-server li{
float: left;
width: 19.8%;
height: 25px;
line-height: 25px;
text-align: center;
border-right: 1px solid #e0e0e0;
}
.footer-server li:last-child{
border-right: none;
}
.footer-server a{
color: #616161;
transition: all .2s;
}
.footer-server a:hover{
color: #ff6700;
}.footer-list{
width: 100%;
height: 172.5px;
padding: 40px 0 55px;
}
.footer-list>ul{
width: 160px;
text-align: left;
float: left;
}
.footer-list li a{
color: #757575;
font-size: 12px;
width: 48px;
transition: all .2s linear;
}
.footer-list li a:hover{
color: #ff6700;
}
.footer-list li{
margin-top: 10px;
}
.footer-list-span{
margin: -1px 0 26px;
font-size: 14px;
line-height: 1.25;
color: #424242;
width: 160px;
}
.footer-right{
float: right;
width: 251px;
height: 111px;
border-left: 1px solid #e0e0e0;
}
.tel{
position: relative;
top: 10px;
line-height: 1px;
color: #ff6700;
font-size: 22px;
margin-bottom: 5px;
}
.time{
position: relative;
top: 23px;
font-size: 12px;
color: #616161;
margin-bottom: 5px;
}
.kf{
display: block;
margin: 0 auto;
width: 118px;
height: 28px;
border: 1px solid #f25807;
color: #ff6700;
font-size: 12px;
line-height: 28px;
transition: all .4s;
position: relative;
top: 27px;
}
.kf:hover{
background-color: #f25807;
color: #ffffff;
}
.follow{
position: relative;
top:15px;
color: #616161;
font-size: 12px;
margin-top: 10px;
}
.wx,.wb{
position:relative ;
top: 8px;
display: inline-block;
width: 24px;
height: 24px;
margin-left: 6px;
background-size: 100%;
cursor: pointer;
}
.wb{
background-image: url("../img/wb.png");
}
.wx{
background-image: url("../img/wx.png");
}
.wb:hover{
background-image:url("../img/wb@2x (1).png");
}
.wx:hover{
background-image: url("../img/wx@2x.png");
}
.wx-img{
display: none;
position: absolute;
top:30px;
left: 100px;
width: 126px;
}
.wx:hover+.wx-img{
display: block;
}
/*结尾*/
.footer-info{
height: 206px;
background-color: #f5f5f5;
padding: 40px 0;
}
.end-top{
position: relative;
height: 130px;
width: 100%;
}
.end-bottom{
height: 19px;
width: 100%;
margin-top: 30px;
}
.end-top img{
position: absolute;
left: 0;
top: 0;
width: 56px;
margin-right: 20px;
}
.end-top-p1 a{
color: #757575;
font-size: 12px;
line-height: 18px;
margin-left: 5px;
margin-right: 5px;
}
.info-right{
width: 1160px;
text-align: left;
margin-left: 70px;
}
.end-top-p1 li{
float: left;
}
.end-top-p1 a:hover{
color: #ff6700;
transition: all .2s;
}
/*.end-top-second{*/
/* float: left;*/
/* width: 1149px;*/
/*}*/
.end-top-second a{
float: left;
font-size: 12px;
line-height: 18px;
color: #b0b0b0;
}
.second p{
font-size: 12px;
line-height: 18px;
color: #b0b0b0;
}
.second{
position: absolute;
top:40px;
left: 72px;
}
.end-top-box{
position: absolute;
top: 100px;
}
.end-top-box a{
float: left;
}
.end-top-box2{
position: absolute;
top: 100px;
left:130px;
}
.end-top-box3{
position: absolute;
top: 100px;
left:190px;
}
/*结尾*/
浙公网安备 33010602011771号