小米商城首页大框架布局
7202019-05-08 16:35:23317<!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）
</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></li>
<li><a href="#">红米</a></li>
<li><a href="#">电视</a></li>
<li><a href="#">笔记本</a></li>
<li><a href="#">盒子</a></li>
<li><a href="#">新品</a></li>
<li><a href="#">路由器</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">服务</a></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>
</li>
<li>
<a href="">手机电/话卡</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">电视机/盒子</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">笔记本</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">智能/家电</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">健康/家居</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">出行/儿童</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">路由器/手机配件</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">移动电源/插线板</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">耳机/音箱</a>
<i class="fa fa-angle-right"></i>
</li>
<li>
<a href="">生活/米兔</a>
<i class="fa fa-angle-right"></i>
</li>
</ul>
<div class="index_banner fr">
<img src="img/a.jpg" />
</div>
</div>
<!-- 菜单栏与轮播图版块结束 -->
<div class="clear"></div>
<div class="ad_box">
<ul>
<li>
<dl>
<dd>
<i class="fa fa-mobile-phone fa-2x"></i><br>
选购手机
</dd>
<dd>
<i class="fa fa-gift fa-2x"></i><br>
企业团购
</dd>
<dd>
<i class="fa fa-facebook fa-2x"></i><br>
F码通道
</dd>
<dd>
<i class="fa fa-file-text fa-2x"></i><br>
米粉卡
</dd>
<dd>
<i class="fa fa-refresh fa-2x"></i><br>
以旧换新
</dd>
<dd>
<i class="fa fa-credit-card fa-2x"></i><br>
话费充值
</dd>
</dl>
</li>
<li><a><img src="img/midAD1.jpg"</a></li>
<li><a><img src="img/midAD2.jpg"</a></li>
<li><a><img src="img/midAD3.jpg"</a></li>
</ul>
</div>
<div class="clear"></div>
<!-- 广告图版块结束 -->
<div class="migo_box">
<h2>小米闪购</h2>
<ul>
<li>
<h3>18:00场</h3>
<p>
<i class="fa fa-flash fa-4x"></i><br>
距离开始还有
</p>
<p class="time">
<span>00</span> <em>：</em><span>00</span> <em>：</em><span>00</span>
</p>
</li>
<li class="migo_pic">
<a href="">
<img src="img/flashbuy/flashbuy1.jpg" >
<p class="text_a">米家空气净化器Pro白色</p>
<p class="text_b">大空间，快循环</p>
<p class="text_b"><b>1399元</b> <del>1499元</del></p>
</a>
</li>
<li class="migo_pic">
<a href="">
<img src="img/flashbuy/flashbuy2.jpg" >
<p class="text_a">米家空气净化器Pro白色</p>
<p class="text_b">大空间，快循环</p>
<p class="text_b"><b>1399元</b> <del>1499元</del></p>
</a>
</li>
<li class="migo_pic">
<a href="">
<img src="img/flashbuy/flashbuy3.jpg" >
<p class="text_a">米家空气净化器Pro白色</p>
<p class="text_b">大空间，快循环</p>
<p class="text_b"><b>1399元</b> <del>1499元</del></p>
</a>
</li>
<li class="migo_pic">
<a href="">
<img src="img/flashbuy/flashbuy4.jpg" >
<p class="text_a">米家空气净化器Pro白色</p>
<p class="text_b">大空间，快循环</p>
<p class="text_b"><b>1399元</b> <del>1499元</del></p>
</a>
</li>
</ul>
</div>
&am