移动端开发 资源分享

1. 移动端开发

从零开始学习移动端Web开发

手机分辨率和webapp分辨率的关系

移动端适配之rem.js

css适配不同分辨率屏幕

移动WEBAPP开发常规CSS样式总结

移动端页面开发的两种方式

2. 常用插件推荐

移动端手势库Hammer.js学习

2015年最全的移动WEB前端UI框架

模板页面

3. 例子

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>手机app通用模板爱旅游在线个人中心页面模板</title>
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <link href="http://www.17sucai.com/preview/1527619/2019-02-28/noun/css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>

  <!--

         * 17素材vip建站专区模块代码
         * 详尽信息请看官网:http://www.17sucai.com/pins/vip
         *
         * Copyright , 温州易站网络科技有限公司版权所有
         *
         * 请尊重原创,未经允许请勿转载。
         * 在保留版权的前提下可应用于个人或商业用途

        -->

  <section class="aui-flexView">

    <section class="aui-scrollView">
      <div class="aui-head-noun">
        <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/head.png" alt="">
        <div class="aui-flex aui-flex-auto">
          <div class="aui-user-img">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/user-logo-004.png" alt="">
          </div>
          <div class="aui-flex-box">
            <h2>李嘉桦</h2>
          </div>
          <div class="aui-arrow-right">
            <h3>每日签到</h3>
          </div>
        </div>
      </div>
      <div class="aui-noun-vip">
        <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-vip.png" alt="">
      </div>
      <div class="aui-palace aui-palace-one">
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <h3>0</h3>
          </div>
          <div class="aui-palace-grid-text">
            <h2>优惠券</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <h3>1000</h3>
          </div>
          <div class="aui-palace-grid-text">
            <h2>积分</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <h3>190</h3>
          </div>
          <div class="aui-palace-grid-text">
            <h2>放假基金</h2>
          </div>
        </a>
      </div>
      <div class="aui-palace aui-palace-two">
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-001.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>全部订单</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-002.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>待付款</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-003.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>待出游</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-004.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>我的点评</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-005.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>我的收藏</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-006.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>消息</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-007.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>分享给好友</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-008.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>您的意见</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-009.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>客服热线</h2>
          </div>
        </a>
        <a href="javascript:;" class="aui-palace-grid">
          <div class="aui-palace-grid-icon">
            <img src="http://www.17sucai.com/preview/1527619/2019-02-28/noun/images/icon-item-010.png" alt="">
          </div>
          <div class="aui-palace-grid-text">
            <h2>更多</h2>
          </div>
        </a>
      </div>
      <div style="height:150px;"></div>
    </section>
    <footer class="aui-footer aui-footer-fixed">
      <a href="javascript:;" class="aui-tabBar-item">
        <span class="aui-tabBar-item-icon">
          <i class="icon icon-loan"></i>
        </span>
        <span class="aui-tabBar-item-text">度周末</span>
      </a>
      <a href="javascript:;" class="aui-tabBar-item">
        <span class="aui-tabBar-item-icon">
          <i class="icon icon-credit"></i>
        </span>
        <span class="aui-tabBar-item-text">目的地</span>
      </a>
      <a href="javascript:;" class="aui-tabBar-item ">
        <span class="aui-tabBar-item-icon">
          <i class="icon icon-meTo"></i>
        </span>
        <span class="aui-tabBar-item-text">定制</span>
      </a>
      <a href="javascript:;" class="aui-tabBar-item ">
        <span class="aui-tabBar-item-icon">
          <i class="icon icon-my"></i>
        </span>
        <span class="aui-tabBar-item-text">发现</span>
      </a>
      <a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
        <span class="aui-tabBar-item-icon">
          <i class="icon icon-me"></i>
        </span>
        <span class="aui-tabBar-item-text">我的</span>
      </a>
    </footer>
  </section>

</body>

</html>
View Code

猜你喜欢

转载自www.cnblogs.com/justSmile2/p/10491562.html