下面的代码是看了大漠 使用Flexible实现手淘H5页面的终端适配 做的一个demo。

 <!DOCTYPE html>

 <html lang="en" ng-app="sections">

     <head>

         <meta charset="utf-8">

         <meta content="yes" name="apple-mobile-web-app-capable">

         <meta content="yes" name="apple-touch-fullscreen">

         <meta content="telephone=no,email=no" name="format-detection">

         <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

         <title>双十一demo(Flexible)</title>

         <style type="text/css">

             /*reset*/

             *{

                 margin:0;

                 padding:0;

             }

             html{

                 box-sizing: border-box;

             }

             body{

                 max-width:10.0rem;

                 margin:0 auto;

                 overflow:hidden;

             }

             ul,li{

                 list-style:none;

             }

             /*font-size*/

             div {

                 font-size:12px;

             }

             [data-dpr="2"] div{

                 font-size:24px;

             }

             [data-dpr="3"] div{

                 font-size:36px;

             }

             .font14{

                 font-size:14px;

             }

             [data-dpr="2"] .font14{

                 font-size:28px;

             }

             [data-dpr="3"] .font14{

                 font-size:42px;

             }

             .font16{

                 font-size: 16px;

             }

             [data-dpr="2"] .font16{

                 font-size: 32px;

             }

             [data-dpr="3"] .font16{

                 font-size: 48px;

             }

             .font18{

                 font-size: 18px;

             }

             [data-dpr="2"] .font18{

                 font-size: 36px;

             }

             [data-dpr="3"] .font18{

                 font-size: 54px;

             }

             .font20{

                 font-size: 20px;

             }

             [data-dpr="2"] .font20{

                 font-size: 40px;

             }

             [data-dpr="3"] .font20{

                 font-size: 60px;

             }

             /*activity*/

             .act-wrap{

                 position: absolute;

                 top: 0;

                 right: 0;

                 bottom: 0;

                 left: 0;

                 background-color: #f5294c;

                 overflow-y: auto;

                 padding-bottom: 0.133333rem;

             }

             .act-header{

                 width:10.0rem;

                 height:6.533333rem;

             }

             .act-con li{

                 position:relative;

                 margin:0 0.133333rem 1px 0.133333rem;

                 background-color:#fff;

             }

             .clearfix:after{

                 content: "";

                 clear:both;

                 display:table;

             }

             .figure{

                 margin-top:0.16rem;

                 margin-bottom:0.16rem;

                 width:2.346667rem;

                 height:2.346667rem;

                 float:left;

                 background-color:#6d91cf;

             }

             .figcaption{

                 margin-left:2.56rem;

                 padding-top:0.16rem;

             }

             .title{

                 height:1.2rem;

                 overflow:hidden;

             }

             .title a{

                 color:#000;

             }

             .price{

                 padding-top:0.133333rem;

                 padding-bottom:0.133333rem;

             }

             .price span{

                 display:inline-block;

                 padding:0.053333rem 0.08rem;

                 background-color:#f5294c;

                 color:#fff;

                 text-align:center;

                 border-radius:2px;

                 vertical-align:middle;

             }

             .price strong{

                 color:#f5294c;

                 vertical-align:middle;

             }

             .price small{

                 color:#f5294c;

                 vertical-align:middle;

             }

             .type{

                 color:#fd5100;

             }

             .btn{

                 position:absolute;

                 padding:0.06667rem 0.26667rem;

                 text-align:center;

                 background-color:#f5294c;

                 color:#fff;

                 right:0.2rem;

                 bottom:0.2rem;

                 border-radius:2px;

             }

         </style>

     </head>

     <body>

         <div class="act-wrap" ng-controller="activityctrl">

             <div class="act-header">

                 <img src="{{activity.sections[0].brannerimg}}" alt="">

             </div>

             <ul class="act-con">

                 <li class="item" ng-repeat="item in activity.sections[0].items">

                     <div class="clearfix">

                         <a class="figure" href="{{item.link}}">

                             <img src="{{item.imgsrc}}">

                         </a>

                         <div class="figcaption">

                             <div class="title font16"><a href="">{{item.poductname}}</a></div>

                             <div class="price">

                                 <span class="font14">{{item.activitydate}}</span>

                                 <strong class="font20">¥{{item.price}}</strong>

                                 <small class="font14">{{item.preferential}}</small>

                             </div>

                             <div class="type font16">{{item.activitytype}}</div>

                             <a class="btn font16">{{item.activityname}}</a>

                         </div>

                     </div>

                 </li>

             </ul>

         </div>

         <script type="text/javascript" src="js/Angular.js"></script>

         <script type="text/javascript">

         (function(){

             var app = angular.module('sections',[]);

             app.controller('activityctrl',['$scope',function($scope){

                 $scope.activity = activity;

                 }

             ]);

             var activity = {

                 sections:[{

                     "brannerimg":"##",

                     items:[{

                         "link":"##",

                         "imgsrc":"",

                         "poductname":"Carter's1年式灰色长袖连体衣包脚爬服",

                         "activitydate":"双11价",

                         "price":"299",

                         "preferential":"满400减100",

                         "activitytype":"热卖5885件",

                         "shoplink":"##",

                         "activityname":"马上抢"

                     },

                     {

                         "link":"##",

                         "imgsrc":"",

                         "poductname":"光泽裤！[不起球不退色不勾丝]",

                         "activitydate":"双11价",

                         "price":"8",

                         "preferential":"满50减5",

                         "activitytype":"热卖5885件",

                         "shoplink":"##",

                         "activityname":"马上抢"

                     }]

                 }]

             };

         })();

         </script>

     </body>

 </html>

