采用的架构为html+css+js
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小米闪购-小米商城</title>
<!-- 引用图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 连接css样式 -->
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="header_nav">
<a href=""> 小米商城 </a><span>|</span>
<a href=""> MIUI </a><span>|</span>
<a href=""> IoT </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=""> 资质证照 </a><span>|</span>
<a href=""> 协议规则 </a><span>|</span>
<a href=""> 下载App </a><span>|</span>
<a href=""> 智能生活 </a><span>|</span>
</div>
<div class="header_cart">
<a href=""><i class="iconfont"></i> 购物车(0)</a>
</div>
<div class="header_info clearfix">
<a href="">登录</a><span>|</span>
<a href="">注册</a><span>|</span>
<a href="">消息通知</a>
</div>
</div>
</div>
<div class="header2">
<div class="container">
<div class="header2_log">
<a href="url" class="lr">小米官网</a>
</div>
<div class="header2_nav">
<ul class="nav_list clearfix">
<li class="nav_item2">
<a href="">全部商品分类</a>
</li>
<li class="nav_item">
<a href="">小米手机</a>
</li>
<li class="nav_item">
<a href="">Redmi 红米</a>
</li>
<li class="nav_item">
<a href="">电视</a>
</li>
<li class="nav_item">
<a href="">笔记本</a>
</li>
<li class="nav_item">
<a href="">家电</a>
</li>
<li class="nav_item">
<a href