淘宝双十一页面（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 等:强大且易用的脚本加载器,特有 ...
随机推荐
- 【Android】内存卡图片读取器，图库app
上一篇<[Android]读取sdcard卡上的全部图片而且显示,读取的过程有进度条显示>(点击打开链接)在真机上測试非常有问题.常常遇到内存溢出.卡死的情况.由于如今真机上的内存上,2G ...
- c#中使用ABCpdf处理PDF,so easy
QQ交流群:276874828 (ABCpdf ) 这几天项目中需要将页面导成PDF,刚开始使用iTextSharp,觉得在分页处理上比较复杂,后来无意中看到了ABCpdf,使用非常简单,并将一些常 ...
- centos6.6安装mysql5.5
在mysql官网下载mysql-5.5.54-linux2.6-x86_64.tar.gz解压:tar -zxvf mysql-5.5.54-linux2.6-x86_64.tar.gz修改名字mv ...
- Laravel 5.4的本地化
简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...
- 还需要学习的十二种CSS选择器
在前面的文章中,我们在介绍了<五种你必须彻底了解的CSS选择器>,现在向大家介绍,还需要学习的另外十二种CSS选择器.如果你还没有用过,就好好学习一下,如果你已经熟知了就当是温习. 一.X ...
- 在一个JS文件中引用另一个JS文件
方法一,在调用文件的顶部加入下例代码: document.write(”<script language=javascript src=’/js/import.js’></scrip ...
- Erlang节点重启导致的incarnation问题（转）
转自霸爷的博客: 转载自系统技术非业余研究 本文链接地址: Erlang节点重启导致的incarnation问题 遇到个问题, =ERROR REPORT==== 10-Mar-2016::09:44 ...
- 【TensorFlow-windows】(七) CNN之VGG-net的测试
主要内容: 1.CNN之VGG-net的测试 2.该实现中的函数总结 平台: 1.windows 10 64位 2.Anaconda3-4.2.0-Windows-x86_64.exe (当时TF还不 ...
- python读写数据篇
一.读写数据1.读数据 #使用open打开文件后一定要记得调用文件对象的close()方法.比如可以用try/finally语句来确保最后能关闭文件.file_object = open('thefi ...
- PHP错误调试
一:错误类型举例 1.语法错误:一般是语句最后缺少分号.缺少单引号或双引号.for循环或函数缺少花括号.缺少变量标示符$ 2.定义错误:一般是调用不存在的变量.调用不存在的函数或者类 3.逻辑错误:代 ...