亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

本課程中所有的導(dǎo)航布局

??? 2019-03-03 16:01:36 198
????:基本思路:    首先將頁(yè)面頭部的導(dǎo)航條樣式,其中class名為header_left;再將下拉菜單的小米手機(jī)下拉菜單做出,之后的上方下拉菜單處可以借鑒相同的代碼部分,其中class名為contentMenu_ul_li1;再做出側(cè)邊欄豎導(dǎo)航,同樣可以先做手機(jī)電話(huà)卡第一個(gè)部分,再在下面使用相同class名contentPic_l_Phone,使用圖片時(shí)再改相

基本思路:

    首先將頁(yè)面頭部的導(dǎo)航條樣式,其中class名為header_left;再將下拉菜單的小米手機(jī)下拉菜單做出,之后的上方下拉菜單處可以借鑒相同的代碼部分,其中class名為contentMenu_ul_li1;再做出側(cè)邊欄豎導(dǎo)航,同樣可以先做手機(jī)電話(huà)卡第一個(gè)部分,再在下面使用相同class名contentPic_l_Phone,使用圖片時(shí)再改相關(guān)的路徑,做出大致樣式;最后一部分導(dǎo)航條是頁(yè)面中的小導(dǎo)航條,思路也是做出一部分再之后直接用做出的代碼即可。

注意事項(xiàng):

  1. 做頁(yè)面的導(dǎo)航條時(shí),很多部分都是類(lèi)似的,可以重復(fù)利用,使做出頁(yè)面時(shí)能更加簡(jiǎn)便。

  2. 引用圖片路徑時(shí),要注意圖片的格式是jpg還是png,這樣頁(yè)面才能加載出圖片。

  3. 在做手機(jī)部分后面的導(dǎo)航部分時(shí),現(xiàn)在引用i標(biāo)簽將圖標(biāo)引用進(jìn)來(lái),再在外面套置一span標(biāo)簽,將其改變成塊級(jí)元素,并通過(guò)css設(shè)置多種樣式使之產(chǎn)生圓形陰影樣式,并通過(guò)偽屬性使其產(chǎn)生相關(guān)效果。

完整代碼:

    html部分:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小米商城</title>
	<link rel="shortcut icon" type="images/x-icon" href="static/images/footlogo.png">
	<link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
	<!-- 頭部 -->
<div class="header">
	<div class="menu">
		<ul class="header_left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">IOT</a><span>|</span></li>
                <li><a href="#">云服務(wù)</a><span>|</span></li>
                <li><a href="#">小愛(ài)分享平臺(tái)</a><span>|</span></li>
                <li><a href="#">金融</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">企業(yè)服務(wù)</a><span>|</span></li>
                <li><a href="#">SelectRegion</a></li>
        </ul>
            <div class="header_right">
                <ul>
	                <li><a href="#">登錄</a><span>|</span></li>
	                <li><a href="#">注冊(cè)</a><span>|</span></li>
	                <li><a href="shop/order.html">我的訂單</a></li>
	                <li class="header_right_li"><a href="shop/cart.html"><i class="fa fa-shopping-cart" ></i>&nbsp; 購(gòu)物車(chē) ( 0 )</a> 
						<div>購(gòu)物車(chē)中還沒(méi)有商品,趕緊選購(gòu)吧!</div>
					</li>
               </ul>
            </div>  
	</div>
</div>
	<!-- 主體部分 -->
