移动端开发-WebApp-淘宝商城(响应式布局：任何手机屏幕尺寸自适应)
介绍：移动端淘宝商城，采用响应式布局，任何手机屏幕自适应尺寸
来图镇楼：
代码展示：
<!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>声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 终于搞定了Delphi的Unicode支持(Tnt控件)
- 下一篇： RSA前端加密后端解密
