淘宝双十一页面（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 等:强大且易用的脚本加载器,特有 ...
随机推荐
- ushare编译之 ‘struct sockaddr_storage’ has no member named ‘s_addr’
编译ushare的时候出现'struct sockaddr_storage' has no member named 's_addr' 这是使用libupnp1.6.19出现版本号不兼容的错误. 解决 ...
- IE对CSS样式的数量和大小的限制
项目中遇到的问题,css写的样式无法渲染,各种百度后发现大概是这个原因: IE对CSS样式的数量和大小的限制 文档中只有前31个link或style标记关联的CSS能够应用. 从第32个开始,其标记关 ...
- mysql启动參数(/etc/my.cnf)具体解释汇总
在linux以下的/etc/my.cnf的參数具体解释汇总 MYSQL–my.cnf配置中文具体解释 basedir = path 使用给定文件夹作为根文件夹(安装文件夹). character- ...
- Solr局部或指定字段更新之set用法
solr wiki文档也有 http://yonik.com/solr/atomic-updates/ java code public static void up ...
- lambda表达式转换sql
using System; using System.Collections.Generic; using System.ComponentModel; using System.Linq; usin ...
- 修改Oracle SGA，以提高oracle性能
在正常情况下,查询非常慢. 1.检查SGA大小,以DBA身份连接到oracle数据库,输入show sga. 2.如果SGA过小,请修改其大小 修改SGA必须保持的原则 1).sga_target不能 ...
- 搭建SpringMVC+Hibernate4+Spring3+Ajax+Maven项目
首先新建一个Maven项目.百度一下会有非常多实例,这里就不介绍了,直接奔主题. 如题:这里使用的是Hibernate4和Spring3,使用的JPA和Spring注解,然后JDK版本号是1.7 以下 ...
- P13在O(1)时间内删除链表结点
package offer; //在 O(1)时间删除链表结点 public class Problem13 { public static void main(String[] args) { Li ...
- 【转】AngularJs 弹出框 model（模态框）
原文转至 http://blog.csdn.net/violet_day/article/details/17170585 $modal是一个可以迅速创建模态窗口的服务,创建部分页,控制器,并关联他们 ...
- Windows 命令集合
查看端口占用 查看8080端口使用情况: C:\>netstat -aon|findstr "8080" 结果:TCP 0.0.0.0:8080 0 ...