<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>Document</title> <link rel="stylesheet" type="text/css" href="public/reset.css"> <style type="text/css"> .top{ top: 0; } .footer{ bottom: 0; } .top,.footer{ position: fixed; left: 0; text-align: center; line-height: 50px; height: 50px; width: 100%; background-color: #0dcecb; color: #fff; z-index: 100; } #wrapper{ position: absolute; left: 0; top: 50px; bottom: 50px; width: 100%; background-color: #fafafa; z-index: 10; } .news-lists .item{ height: 40px; line-height: 40px; border-bottom: 1px solid #CFCFCF; } #pullDown, #pullUp { background:#fff; height:40px; line-height:40px; padding:5px 10px; border-bottom:1px solid #ccc; font-weight:bold; font-size:14px; color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon { display:block; float:left; width:40px; height:40px; background:url(public/[email protected]) 0 0 no-repeat; -webkit-background-size:40px 80px; background-size:40px 80px; -webkit-transition-property:-webkit-transform; -webkit-transition-duration:250ms; } #pullDown .pullDownIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullDown.flip .pullDownIcon { -webkit-transform:rotate(-180deg) translateZ(0); } #pullUp.flip .pullUpIcon { -webkit-transform:rotate(0deg) translateZ(0); } #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon { background-position:0 100%; -webkit-transform:rotate(0deg) translateZ(0); -webkit-transition-duration:0ms; -webkit-animation-name:loading; -webkit-animation-duration:2s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-webkit-keyframes loading { from { -webkit-transform:rotate(0deg) translateZ(0); } to { -webkit-transform:rotate(360deg) translateZ(0); } } </style> </head> <body> <div class="top"> 页面导航 </div> <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> </div> <div class="news-lists" id="news-lists"> <div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div> <div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div> <div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div> <div class="item">根据市场奖惩制度，结合市场各部门提供的数据
