abstrak：今天搞定了以前敲的半截的小米商城的一小部分問(wèn)題。其中包括導(dǎo)航條。導(dǎo)航條里的小圖標(biāo)以前一直放不進(jìn)去 還有前面的小字。郁悶壞了。今天終于搞定了。重溫了相對(duì)定位絕對(duì)定位。之外把固定定位也給用上了。旁邊的返回頂部，和到達(dá)底部。雖然沒(méi)啥，但是還是挺有成就感的。呵呵另外，今天學(xué)到完全可以把行內(nèi)樣式 當(dāng)浮動(dòng)用。挺好玩的，不知道這樣玩，真的可行不，請(qǐng)老師指點(diǎn)。靈活運(yùn)用p標(biāo)簽。嗯就這些了。呵呵<!DOCTYP
今天搞定了以前敲的半截的小米商城的一小部分問(wèn)題。其中包括導(dǎo)航條。
導(dǎo)航條里的小圖標(biāo)以前一直放不進(jìn)去 還有前面的小字。郁悶壞了。今天終于搞定了。
重溫了相對(duì)定位絕對(duì)定位。之外把固定定位也給用上了。旁邊的返回頂部，和到達(dá)底部。雖然沒(méi)啥，但是還是挺有成就感的。呵呵
另外，今天學(xué)到完全可以把行內(nèi)樣式 當(dāng)浮動(dòng)用。挺好玩的，不知道這樣玩，真的可行不，請(qǐng)老師指點(diǎn)。靈活運(yùn)用p標(biāo)簽。嗯就這些了。呵呵
<!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">
<!-- 上框架 導(dǎo)航部分 -->
<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="#">云服務(wù)</a><span>|</span></li>
<li><a href="#">小米開(kāi)放平臺(tái)</a><span>|</span></li>
<li><a href="#">金融</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">政企服務(wù)</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="#">注冊(cè)</a><span>|</span></li>
<li><a href="#">消息通知</a><span>|</span></li>
<li class="content_ul_1shop"><i class="fa fa-shopping-cart"></i> 購(gòu)物車(chē)(0)
<div class="content_ul_1shop_div">購(gòu)物車(chē)中還沒(méi)有商品，趕緊選購(gòu)吧！</div>
</li>
</ul>
</div>
</div>
<div class="content_top">
<!-- 內(nèi)容展示部分 -->
<div class="content">
<!-- 導(dǎo)航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>小米手機(jī)
<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>服務(wù)</li>
<li>社區(qū)</li>
</ul>
</div>
<!-- /* 搜索框 */ -->
<div class="content_menu_form">
<form>
<input type="text" name="">
<div class="ttt">
<a href="#">小米8</a>
<a href="#">618主會(huì)場(chǎng)</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>
<!-- 閃購(gòu) -->
<div class="content_mi">小米閃購(gòu)</div> <!-- 閃購(gòu)-導(dǎo)航 -->
<div class="content_mi_shop"> <!-- 閃購(gòu)-商品展示 -->
<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> <!-- 清除浮動(dòng) -->
<div class="content_mi_pic"></div> <!-- 閃購(gòu)-底部圖片 -->
</div>
<div class="content_bottom">
<!-- 手機(jī) -->
<div class="content_bottom_1">
<div class="content_bottom_menu">手機(jī)</div> <!-- 手機(jī)-導(dǎo)航 -->
<div class="content_bottom_shop"> <!-- 手機(jī)-商品展示 -->
<div class="content_bottom_shop_1"></div><!-- 手機(jī)-左側(cè)圖片 -->
<div class="content_bottom_shop_2"> <!-- 手機(jī)-右側(cè)商品展示框架 -->
<div class="content_bottom_shop_2a"> <!-- 手機(jī)-右側(cè)商品展示框架上 -->
<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"> <!-- 手機(jī)-右側(cè)商品展示框架下 -->
<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> <!-- 手機(jī)-底部圖片 -->
</div>
<!-- 家電 -->
<div class="appliance_menu">家電</div> <!-- 家電-導(dǎo)航 -->
<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> <!-- 智能-導(dǎo)航 -->
<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> <!-- 搭配-導(dǎo)航 -->
<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> <!-- 配件-導(dǎo)航 -->
<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
Guru membetulkan：韋小寶Masa pembetulan：2019-02-12 09:29:36
Rumusan guru：寫(xiě)的很不錯(cuò) 布局這個(gè)東西要考熟練 一定要多練習(xí) 寫(xiě)多了自然也就明白了 浮動(dòng)用多了要記得清除哦！