介紹：移動端淘寶商城，採用響應式佈局，任何手機屏幕自適應尺寸
來圖鎮樓：
代碼展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>自營商城</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/swiper.min.css">
<!--底部固定導航欄-->
<link href="css/xixi.css" rel="stylesheet" type="text/css" />
<script src="js/swiper.min.js"></script>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都應該在此事件發生後調用，否則會出現plus is undefined。"
});
</script>
</head>
<body>
<div id="shop_container">
<!--橫欄切換-->
<header>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/1.jpg"/></div>
<div class="swiper-slide"><img src="img/2.jpg"/></div>
<div class="swiper-slide"><img src="img/3.jpg"/></div>
</div>
<div class="swiper-pagination"></div>
</div>
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
//pagination : '#swiper-pagination1',
autoplay :1000
})
</script>
</header>
<!--logo-->
<section >
<img class="logo" src="img/logo.png" />
</section>
<section class="ser">
<input type="text" />
<span></span> <!--span就是個佔位符，添加背景圖片-->
</section>
<nav class="nav clear_gap">
<a href="#">
<img src="img/1.png"/>
<p>分類查詢</p>
</a>
<a href="#">
<img src="img/2.png"/>
<p>購物</p>
</a>
<a href="#">
<img src="img/3.png"/>
<p>我的</p>
</a>
<a href="#">
<img src="img/4.png"/>
<p>充值</p>
</a>
<a href="#">
<img src="img/5.png"/>
<p>充值</p>
</a>
</nav>
<!--母嬰專場-->
<section class="pic_my">
<a class="m_left">
<img src="img/_40img1_1.png" />
</a>
<a class="m_right">
<img src="img/_40img1_4.png" />
<img class="m_right_top" src="img/index_hotsale.png" />
</a>
</section>
<!--手機-->
<section class="detail_nav ">
<a href="#"><span>手機</span></a><a href="#"><span>手機套</span></a><a href="#"><span>手機卡</span></a><a href="#"><span>手機貼膜</span></a>
<a href="#"><span>手機電池</span></a><a href="#"><span>讀卡器</span></a><a href="#"><span>路由器</span></a><a href="#"><span>平板電腦</span></a>
</section>
<!--購物車-->
<section class="gouwu">
<a href="#">
<img src="img/t1.png" />
<p>購物車</p>
</a>
<a href="#">
<img src="img/t2.png" />
<p>出國</p>
</a>
<a href="#">
<img src="img/t3.png" />
<p>旅遊</p>
</a>
<a href="#">
<img src="img/t4.png" />
<p>電影</p>
</a>
</section>
<!--掌上專享特惠-->
<section class="zhangshang">
<h2>掌上專享特惠</h2>
</section>
<section class="zhangshang_pic">
<img src="img/rBEhWVMqgc8IAAAAAABZ260QdDsAAKY-wL1HsQAAFnz698.jpg" />
</section>
<!--值得買-->
<section class="zhangshang">
<h2>值得買</h2>
</section>
<!--媽咪寶貝-->
<section class="pic_my">
<a class="m_left">
<img src="img/baobei.jpg" />
</a>
<a class="m_right">
<img src="img/dian.jpg" />
<img class="m_right_top" src="img/san.jpg" />
</a>
</section>
<!--掌上秒殺-->
<section class="zhangshang">
<h2>掌上秒殺</h2>
</section>
<section class="ms_pic">
<a href="#">
<img src="img/shenghuo.jpg" />
</a>
<a class="ms_cen" href="#">
<img src="img/lvxing.jpg" />
</a>
<a href="#">
<img src="img/lvxing.jpg" />
</a>
</section>
<!--秒殺文字-->
<section class="ms_font">
<a href="#">
<p class="ms_pic_p">¥10.00</p>
<p class="ms_pic_p1">¥100</p>
</a>
<a href="#">
<p class="ms_pic_p">¥10.00</p>
<p class="ms_pic_p1">¥100</p>
</a>
<a href="#">
<p class="ms_pic_p">¥10.00</p>
<p class="ms_pic_p1">¥100</p>
</a>
</section>
<!--微動超市-->
<section class="zhangshang">
<h2>微動超市</h2>
</section>
<section class="zhangshang_pic">
<img src="img/rBEhVlMsCacIAAAAAADN82rIEPoAAKnpAJKUEwAAM4L751.jpg" />
</section>
<!--四張圖片-->
<section class="fushi">
<div class="fushi_top">
<a href="#">
<img src="img/f1.jpg"/>
</a>
<a href="#">
<img src="img/f2.jpg"/>
</a>
</div>
<div class="fushi_bottom">
<a href="#">
<img src="img/f3.jpg"/>
</a>
<a href="#">
<img src="img/f4.jpg"/>
</a>
</div>
</section>
<!--登錄-->
<section class="denglu">
<div class="denlu_left">
<a href="#">登錄</a><span class="sp">|</span>
<a href="#">註冊</a>
</div>
<div class="denlu_right">
<a class="shuxian" href="#">反饋</a><span >|</span>
<ahref="#">回到頂部</a>
</div>
</section>
<!--版本-->
<section class="banben">
<a href="#">標準版</a>
<a class="red" href="#">標準版</a>
<a href="#">標準版</a>
</section>
</div>
<div style="height: 80px"></div>
<!--底部固定導航欄-->
<div class="float_layer" id="miaov_float_layer" >
<h2>
<a href="#">
<img src="img/y.png" />
<p>首頁</p>
</a>
<a href="#">
<img src="img/s.png" />
<p>搜索</p>
</a>
<a href="#">
<img src="img/g.png" />
<p>購物車</p>
</a>
<a href="#">
<img src="img/w.png" />
<p>我的中心</p>
</a>
</h2>
</div>
</body>
</html>