淘宝双十一页面（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 等:强大且易用的脚本加载器,特有 ...
随机推荐
- 转：static关键字的总结
static关键字的总结 C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. ...
- java中类型的隐式转换
byte+byte=int,低级向高级是隐式类型转换,高级向低级必须强制类型转换,byte<char<short<int<long<float<double
- android自己定义TextView
Android控件中的TextView控件仅仅有一个输入框.可是为了用于的操作方便我们应该实现一些功能: 1. 能够直接将内容删除的功能button 2. 可以记录用户曾经输入的数据,同一时候可以将数 ...
- Linux 进程状态 说明
Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个程序,就必然会产生很多的进程,而每个进程会有不同的状态. 在下文将对进程的 R.S.D.T.Z.X 六种状态做个说明. 进程状态: S ...
- Windows下Nginx+Web.py+FastCGI服务搭建
在搭建之前,有必要了解下什么是fastcgi,但鉴于我自己也不大了解,这里就不搬门弄斧了,请参考各种百科和官网资料. 1.资源下载 python下载地址:戳这里webpy下载地址:戳这里flup下载地 ...
- sql 时间转换格式
convert(varchar(10),字段名,转换格式) CONVERT(nvarchar(10),count_time,121)CONVERT为日期转换函数,一般就是在时间类型(datetime, ...
- 1194: [HNOI2006]潘多拉的盒子
1194: [HNOI2006]潘多拉的盒子 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 464 Solved: 221[Submit][Stat ...
- 大白第一章第四节dp例题
入口 UVALive - 3882 #include<cstdio> using namespace std; ; int n,m,k,f[N]; int main(){ //f[i]表示 ...
- git查看某一次commit里面的内容，即本次commit相对于原来的版本进行了哪些修改
1 知道commit id的话 git show commit-id 2 想要查看某次commit的某个文件进行了哪些修改 git show commit-id filename
- 子串的索引 str.index(sub) sub必须存在
ii.lstrip(' ')[0:2]=='//' ii.lstrip(' ').index('//')==0