摘要：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>小米首页</title> <script type="text/javascript" src="js/j
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>小米首页</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<!-- 命名规则：
主体内容部分div从上往下依次为con01,con02... ...
如有上下两行，上行为top，简写为t;下行为bottom，简写为b。
一行如有5个图，从左往右依次为1-5。
-->
<!-- 其中，家电，智能，搭配，配件，周边 这几个布局都一样，由于是首次仿站，所以都没有省略，用来练手。 -->
</head>
<body>
<script type="text/javascript">
$(function(){
$('#rr').mouseover(function(){
$(this).css({'background':'#fff','color':'#ff6700'})//购物车框鼠标移上背景变白色，自体颜色变桔红
})
$('#rr').mouseleave(function(){
$(this).css({'background':'#424242','color':'#ccc'})//购物车框鼠标移出背景变原来灰色，文字变原灰色
})
$('.down').hide()//下载app的下拉框默认隐藏
$('#ll').mouseover(function(){
$('.down').show()//鼠标移上下载app按钮，下拉框显示
})
$('#ll').mouseleave(function(){
$('.down').hide()//鼠标移开下载app按钮，下拉框隐藏
})
$('#rr').mouseover(function(){
$('this').css('background','#fff')//鼠标移上购物车按钮，背景变白色
})
$('#rr').mouseleave(function(){
$('this').css('background','#424242')//鼠标移开购物车按钮，背景变原来灰色
})
$('.gwc').hide()//购物车下拉框默认隐藏
$('#rr').mouseover(function(){
$('.gwc').slideDown(350)//鼠标移上购物车按钮，下拉框动态打开
})
$('#rr').mouseleave(function(){
$('.gwc').slideUp(350)//鼠标移开购物车按钮，下拉框动态折叠
})
// 关于鼠标移上变色，有的用jquery做的，有的用css做的
$('.uu01-back').hide()
$('#uu01').mouseover(function(){
$('.uu01-back').show()
})
$('#uu01').mouseleave(function(){
$('.uu01-back').hide()
})
$('.uu02-back').hide()
$('#uu02').mouseover(function(){
$('.uu02-back').show()
})
$('#uu02').mouseleave(function(){
$('.uu02-back').hide()
})
$('.uu03-back').hide()
$('#uu03').mouseover(function(){
$('.uu03-back').show()
})
$('#uu03').mouseleave(function(){
$('.uu03-back').hide()
})
$('.uu04-back').hide()
$('#uu04').mouseover(function(){
$('.uu04-back').show()
})
$('#uu04').mouseleave(function(){
$('.uu04-back').hide()
})
$('.uu05-back').hide()
$('#uu05').mouseover(function(){
$('.uu05-back').show()
})
$('#uu05').mouseleave(function(){
$('.uu05-back').hide()
})
$('.uu06-back').hide()
$('#uu06').mouseover(function(){
$('.uu06-back').show()
})
$('#uu06').mouseleave(function(){
$('.uu06-back').hide()
})
$('.uu07-back').hide()
$('#uu07').mouseover(function(){
$('.uu07-back').show()
})
$('#uu07').mouseleave(function(){
$('.uu07-back').hide()
})
$('.uu08-back').hide()
$('#uu08').mouseover(function(){
$('.uu08-back').show()
})
$('#uu08').mouseleave(function(){
$('.uu08-back').hide()
})
$('.uu00-back').hide()
})
</script>
<!-- 头部 -->
<div class="header">
<div class="topMenu">
<ul>
<li>小米商城<span>|</span></li>
<li>MIUI<span>|</span></li>
<li>loT<span>|</span></li>
<li>云服务<span>|</span></li>
<li>金融<span>|</span></li>
<li>有品<span>|</span></li>
<li>小爱开放平台<span>|</span></li>
<li>政企服务<span>|</span></li>
<li>资质证照<span>|</span></li>
<li>协议规则<span>|</span></li>
<li id="ll">下载app<span>|</span>
<div class="down">
<a href="#"><img src="static/images/D.png"></a>
</div>
</li>
<li>Select Region</li>
<li style="margin-left:265px;">登陆<span>|</span></li>
<li>注册<span>|</span></li>
<li id="xxtz">消息通知</li>
<li id="rr" style="float:right;margin-right:1px;"><i class="fa fa-shopping-cart"></i>购物车（0）
<div class="gwc">
<span>购物车中还没有商品，赶紧选购吧！</span>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 主体 -->
<div class="content">
<!-- logo行 -->
<div class="logotop">
<!-- logo图标 -->
<div class="logo-top"></div>
<!-- logo后10个链接 -->
<div class="logo-menu">
<!-- 白色背景，上下边框线，显示图片链接用 -->
<ul>
<!-- 这个div框包含前8个ul，鼠标移入，下拉显示白色背景，鼠标移出，折叠白色背景 -->
<div class="logo-menu-back">
<li id="uu01"> 小米手机
<!-- 下拉框背景div -->
<div class="uu01-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-b.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<!-- uu02-t：白色边框，占位用 -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-b.png" alt=""><br><a href="#1">小米8 青春版</a><br><a href="#2">1399元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-b.png" alt=""><br><a href="#1">小米8</a><br><a href="#2">2699元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-b.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-b.png" alt=""><br><a href="#1">小米8 SE</a><br><a href="#2">1699元起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu02">红米
<!-- 下拉框背景div -->
<div class="uu02-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-c.png" alt=""><br><a href="#1">红米Note 7</a><br><a href="#2">999元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-c.png" alt=""><br><a href="#1">红米6 Pro</a><br><a href="#2">1299元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-c.png" alt=""><br><a href="#1">红米6</a><br><a href="#2">799元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-c.png" alt=""><br><a href="#1">红米6A</a><br><a href="#2">599元起</a>
</div>
</div>
<span></span>
<div class="uu01-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-c.png" alt=""><br><a href="#1">红米Note 5</a><br><a href="#2">1099元起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu03">电视
<!-- 下拉框背景div -->
<div class="uu03-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-d.png" alt=""><br><a href="#1">小米电视4S 75英寸</a><br><a href="#2">7999元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-d.png" alt=""><br><a href="#1">小米电视4A 32英寸</a><br><a href="#2">899元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-d.png" alt=""><br><a href="#1">小米电视4A 43英寸青春版</a><br><a href="#2">1499元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-d.png" alt=""><br><a href="#1">小米电视4A 50英寸</a><br><a href="#2">1999元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">热卖</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-d.jpg" alt=""><br><a href="#1">小米电视4A 55英寸</a><br><a href="#2">2199元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-d.png" alt=""><br><a href="#1">查看全部</a><br><a href="#2">小米电视</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu04">笔记本
<!-- 下拉框背景div -->
<div class="uu04-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-e.jpg" alt=""><br><a href="#1">小米笔记本Air 12.5"</a><br><a href="#2">3599起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-e.jpg" alt=""><br><a href="#1">小米笔记本Air 13.3"</a><br><a href="#2">4999元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-e.png" alt=""><br><a href="#1">小米笔记本 15.6"</a><br><a href="#2">4199元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-e.png" alt=""><br><a href="#1">小米笔记本Pro 15.6"</a><br><a href="#2">5599元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-e.png" alt=""><br><a href="#1">小米游戏本</a><br><a href="#2">6699元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-e.png" alt=""><br><a href="#1">小米平板</a><br><a href="#2">1099起</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu05">家电
<!-- 下拉框背景div -->
<div class="uu05-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-f.jpg" alt=""><br><a href="#1">米家互联网洗烘一体机10kg</a><br><a href="#2">2499元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-f.jpg" alt=""><br><a href="#1">米家互联网空调（一级能效）</a><br><a href="#2">2699元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-f.jpg" alt=""><br><a href="#1">米家互联网空调</a><br><a href="#2">2299元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-f.jpg" alt=""><br><a href="#1">小米净水器</a><br><a href="#2">1999元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-f.jpg" alt=""><br><a href="#1">米家扫地机器人</a><br><a href="#2">1699元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-f.jpg" alt=""><br><a href="#1">新风机</a><br><a href="#2">2499元</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu06">新品
<!-- 下拉框背景div -->
<div class="uu06-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-g.png" alt=""><br><a href="#1">小米Play</a><br><a href="#2">1099元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">新品</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-g.png" alt=""><br><a href="#1">小米MIX 3</a><br><a href="#2">3299元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-g.png" alt=""><br><a href="#1">小米蓝牙耳机Air</a><br><a href="#2">399元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-g.png" alt=""><br><a href="#1">小米小爱音响HD</a><br><a href="#2">599元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-g.png" alt=""><br><a href="#1">米家台灯Pro</a><br><a href="#2">349元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-g.png" alt=""><br><a href="#1">米家飞天猪足金吊坠</a><br><a href="#2">799元</a>
</div>
</div>
</div>
</div>
</li>
<li id="uu07">路由器
<!-- 下拉框背景div -->
<div class="uu07-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">双频双核</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-h.png" alt=""><br><a href="#1">小米路由器 4</a><br><a href="#2">199元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-h.jpg" alt=""><br><a href="#1">小米路由器 4C</a><br><a href="#2">99元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-h.png" alt=""><br><a href="#1">小米路由器 3A</a><br><a href="#2">139元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">双千兆</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-h.png" alt=""><br><a href="#1">小米路由器 3G</a><br><a href="#2">249元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu01-t">大容量</div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-h.png" alt=""><br><a href="#1">小米路由器 HD/Pro</a><br><a href="#2">499元起</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-h.png" alt=""><br><a href="#1">查看全部小米路由器</a><br><a href="#2"></a>
</div>
</div>
</div>
</div>
</li>
<li id="uu08">智能硬件
<!-- 下拉框背景div -->
<div class="uu08-back">
<!-- 下拉背景框居中div -->
<div class="uu01-cen">
<!-- 顶部文字+下面图片+价格总体div -->
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu01-j.jpg" alt=""><br><a href="#1">小米米家智能摄像机云台版</a><br><a href="#2">199元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu02-j.jpg" alt=""><br><a href="#1">小米自动洗衣机套装</a><br><a href="#2">79元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu03-j.jpg" alt=""><br><a href="#1">小米蓝牙耳机AirDots青春版</a><br><a href="#2">199元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu04-j.jpg" alt=""><br><a href="#1">小米小爱音响mini</a><br><a href="#2">169元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu05-j.jpg" alt=""><br><a href="#1">米家电动剃须刀</a><br><a href="#2">199元</a>
</div>
</div>
<span></span>
<div class="uu03-1">
<!-- 图片上部文字div -->
<div class="uu02-t"></div>
<!-- 图片+下部名字+价格div -->
<div class="uu01-b">
<img src="static/images/uu06-j.jpg" alt=""><br><a href="#1">查看全部</a><br><a href="#2">智能硬件</a>
</div>
</div>
</div>
</div>
</li>
</div>
<li id="uu09">服务</li>
<li id="uu10">社区</li>
</ul>
</div>
<!-- logo后搜索框 -->
<div class="logo-so">
<div class="logo-so-l">
<div class="so01">
<a href="#1">小米8</a><a href="#2">小米MIX 2S</a>
</div>
</div>
<div class="logo-so-r">
<button><i class="fa fa-search"></i></button>
</div>
</div>
</div>
<div class="clear"></div>
<!-- 轮换图 -->
<div class="con01">
<!-- 左边菜单 -->
<div class="con01-l">
<ul>
<li id="lh1"><a href="">手机 电话卡</a><i class="fa fa-angle-right"></i>
<div class="lh1">
<div><img src="static/images/lh1-01.png" alt=""><a href="">小米9</a></div>
<div><img src="static/images/lh1-02.png" alt=""><a href="">小米8 SE</a></div>
<div><img src="static/images/lh1-03.png" alt=""><a href="">红米Note 7</a></div>
<div><img src="static/images/lh1-04.jpg" alt=""><a href="">对比手机</a></div>
<div><img src="static/images/lh1-05.png" alt=""><a href="">小米9 SE</a></div>
<div><img src="static/images/lh1-06.png" alt=""><a href="">小米MIX 2S</a></div>
<div><img src="static/images/lh1-07.png" alt=""><a href="">红米6 Pro</a></div>
<div><img src="static/images/lh1-08.jpg" alt=""&a
批改老师：灭绝师太批改时间：2019-02-26 09:05:37
老师总结：开始布局的时候,要完整练习,对后面学习有好处哦!
