Objective:
Mobile Internet is now booming, more and more users of mobile internet, even more than the trend of PC access. So it's becoming more and more popular to use web programs to make mobile apps that mimic native effects. A chance, from PHP to JavaScript, unconsciously, has been almost two years. There has always been a desire to write a WebApp application framework, but a variety of reasons, after all, did not pay the practice. So I'm going to start with a simple WebApp application, starting with a simple interface today, and everything starts hard.
HTML code:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "UTF-8"> <title>Single page Application</title> <Linkrel= "stylesheet"href= "Css/common.css"type= "Text/css"/></Head><Body><Divclass= "Container"> <Header> <H3>Sameple Test</H3> </Header> <ulclass= "root"> <Liclass= "page">1</Li> <Liclass= "page">2</Li> <Liclass= "page">3</Li> <Liclass= "page">4</Li> <Liclass= "page">5</Li> <Liclass= "page">6</Li> <binclass= "page">7</Li> <Liclass= "page">8</Li> <Liclass= "page">9</Li> <Liclass= "page">10</Li> </ul> <Divclass= "Left">Prev</Div> <Divclass= "Right">Next</Div> <Footer> <h4>(c) by Ouyangli</h4> </Footer></Div></Body></HTML>
Css:
UL, Li {margin:0; padding:0; List-style:none;} h3,h4,p {margin:0; padding:0;} header {Position:absolute; width:100%; top:0; left:0; Z-index:9;} Header H3 {Text-align:center; Height:3em; Line-height:3em; border-bottom:1px solid Green;}. container {position:absolute; width:320px; height:480px; left:10%; Top:2em;}. root {position:absolute; width:100%; height:100%; top:0; left:0; -webkit-perspective:1000; -webkit-user-select:none; -webkit-transform-style:preserve-3d;}. page {position:absolute; width:100%; height:100%; Overflow:hidden; border:1px solid Green;}. Left {left:0;}. right {right:0;}. left,.right {position:absolute; top:45%; Width:3em; Height:3em; Line-height:3em; Text-align:center; border-radius:15%; border:1px dashed blue;}. Left:hover,.right:hover {background-color: #33ff44; Cursor:pointer;} Footer {Position:absolUte width:100%; bottom:0;} h4 {height:3em; Line-height:3em; Text-align:center; border-top:1px solid Green;}
Demo: http://runjs.cn/detail/o4ql6f6a
Careful words, you will find a "garbled" in the upper left corner, in fact, that is because all the pages are stacked together, resulting in the page can not see clearly. This is one of the problems we are going to solve next.
WebApp Application--building interface
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
