小米商城首页所有导航作业
7202019-05-09 16:54:04245//html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.min.css">
</head>
<body>
<header>
<section class="header_title">
<div class="main">
<div class="fl">
<a href="#">小米商城</a>
<em>|</em>
<a href="#">MIUI</a>
<em>|</em>
<a href="#">IOT</a>
<em>|</em>
<a href="#">云服务</a>
<em>|</em>
<a href="#">小爱分享平台</a>
<em>|</em>
<a href="#">金融</a>
<em>|</em>
<a href="#">有品</a>
<em>|</em>
<a href="#">企业服务</a>
<em>|</em>
<a href="#">SelectRegion</a>
</div>
<div class="fr">
<a href="#">登录</a>
<em>|</em>
<a href="#">注册</a>
<em>|</em>
<a href="#">我的订单</a>
<span>
<i class="fa fa-shopping-cart"></i>
购物车（0）
<div class="gwbox">暂时还没有商品</div>
</span>
</div>
</div>
</div>
</section>
<div class="clear"></div>
<!-- 头部顶部结束 -->
<nav class="main">
<div class="fl">
<img src="img/footlogo.png" />
<img src="img/logoAD.gif" />
</div>
<ul>
<li><a href="#">小米手机</a>
<div class="header_dl">
<dl class="main">
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
</dl>
</div>
</li>
<li><a href="#">红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">盒子</a>
<div class="header_dl">
<dl class="main">
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
</dl>
</div>
</li>
<li><a href="#">新品</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a>
<div class="header_dl">
<dl class="main">
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
<dd>
<p><span class="new">新品</span></p>
<img src="img/phone/phone1.png" >
<p class="f_cs">小米2s</p>
<p class="f_hs">39200元</p>
</dd>
</dl>
</div>
</li>
<li><a href="#">社区</a></li>
</ul>
<div class="fr">
<form>
<input type="text" placeholder="点击输入搜索内容" />
<button><i class="fa fa-search"></i></button>
</form>
</div>
</nav>
<div class="clear"></div>
</header>
<!-- 头部结束 -->
<section class="content">
<div class="main">
<div class="nav_box">
<ul class="fl">
<li>
<a href="">手机电话卡</a>
<i class="fa fa-angle-right"></i>
<dl class="nav_box_dl">
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
</dl>
</li>
<li>
<a href="">手机电/话卡</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">电视机/盒子</a>
<i class="fa fa-angle-right"></i>
<dl class="nav_box_dl">
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
<dd><img src="img/phone/phone1.png"/>红米6A</dd>
&