小米商城底部布局之完结篇
今天搞定了以前敲的半截的小米商城的一小部分问题。其中包括导航条。
导航条里的小图标以前一直放不进去 还有前面的小字。郁闷坏了。今天终于搞定了。
重温了相对定位绝对定位。之外把固定定位也给用上了。旁边的返回顶部，和到达底部。虽然没啥，但是还是挺有成就感的。呵呵
另外，今天学到完全可以把行内样式 当浮动用。挺好玩的，不知道这样玩，真的可行不，请老师指点。灵活运用p标签。嗯就这些了。呵呵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<link rel="stylesheet" type="text/css" href="static/css/mi.css">
<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="static/font-awesome/css/font-awesome.min.css">
</head>
</head>
<body>
<div class="jt">
<a href="#dingbu" class="fa fa-arrow-circle-up" aria-hidden="true"></a>
<a href="#dibu" class="fa fa-arrow-circle-down" aria-hidden="true"></a>
</div>
<!-- 大框架 -->
<div class="box">
<!-- 上框架 导航部分 -->
<div class="header">
<div class="header_content">
<ul class="content_ul" >
<li><a href="#" id="dingbu">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">IOL</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">小米开放平台</a><span>|</span></li>
<li><a href="#">金融</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">政企服务</a><span>|</span></li>
<li><a href="#">Select Region</a></li>
</ul>
<ul class="content_ul_1">
<li><a href="#">登录</a><span>|</span></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li class="content_ul_1shop"><i class="fa fa-shopping-cart"></i> 购物车(0)
<div class="content_ul_1shop_div">购物车中还没有商品，赶紧选购吧！</div>
</li>
</ul>
</div>
</div>
<div class="content_top">
<!-- 内容展示部分 -->
<div class="content">
<!-- 导航2 -->
<div class="content_menu">
<div class="content_menu_pic">
<img src="static/img/footlogo.png" style="margin:5px 0px;margin-right:10px;">
<img src="static/img/logoAD.gif">
</div>
<div class="content_menu_ul">
<ul class="">
<li>小米手机
<div class="">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</li>
<li>红米</li>
<li>电视</li>
<li>笔记本</li>
<li>盒子</li>
<li>新品</li>
<li>路由器</li>
<li>智能硬件</li>
<li>服务</li>
<li>社区</li>
</ul>
</div>
<!-- /* 搜索框 */ -->
<div class="content_menu_form">
<form>
<input type="text" name="">
<div class="ttt">
<a href="#">小米8</a>
<a href="#">618主会场</a>
</div>
<div class="botton">
<i class="fa fa-search"></i>
</div>
</form>
</div>
</div>
<div class="content_pic"></div> <!-- 幻灯片 -->
<div class="content_shop"> <!-- 商品展示 -->
<div class="content_shop_1"></div>
<div class="content_shop_2"></div>
<div class="content_shop_3"></div>
<div class="content_shop_4"></div>
</div>
</div>
<div class="clear"></div>
<!-- 闪购 -->
<div class="content_mi">小米闪购</div> <!-- 闪购-导航 -->
<div class="content_mi_shop"> <!-- 闪购-商品展示 -->
<div class="content_mi_shop_1"></div>
<div class="content_mi_shop_2"></div>
<div class="content_mi_shop_3"></div>
<div class="content_mi_shop_4"></div>
<div class="content_mi_shop_5"></div>
</div>
<div class="clear"></div> <!-- 清除浮动 -->
<div class="content_mi_pic"></div> <!-- 闪购-底部图片 -->
</div>
<div class="content_bottom">
<!-- 手机 -->
<div class="content_bottom_1">
<div class="content_bottom_menu">手机</div> <!-- 手机-导航 -->
<div class="content_bottom_shop"> <!-- 手机-商品展示 -->
<div class="content_bottom_shop_1"></div><!-- 手机-左侧图片 -->
<div class="content_bottom_shop_2"> <!-- 手机-右侧商品展示框架 -->
<div class="content_bottom_shop_2a"> <!-- 手机-右侧商品展示框架上 -->
<div class="content_bottom_shop_2a1"></div>
<div class="content_bottom_shop_2a2"></div>
<div class="content_bottom_shop_2a3"></div>
<div class="content_bottom_shop_2a4"></div>
</div>
<div class="content_bottom_shop_2b"> <!-- 手机-右侧商品展示框架下 -->
<div class="content_bottom_shop_2b1"></div>
<div class="content_bottom_shop_2b2"></div>
<div class="content_bottom_shop_2b3"></div>
<div class="content_bottom_shop_2b4"></div>
</div>
</div>
</div>
<div class="content_bottom_pic"></div> <!-- 手机-底部图片 -->
</div>
<!-- 家电 -->
<div class="appliance_menu">家电</div> <!-- 家电-导航 -->
<div class="appliance_shop">
<div class="appliance_shop_top"> <!-- 家电-商品展示 -->
<div class="appliance_shop_top1"></div>
<div class="appliance_shop_top2"></div>
<div class="appliance_shop_top3"></div>
<div class="appliance_shop_top4"></div>
<div class="appliance_shop_top5"></div>
</div>
<div class="clear"></div>
<div class="appliance_shop_bottom">
<div class="appliance_shop_bottom1"></div>
<div class="appliance_shop_bottom2"></div>
<div class="appliance_shop_bottom3"></div>
<div class="appliance_shop_bottom4"></div>
<div class="appliance_shop_bottom5"> <!-- 家电-商品展示之小图片 -->
<div class="appliance_shop_bottom5_top"></div>
<div class="appliance_shop_bottom5_bottom"></div>
</div>
</div>
</div>
<div class="appliance_pic"></div> <!-- 家电-底部图片 -->
<!-- 智能 -->
<div class="noopsyche_menu">智能</div> <!-- 智能-导航 -->
<div class="noopsyche_shop"> <!-- 智能-商品展示 -->
<div class="noopsyche_shop_top">
<div class="noopsyche_shop_top1"></div>
<div class="noopsyche_shop_top2"></div>
<div class="noopsyche_shop_top3"></div>
<div class="noopsyche_shop_top4"></div>
<div class="noopsyche_shop_top5"></div>
</div>
<div class="clear"></div>
<div class="noopsyche_shop_bottom">
<div class="noopsyche_shop_bottom1"></div>
<div class="noopsyche_shop_bottom2"></div>
<div class="noopsyche_shop_bottom3"></div>
<div class="noopsyche_shop_bottom4"></div>
<div class="noopsyche_shop_bottom5"> <!-- 智能-商品展示之小图片 -->
<div class="noopsyche_shop_bottom5_top"></div>
<div class="noopsyche_shop_bottom5_bottom"></div>
</div>
</div>
</div>
<div class="noopsyche_pic"></div> <!-- 智能-底部图片 -->
<!-- 搭配 -->
<div class="match_menu">搭配</div> <!-- 搭配-导航 -->
<div class="match_shop"> <!-- 搭配-商品展示 -->
<div class="match_shop_top">
<div class="match_shop_top1"></div>
<div class="match_shop_top2"></div>
<div class="match_shop_top3"></div>
<div class="match_shop_top4"></div>
<div class="match_shop_top5"></div>
</div>
<div class="clear"></div>
<div class="match_shop_bottom">
<div class="match_shop_bottom1"></div>
<div class="match_shop_bottom2"></div>
<div class="match_shop_bottom3"></div>
<div class="match_shop_bottom4"></div>
<div class="match_shop_bottom5"> <!-- 搭配-商品展示之小图片 -->
<div class="match_shop_bottom5_top"></div>
<div class="match_shop_bottom5_bottom"></div>
</div>
</div>
</div>
<div class="match_pic"></div> <!-- 搭配-底部图片 -->
<!-- 配件 -->
<div class="mountings_menu">配件</div> <!-- 配件-导航 -->
<div class="mountings_shop"> <!-- 配件-商品展示 -->
<div class="mountings_shop_top">
<div class="mountings_shop_top1"></div>
<div class="mountings_shop_top2"></div>
<div class="mountings_shop_top3"></div>
<div class="mountings_shop_top4"></div>
<div class="mountings_shop_top5"></div>
</div>
<div class="clear"></div>
<div class="mountings_shop_bottom">
<div class="mountings_shop_bottom1"></div>
<div class="mountings_shop_bottom2"></div>
<div class="mountings_shop_bottom3"></div>
<div class="mountings_shop_bottom4"></div>
<div class="mountings_shop_bottom5"> <!-- 配件-商品展示之小图片 -->
<div class="mountings_shop_bottom5_top"></div>
<div class="mountings_shop_bottom5_bottom"></div>
</div>
&am