<div class="contents">
	<div class="content">

		<div class="contentMenu">
			<div class="contentMenu_pic">
				<img src="static/images/footlogo.png" style="margin: 5px 0px;margin-right:10px;">
				<img src="static/images/logoAD.gif">
			</div>
			<ul class="contentMenu_ul">
				<li class="contentMenu_ul_li1">小米手機(jī)
					<div class="MI_phone">
						<div class="MI_phoneDiv">
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>紅米</li>
				<li>電視</li>
				<li>筆記本</li>
				<li>盒子</li> 
				<li class="contentMenu_ul_li1">新品
					<div class="MI_phone">
						<div class="MI_phoneDiv">
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
							<span></span>
							<div class="MI_phoneDivNumber1">
								<div class="MI_phone_NewProduct">新品</div>
								<div class="MI_phone_NewProduct_Shop">
									<img src="static/images/phone/phone1.png">
									<br>
									<a href="#">小米9</a>
									<br>
									<a href="#" style="color: #ff6700;">2999元起</a>
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>路由器</li>
				<li>智能硬件</li>
				<li>服務(wù)</li>
				<li>社區(qū)</li>
			</ul>
			<div class="contentMenu_form">
				<form>
					<input type="text" name="">
					<div class="contentMenu_form_a"> <a href="">電視新品</a> <a href="">618預(yù)熱</a></div>
					<div class="contentMenu_form_button"><i class="fa fa-search"></i></div>
				</form>
			</div>
		</div>
		<div class="clear"></div>
	
		<div class="contentPic">
			<div class="contentPic_l">
				<ul class="content_pic_ul">
						<li><a href="">手機(jī) 電話(huà)卡 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
								<div><img src="static/images/phone/phone1.png"><a href="#">小米MIX 2S</a></div>
								<div><img src="static/images/phone/phone2.png"><a href="#">紅米6A</a></div>
								<div><img src="static/images/phone/phone12.jpg"><a href="#">米粉卡 日租卡</a></div>
								<div><img src="static/images/phone/phone3.png"><a href="#">小米8</a></div>
								<div><img src="static/images/phone/phone4.jpg"><a href="#">小米6X</a></div>
								<div><img src="static/images/phone/phone15.jpg"><a href="#">小米移動(dòng) 電話(huà)卡</a></div>
								<div><img src="static/images/phone/phone5.jpg"><a href="#">紅米Note 4</a></div>
								<div><img src="static/images/phone/phone7.png"><a href="#">黑鯊游戲手機(jī)</a></div>
								<div><img src="static/images/phone/phone18.png"><a href="#">手機(jī)上門(mén)維修</a></div>
								<div><img src="static/images/phone/phone8.png"><a href="#">紅米Note 5</a></div>
								<div><img src="static/images/phone/phone13.png"><a href="#">小米9</a></div>
								<div><img src="static/images/phone/phone6.jpg"><a href="#">移動(dòng)4G專(zhuān)區(qū)</a></div>
							</div>
						</li>
						<li><a href="">電視機(jī) 盒子</a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
								<div><img src="static/images/tv/tv1.jpg"><a href="#">小米電視4A 65英寸</a></div>
								<div><img src="static/images/tv/tv2.jpg"><a href="#">小米電視4X 55英寸</a></div>
								<div><img src="static/images/tv/tv3.jpg"><a href="#">小米電視4S 55英寸</a></div>
								<div><img src="static/images/tv/tv4.jpg"><a href="#">小米電視4C 32英寸</a></div>
								<div><img src="static/images/tv/tv5.jpg"><a href="#">小米電視4 55英寸</a></div>
								<div><img src="static/images/tv/tv6.jpg"><a href="#">小米電視4S 65英寸</a></div>
								<div><img src="static/images/tv/tv7.jpg"><a href="#">小米電視4C 43英寸</a></div>
								<div><img src="static/images/tv/tv8.jpg"><a href="#">小米電視4C 50英寸</a></div>
								<div><img src="static/images/tv/tv9.jpg"><a href="#">小米電視4S 32英寸</a></div>
								<div><img src="static/images/tv/tv10.png"><a href="#">小米電視4S 65英寸PRO</a></div>
								<div><img src="static/images/tv/tv11.jpg"><a href="#">小米電視4S 50英寸</a></div>
								<div><img src="static/images/tv/tv12.jpg"><a href="#">小米盒子</a></div>
							</div>
						</li>
						<li><a href="">筆記本 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/pc/pc4.jpg"><a href="#">小米筆記本 15.6''</a></div>
							<div><img src="static/images/pc/pc7.jpg"><a href="#">小米筆記本 13.3''</a></div>
							<div><img src="static/images/pc/pc6.png"><a href="#">鼠標(biāo)/鼠標(biāo)墊</a></div>
							<div><img src="static/images/pc/pc9.jpg"><a href="#">小米筆記本 12.5''</a></div>
							<div><img src="static/images/pc/pc10.jpg"><a href="#">小米游戲本</a></div>
							<div><img src="static/images/pc/pc5.jpg"><a href="#">轉(zhuǎn)接器</a></div>
							<div><img src="static/images/pc/pc7.jpg"><a href="#">小米筆記本 15.6''</a></div>
							<div><img src="static/images/pc/pc11.jpg"><a href="#">小米筆記本內(nèi)膽包</a></div>
							<div><img src="static/images/pc/pc2.jpg"><a href="#">小米充電頭</a></div>
							</div>
						</li>
						<li><a href="">智能 家電 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/machine/machine8.jpg"><a href="#">剃須刀</a></div>
							<div><img src="static/images/machine/machine3.jpg"><a href="#">掃地機(jī)器人</a></div>
							<div><img src="static/images/machine/machine4.jpg"><a href="#">凈水器</a></div>
							<div><img src="static/images/machine/machine12.jpg"><a href="#">凈水器濾芯</a></div>
							<div><img src="static/images/machine/machine5.jpg"><a href="#">空氣凈化器</a></div>
							<div><img src="static/images/machine/machine7.jpg"><a href="#">掃地機(jī)配件</a></div>
							<div><img src="static/images/machine/machine10.jpg"><a href="#">電水壺</a></div>
							<div><img src="static/images/machine/machine11.jpg"><a href="#">電飯煲</a></div>
							<div><img src="static/images/machine/machine15.jpg"><a href="#">電磁爐</a></div>
							
							</div>
						</li>
						<li><a href="">健康 家居 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/healthy/healthy3.jpg"><a href="#">小米手環(huán)</a></div>
							<div><img src="static/images/healthy/healthy1.jpg"><a href="#">剃須刀</a></div>
							<div><img src="static/images/healthy/healthy4.jpg"><a href="#">小米攝像頭</a></div>
							<div><img src="static/images/healthy/healthy5.jpg"><a href="#">小米手表</a></div>
							<div><img src="static/images/healthy/healthy13.jpg"><a href="#">體重秤</a></div>
							<div><img src="static/images/healthy/healthy16.jpg"><a href="#">牙刷</a></div>
							<div><img src="static/images/healthy/healthy6.jpg"><a href="#">洗手機(jī)</a></div>
							<div><img src="static/images/healthy/healthy15.jpg"><a href="#">小米監(jiān)控?cái)z像頭</a></div>
							</div>
						</li>
						<li><a href="">出行 兒童 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/child/child1.jpg"><a href="#">兒童滑板車(chē)</a></div>
							<div><img src="static/images/child/child2.jpg"><a href="#">遙控電動(dòng)</a></div>
							<div><img src="static/images/child/child6.jpg"><a href="#">兒童手表</a></div>
							<div><img src="static/images/child/child10.jpg"><a href="#">益智積木</a></div>
							<div><img src="static/images/child/child13.jpg"><a href="#">早教啟智</a></div>
							<div><img src="static/images/child/child12.jpg"><a href="#">兒童單車(chē)</a></div>
							<div><img src="static/images/child/child16.jpg"><a href="#">兒童玩具</a></div>
							<div><img src="static/images/child/child18.jpg"><a href="#">小米手環(huán)</a></div>
							<div><img src="static/images/child/child17.jpg"><a href="#">兒童相機(jī)</a></div>
							</div>
						</li>
						<li><a href="">路由器 手機(jī)配件 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/router/router1.jpg"><a href="#">路由器</a></div>
							<div><img src="static/images/router/router2.jpg"><a href="#">智能家庭</a></div>
							<div><img src="static/images/router/router6.jpg"><a href="#">手機(jī)殼</a></div>
							<div><img src="static/images/router/router9.jpg"><a href="#">智能門(mén)鎖</a></div>
							<div><img src="static/images/router/router18.jpg"><a href="#">打印機(jī)</a></div>
							</div>
						</li>
						<li><a href="">移動(dòng)電源 插線(xiàn)板</a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/battery/battery1.jpg"><a href="#">移動(dòng)電源</a></div>
							<div><img src="static/images/battery/battery2.jpg"><a href="#">電池</a></div>
							<div><img src="static/images/battery/battery3.jpg"><a href="#">接線(xiàn)板</a></div>
							<div><img src="static/images/battery/battery4.jpg"><a href="#">充電頭</a></div>
							<div><img src="static/images/battery/battery5.jpg"><a href="#">充電器</a></div>
							<div><img src="static/images/battery/battery8.jpg"><a href="#">車(chē)充</a></div>
							<div><img src="static/images/battery/battery10.jpg"><a href="#">自拍桿</a></div>
							<div><img src="static/images/battery/battery11.jpg"><a href="#">手機(jī)殼</a></div>
							<div><img src="static/images/battery/battery14.jpg"><a href="#">其他配件</a></div>
							</div>
						</li>
						<li><a href="">耳機(jī) 音箱 </a><i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/earphone/earphone1.jpg"><a href="#">藍(lán)牙耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone2.jpg"><a href="#">入耳式耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone3.jpg"><a href="#">轉(zhuǎn)換器</a></div>
							<div><img src="static/images/earphone/earphone5.jpg"><a href="#">k歌耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone7.jpg"><a href="#">頭戴耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone11.jpg"><a href="#">品牌耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone9.jpg"><a href="#">線(xiàn)控耳機(jī)</a></div>
							<div><img src="static/images/earphone/earphone15.jpg"><a href="#">小米AL音箱</a></div>
							<div><img src="static/images/earphone/earphone16.jpg"><a href="#">藍(lán)牙音箱</a></div>
							</div>
						</li>
						<li><a href="">生活 米兔</a> <i class="fa fa-angle-right"></i>
							<div class="contentPic_l_Phone">
							<div><img src="static/images/life/life1.jpg"><a href="#">旅行箱</a></div>
							<div><img src="static/images/life/life2.jpg"><a href="#">服飾</a></div>
							<div><img src="static/images/life/life4.png"><a href="#">沙發(fā)</a></div>
							<div><img src="static/images/life/life5.jpg"><a href="#">雙肩包</a></div>
							<div><img src="static/images/life/life6.jpg"><a href="#">運(yùn)動(dòng)鞋</a></div>
							<div><img src="static/images/life/life7.jpg"><a href="#">傘</a></div>
							<div><img src="static/images/life/life8.png"><a href="#">枕頭</a></div>
							<div><img src="static/images/life/life11.jpg"><a href="#">螺絲刀</a></div>
							<div><img src="static/images/life/life15.jpg"><a href="#">米兔</a></div>
							</div>
						</li>
					</ul>
			</div>
			<div class="contentPic_r"></div>
		</div>
		<div class="clear"></div>
	
		<div class="contentPic_ul">
			<div class="contentPic_ul_1">
				<ul>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-mobile-phone fa-2x"></span>選購(gòu)手機(jī)</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-gift fa-2x"></span>企業(yè)團(tuán)購(gòu)</li>
                    <li><span class="fa fa-facebook fa-2x"></span>F碼通道</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-file-text fa-2x"></span>米粉卡</li>
                    <li  style="margin-right: 12.7px;"><span class="fa fa-refresh fa-2x"></span>以舊換新</li>
                    <li><span class="fa fa-credit-card fa-2x"></span>話(huà)費(fèi)充值</li>
                </ul>

			</div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD1.jpg);margin-right:13px;"></div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD2.jpg);margin-right:13px;"></div>
			<div class="contentPic_ul_0" style="background:url(static/images/midAD3.jpg);"></div>
		</div>
		<!-- 小米閃購(gòu) -->
		<div class="contentShop">
			<h2>小米閃購(gòu)</h2>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid red;"></div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid orange;"></div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid green;"></div>
			<div class="contentShop_1" style="margin-right:12.7px;border-top:1px solid blue;"></div>
			<div class="contentShop_1" style="border-top:1px solid purple;"></div>
		</div>
		<div class="clear"></div>

		<div class="contentImg" style="background:url(static/images/longAD1.jpg)"></div>
		<div class="contentUL">
			<h2>手機(jī)</h2>
			<div class="Tab">
			查看全部
			<span><i class="fa fa-angle-right"></i></span>
			</div>
		</div>
		<div class="clear"></div>
		<div class="contentPhone">
			<div class="contentPhone_l"></div>
			<div class="contentPhone_r">
				<div style="margin-right:12.7px;"></div>
				<div style="margin-right:12.7px;"></div>
				<div style="margin-right:12.7px;"></div>
				<div></div>
				<div style="margin-right:12.7px;margin-top:12.7px;"></div>
				<div style="margin-right:12.7px;margin-top:12.7px;"></div>
				<div style="margin-right:12.7px;margin-top:12.7px;"></div>
				<div style="margin-top:12.7px"></div>
			</div>
		</div>
	
		<div class="contentImg" style="background:url(static/images/longAD2.jpg);"></div>
		<div class="contentUL"><h2>家電</h2>
			<div class="tab">
                    <ul>
                        <li>熱門(mén)</li>
                        <li>電視影音</li>
                        <li>電腦</li>
                        <li>家居</li>
                    </ul>
                </div>

		</div>
		<div class="contentPhone">
			<div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/家電AD1.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1"></div>
			<div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/家電AD2.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_2" style="margin-top:12.7px;">
				<div class="contentPhone_1_t"></div>
				<div class="contentPhone_1_b"></div>
			</div>
		</div>
	
		<div class="contentImg" style="background:url(static/images/longAD3.jpg);"></div>
		<div class="contentUL"><h2>智能</h2>
			<div class="tab">
                    <ul>
                        <li>熱門(mén)</li>
                        <li>出行</li>
                        <li>健康</li>
                        <li>酷玩</li>
                         <li>路由器</li>
                    </ul>
            </div>

		</div>
		<div class="contentPhone">
			<div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/智能AD1.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1"></div>
			<div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/智能AD2.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_2" style="margin-top:12.7px;">
				<div class="contentPhone_1_t"></div>
				<div class="contentPhone_1_b"></div>
			</div>
		</div>
	
		<div class="contentImg" style="background:url(static/images/longAD4.jpg);"></div>
		<div class="contentUL"><h2>搭配</h2>
			<div class="tab">
                    <ul>
                        <li>熱門(mén)</li>
                        <li>耳機(jī)音箱</li>
                        <li>電源</li>
                        <li>電池儲(chǔ)存卡</li>
                    </ul>
            </div>
		</div>
		<div class="contentPhone">
			<div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/搭配AD1.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1"></div>
			<div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/搭配AD2.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="contentPhone_2" style="margin-top:12.7px;">
				<div class="contentPhone_1_t"></div>
				<div class="contentPhone_1_b"></div>
			</div>
		</div>
	
		<div class="contentImg" style="background:url(static/images/longAD5.jpg);"></div>
		<div class="contentUL"><h2>配件</h2>
			<div class="tab">
                    <ul>
                        <li>熱門(mén)</li>
                        <li>保護(hù)套</li>
                        <li>貼膜</li>
                        <li>其他配件</li>
                    </ul>
            </div>

		</div>
		<div class="contentPhone">
			<div class="contentPhone_0" style="margin-right:12.7px;background:url(static/images/buy/配件AD1.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;"></div>
			<div class="contentPhone_1"></div>
			<div class="contentPhone_0" style="margin-right:12.7px;margin-top:12.7px;background:url(static/images/buy/配件AD2.jpg)"></div>
			<div class="contentPhone_1" style="margin-right:12.7px;margin-top:12.7px;"></div>
			<div class="c					

?? ???:西門(mén)大官人?? ??:2019-03-03 16:48:44
???? ??:導(dǎo)航布局常見(jiàn)的效果是下拉菜單。原理是通過(guò)css的hover來(lái)控制元素的顯示與隱藏

??? ??

?? ??