淘宝双十一页面（Flexible）demo
下面的代码是看了大漠 使用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的更多相关文章
- 淘宝双十一页面（Flexible）
以下demo点我下载 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- ios 类似的效果淘宝商品详细页面
今天试着写ios 分类似影响淘宝的商品详细页面 我使用第三方库EGORefreshTableHeaderView有一个下拉效果刷新PWLoadMoreTableFooterView上拉电阻负载许多其他 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- (转)从P1到P7——我在淘宝这7年
(一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘宝已经七周年了.很多人第一句话就是七年痒不痒,老实说,也曾经痒过,但往往都是一痒而过,又投入到水深火热的工作中去.回家之后 ...
- 淘宝弹性布局方案lib-flexible实践
2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...
- 从P1到P7——我在淘宝这7年（转）
作者: 赵超 发布时间: 2012-02-25 14:47 阅读: 114607 次 推荐: 153 [收藏] (一) 2011-12-08 [原文链接] 今天有同事恭喜我,我才知道自己在淘 ...
- python爬虫学习(三)：使用re库爬取"淘宝商品"，并把结果写进txt文件
第二个例子是使用requests库+re库爬取淘宝搜索商品页面的商品信息 (1)分析网页源码 打开淘宝,输入关键字“python”,然后搜索,显示如下搜索结果 从url连接中可以得到搜索商品的关键字是 ...
- 从P1到P7——我在淘宝这7年 - 子柳撰写
http://kb.cnblogs.com/page/132752/来自博客园的整理版本,作者是子柳,博客地址:http://blog.sina.com.cn/calvinzhaoc (一) 2011 ...
- 淘宝的前端类库-KISSY
KISSY(淘宝) KISSY是淘宝的前端类库,几乎在淘宝的每个页面上都能看到它的身影. KISSY提供稳定的核心,包括 oo.dom.Event.Anim.Ajax 等:强大且易用的脚本加载器,特有 ...
随机推荐
- 谈 API 的撰写 - 架构
在 谈 API 的撰写 - 总览 里我们谈到了做一个 API 系统的基本思路和一些组件的选型,今天谈谈架构. 部署 首先要考虑的架构是部署的架构.部署的方案往往会深刻影响着系统的结构.我们需要问自己一 ...
- apue学习笔记（第十六章 网络IPC：套接字）
本章将考察不同计算机(通过网络连接)上的进程相互通信的机制:网络进程间通信. 套接字描述符 正如使用文件描述符访问文件,应用程序用套接字描述符访问套接字. 许多处理文件描述符函数(如read和writ ...
- 自己定义字体之BMFont的使用
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- C# DataTable 总结
(1)构造函数 DataTable() 不带参数初始化DataTable 类的新实例. DataTable(string tableName) 用指定的表名初始化DataTable 类的新实例. ...
- 邮箱大师WPZ协议包
WIRELESS Z PACKET: i8-version(WZPUnit.getVersion() & 3 | WZPUnit.MAGIC_MASK = 1 & 3 | -48 = ...
- TP 上传excel
<?php class ExcelAction extends Action{ public function read($filename,$encode='utf-8'){ vendor(' ...
- excel表格定义导入到powerdesigner脚本
打开powerdesigner,shift + ctrl + X 打开脚本窗口 输入执行的脚本,点 run 即可. 简单的导入Excel脚本 '开始 Option Explicit Dim mdl ' ...
- onvif 开发之video streamer---onvif实现功能和经验
目录(?)[-] 一产生onvif源码框架 从wsdl生成C头文件 从头文件生成源码框架 二创建soap运行环境 三RTSP视频对接 实现GetCapabilities命令 实现GetServices ...
- UIScrollView奇葩不滑动
首先要说声尼玛,真奇葩,从来都没有遇到过这个问题,首先描述一下背景: 我是用XIB拖拽了一个UIScrollView在View上,然后设置了frame,在ViewDidLoad里面,设置了scroll ...
- 【BZOJ4200】[Noi2015]小园丁与老司机 DP+最小流
[BZOJ2839][Noi2015]小园丁与老司机 Description 小园丁 Mr. S 负责看管一片田野,田野可以看作一个二维平面.田野上有 nn 棵许愿树,编号 1,2,3,…,n1,2, ...