淘宝双十一页面（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 等:强大且易用的脚本加载器,特有 ...
随机推荐
- ES6 rest与扩展运算符
1.rest 变量将多余的参数放入数组中. function add(...values) { let sum = 0; for (var val of values) { sum += val; } ...
- 面向对象在JavaScript中的接口实现
接口是面向对象编程的基础.它是一组包括了函数型方法的数据结构,与类一样.都是编程语言中比較抽象的概念.比方生活中的接口.机顶盒.人们利用它来实现收看不同频道和信号的节目,它宛如对不同类型的信息进行集合 ...
- vs 已经加入了引用，编译还是提示没有加入引用
已经加入了引用,可是.编译还是通只是. 原因:项目总体框架是.Net FramWork4.5,nep中的框架也是4.5.而编译只是的project是4.0. 解决的方法:将编译只是的项目框架改为4.5
- 1M网速等于多少K
http://zhidao.baidu.com/question/157400316.html&__bd_tkn__=65ac453b343794385019e962bfb06bb8c710d ...
- vim 查找与替换
一.vim 查找 1. 正向查找 / 与 反向查找 ? 2. 退出查找 <Esc> 3. 跳转到下一处匹配 n ,跳转到上一处匹配 N 4. /<CR> 正向跳转到相同模式的下 ...
- win10+vs2017+asp.net MVC5+EF6+mysql 闪退问题，解决方法
1.安装 mysql-for-visualstudio-2.0.5.msi 2.安装 mysql-connector-net-6.10.7.msi 3.在VS2017 右键选中项目,管理NuGet程序 ...
- php减少损耗的方法之一 缓存对象
即把实例后的对象缓存起来(存入变量),当需要再次实例化时,先去缓存里查看是否存在.存在则返回.否则实例化.
- matlab中文显示乱码：控制台上的，编辑器的，图片中的
问题:matlab脚本与函数文件的中文注释显示乱码. 环境:matlab R2016a.Windows 10 home. 解决方案: step1 检查locale值 matlab命令行键入命令 fea ...
- 模拟struts2
利用到的技术:dom4j和xpath 自己写一个Filter 在doFilter中拦截请求 // 2.1 得到请求资源路径 String uri = request.getReq ...
- mongodb的mongod.lock文件及oplog文件
在mongodb的启动时,在数据目录下,会生成一个mongod.lock文件.如果在正常退出时,会清除这个mongod.lock文件,若要是异常退出,在下次启动的时候,会禁止启动,从而保留一份干净的一 ...