淘宝双十一页面（Flexible）demo的更多相关文章

  1. 淘宝双十一页面（Flexible）

    以下demo点我下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. ios 类似的效果淘宝商品详细页面

    今天试着写ios 分类似影响淘宝的商品详细页面 我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...

  3. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  4. (转)从P1到P7——我在淘宝这7年

    (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘宝已经七周年了.很多人第一句话就是七年痒不痒,老实说,也曾经痒过,但往往都是一痒而过,又投入到水深火热的工作中去.回家之后 ...

  5. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  6. 从P1到P7——我在淘宝这7年（转）

    作者: 赵超  发布时间: 2012-02-25 14:47  阅读: 114607 次  推荐: 153   [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...

  7. python爬虫学习(三)：使用re库爬取"淘宝商品"，并把结果写进txt文件

    第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...

  8. 从P1到P7——我在淘宝这7年 - 子柳撰写

    http://kb.cnblogs.com/page/132752/来自博客园的整理版本,作者是子柳,博客地址:http://blog.sina.com.cn/calvinzhaoc (一) 2011 ...

  9. 淘宝的前端类库-KISSY

    KISSY(淘宝) KISSY是淘宝的前端类库,几乎在淘宝的每个页面上都能看到它的身影. KISSY提供稳定的核心,包括 oo.dom.Event.Anim.Ajax 等:强大且易用的脚本加载器,特有 ...

随机推荐

  1. 微信小程序 - gulp插件压缩（代码、图片等）

    最后更新时间: 2018.7.18 :更新了所有package.json插件版本以及修复极个别问题. 2018.8.12 : 增加提示,所有标签必须闭合(不然打包会报错) 2018.10.13:需要用 ...

  2. Linux系统编程_1_文件夹读取(实现简单ls命令)

    闲来无事.随便写写,实现简单的ls命令: | 1 #include <stdio.h> | 2 #include <stdlib.h> | 3 #include <dir ...

  3. Build Your Hexo Blog (On Github)

    超简单,比jekyll好多了! 看个Demo http://kevinjmh.github.io/ 了解Hexo Hexo是一个由Node.js驱动的,简单.快速.强大的Blog框架.可以快速的生成静 ...

  4. Java 命名规则

    http://lpacec.iteye.com/blog/25180包名:包名是全小写的名词,中间可以由点分隔开,例如:java.awt.event; 类名:首字母大写,通常由多个单词合成一个类名,要 ...

  5. Spring学习十二----------Bean的配置之@ImportResource和@Value

    © 版权声明:本文为博主原创文章,转载请注明出处 @ImportResource -引入XML配置文件 @Value -从配置文件中获取值 实例 1.项目结构 2.pom.xml <projec ...

  6. dede内容页调用点击数

     <script src="{dede:field name='phpurl'/}/count.php?view=yes&aid={dede:field name='id'/} ...

  7. 用buildroot qemu 执行 Android 系统

    准备 qemu. 编译 arm 的执行环境 $ wget http://wiki.qemu-project.org/download/qemu-2.0.0.tar.bz2 $ tar xzvf qem ...

  8. Spring Resource框架体系介绍

    Resource介绍 在使用spring作为容器进行项目开发中会有很多的配置文件,这些配置文件都是通过Spring的Resource接口来实现加载,但是,Resource对于所有低级资源的访问都不够充 ...

  9. Spring Boot从入门到实战：整合Web项目常用功能

    在Web应用开发过程中,一般都涵盖一些常用功能的实现,如数据库访问.异常处理.消息队列.缓存服务.OSS服务,以及接口日志配置,接口文档生成等.如果每个项目都来一套,则既费力又难以维护.可以通过Spr ...

  10. Maven上传本地jar

    1. 将Jar包安装到本地仓库 -- DgroupId和DartifactId构成了该jar包在pom.xml的坐标, 对应依赖的DgroupId和DartifactId    -- Dfile表示需 ...