使用HTML和css编写的小米商城界面
练习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="#">MIUIa><span>|span>li>
<li><a href="#">loTa><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="#">下载appa><span>|span>
<div class="download">
<a href="#">
<img src="img/download.png" alt="">
<p>小米商城appp>
a>
div>
<div class="triangle">div>
li>
<li><a href="#">智能生活a><span>|span>li>
<li><a href="#">Select Locationa>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>小米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米12p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米13p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米14p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米15p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0cc4e8e58d7288cd8dff13b98bdc3ea8.jpg" alt="">
div>
<p>小米16p>
<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>红米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米9p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米10p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<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>红米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米9p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米10p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<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>红米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米9p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米10p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<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>红米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米9p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>红米10p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<p>2599元p>
a>
li>
<li>
<a href="#">
<div class="nav-img-box">
<img src="img/0d4b362431de4bdda03315ffdbc7b32a.jpg" alt="">
div>
<p>小米11p>
<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>红米11p>
<p>2599元p>