动态小米官网页面设计（内含最详细实现的源码）
实现页面展示：
html网页源码：（以xiaomi.html命名文件）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/xiaomi.css">
<link rel="stylesheet" type="text/css" href="../font/font_xiaomi/iconfont.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="../js/jquery-2.1.4.min.js">script>
<script src="../js/jquery.animate-colors-min.js">script>
<title>Documenttitle>
head>
<body>
<div id="head_box">
<div id="head_wrap">
<div id="head_nav">
<a href="#">大米网a>
<span>|span>
<a href="#">MUIa>
<span>|span>
<a href="#">米聊a>
<span>|span>
<a href="#">游戏a>
<span>|span>
<a href="#">多看阅读a>
<span>|span>
<a href="#">云服务a>
<span>|span>
<a href="#">大米移动版a>
<span>|span>
<a href="#">问题反馈a>
<span>|span>
<a href="#">SelectRegiona>
div>
<div id="head_right">
<div id="head_landing">
<a href="#">登录a>
<span>|span>
<a href="#">注册a>
div>
<div id="head_car">
<a href="#">购物车（0）a>
<div id="car_content">
<a class="car_text">购物车好空啊，快去填满我把！！！a>
div>
div>
div>
div>
div>
<div id="main_head_box">
<div id="menu_wrap">
<div id="menu_logo">
<img src="../images/logo.jpg">
div>
<div id="menu_nav">
<ul>
<li class="menu_li" control="xiaomiphone">大米手机li>
<li class="menu_li" control="hongmiphone">红米li>
<li class="menu_li" control="pingban">平板li>
<li class="menu_li" control="tv">电视 盒子li>
<li class="menu_li" control="luyou">路由器li>
<li class="menu_li" control="yingjian">智能硬件li>
<li><a>服务a>li>
<li><a>社区a>li>
ul>
div>
<div id="find_wrap">
<div id="find_bar">
<span>小米9span>
<input type="text" id="find_input">
div>
<div id="find_but"> <span class="iconfont icon-sousuo">span>div>
div>
div>
div>
<div id="menu_content_bg" style="height: 0px;">
<div id="menu_content_wrap">
<ul style="top: 0px;">
<li id="xiaomiphone">
<div class="menu_content">
<img src="../images/mi4!160x110.jpg">
<p class="menu_content_tit">大米手机4p>
<p class="menu_content_price">1499元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/minote!160x110.jpg">
<p class="menu_content_tit">大米NOTE标准版p>
<p class="menu_content_price">1999元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/minotepro!160x110.jpg">
<p class="menu_content_tit">大米NOTE顶配版p>
<p class="menu_content_price">2999元起p>
div>
li>
<li id="hongmiphone">
<div class="menu_content">
<img src="../images/hongmi2a!160x110.jpg">
<p class="menu_content_tit">红米手机2Ap>
<p class="menu_content_price">499元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/hongmi2!160x110.jpg">
<p class="menu_content_tit">红米手机2p>
<p class="menu_content_price">599元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/note!160x110.jpg">
<p class="menu_content_tit">红米NOTEp>
<p class="menu_content_price">699元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/note2!160x110.jpg">
<p class="menu_content_tit">红米NOTE2p>
<p class="menu_content_price">799元p>
div>
li>
<li id="pingban">
<div class="menu_content">
<img src="../images/mipad16!160x110.jpg">
<p class="menu_content_tit">大米平板16Gp>
<p class="menu_content_price">1299元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/mipad64!160x110.jpg">
<p class="menu_content_tit">大米平板64Gp>
<p class="menu_content_price">1499元起p>
div>
li>
<li id="tv">
<div class="menu_content">
<img src="../images/mitv40!160x110.jpg">
<p class="menu_content_tit">大米电视2 40英寸p>
<p class="menu_content_price">1999元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/mitv48!160x110.jpg">
<p class="menu_content_tit">大米电视2S 48英寸p>
<p class="menu_content_price">2999元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/mitv49!160x110.jpg">
<p class="menu_content_tit">大米电视2 49英寸p>
<p class="menu_content_price">3399元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/mitv55!160x110.jpg">
<p class="menu_content_tit">大米电视2 55英寸p>
<p class="menu_content_price">4499元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/hezimini!160x110.jpg">
<p class="menu_content_tit">大米盒子MINI版p>
<p class="menu_content_price">199元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/hezis!160x110.jpg">
<p class="menu_content_tit">大米盒子增强版p>
<p class="menu_content_price">299元p>
div>
li>
<li id="luyou">
<div class="menu_content">
<img src="../images/miwifi!160x110.jpg">
<p class="menu_content_tit">全新大米路由器p>
<p class="menu_content_price">699元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/miwifimini!160x110.jpg">
<p class="menu_content_tit">大米路由器 MINIp>
<p class="menu_content_price">129元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/miwifilite!160x110.jpg">
<p class="menu_content_tit">大米路由器 青春版p>
<p class="menu_content_price">79元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/wifiExtension!160x110.jpg">
<p class="menu_content_tit">大米WIFI放大器p>
<p class="menu_content_price">39元p>
div>
li>
<li id="yingjian">
<div class="menu_content">
<img src="http://c1.mifile.cn/f/i/15/goods/nav/scale!160x110.jpg">
<p class="menu_content_tit">体重称p>
<p class="menu_content_price">99元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/xiaoyi!160x110.jpg">
<p class="menu_content_tit">摄像头p>
<p class="menu_content_price">129元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/yicamera!160x110.jpg">
<p class="menu_content_tit">运动相机p>
<p class="menu_content_price">399元起p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/ihealth!160x110.jpg">
<p class="menu_content_tit">血压计p>
<p class="menu_content_price">199元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/chazuo!160x110.jpg">
<p class="menu_content_tit">智能插座p>
<p class="menu_content_price">59元p>
div>
<span class="menu_content_line">span>
<div class="menu_content">
<img src="../images/smart!160x110.jpg">
<p class="menu_content_tit">查看全部
<br>智能硬件p>
div>
li>
ul>
div>
div>
<div id="big_banner_wrap">
<ul id="banner_menu_wrap">
<li>
<a>手机 平板a>
<a class="banner_menu_i"><span class="fa fa-angle-right">span>a>
<div class="banner_menu_content" style="width: 600px;top: -15px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="../images/minote.jpg"> a><a>大米NOTEa>
<span>选购span>
li>
<li>
<a><img src="../images/minote.jpg"> a><a>大米4a>
<span>选购span>
li>
<li>
<a><img src="../images/hongmi2.jpg"> a><a>红米手机2a>
<span>选购span>
li>
<li>
<a><img src="../images/hongmi2a.jpg"> a><a>红米手机2Aa>
<span>选购span>
li>
<li>
<a><img src="../images/note2.jpg"> a><a>红米NOTE2a>
<span>选购span>
li>
ul>
div>
li>
<li>
<a>电视 盒子a>
<a class="banner_menu_i"><span class="fa fa-angle-right">span>a>
<div class="banner_menu_content" style="width: 600px;top: -50px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="../images/tv40.jpg"> a><a>大米电视40英寸a>
<span>选购span>
li>
<li>
<a><img src="../images/tv48.jpg"> a><a>大米电视48英寸a>
<span>选购span>
li>
<li>
<a><img src="../images/tv49.jpg"> a><a>大米电视49英寸a>
<span>选购span>
li>
<li>
<a><img src="../images/tv49.jpg"> a><a>大米电视49英寸a>
<span>选购span>
li>
ul>
div>
li>
<li>
<a>路由器 智能配件a>
<a class="banner_menu_i"><span class="fa fa-angle-right">span>a>
<div class="banner_menu_content" style="width: 600px;top: -100px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="../images/miwifi.jpg"> a><a>大米路由器a>
<span>选购span>
li>
<li>
<a><img src="../images/miwifimini.jpg"> a><a>大米路由器 青春版a>
<span>选购span>
li>
<li>
<a><img src="../images/air.jpg"> a><a>净化器a>
<span>选购span>
li>
<li>
<a><img src="../images/xiaoyi.jpg"> a><a>摄像机a>
<span>选购span>
li>
ul>
div>
li>
<li>
<a>移动电源 插线板a>
<a class="banner_menu_i"><span class="fa fa-angle-right">span>a>
<div class="banner_menu_content" style="width: 600px;top: -150px;">
<ul class="banner_menu_content_ul">
<li>
<a><img src="../images/dianyuan.jpg"> a><a>大米移动电源a>
<span>选购span>
li>
<li>
<a><img src="../images/powerscript.jpg"> a><a>大米插线板a>
<span>选购span>
li>
<li>
<a><img src="../images/yidongdianyuan.jpg"> a><a>品牌移动电源a>
<span>选购span>
li>
<li>
<a><img src="../images/dianyuanfujian.jpg"> a>