標籤：
前言：
現在移動互連網發展火熱，手機上網的使用者越來越多，甚至大有超過pc訪問的趨勢。所以，用web程式做出仿原生效果的行動裝置 App，也變得越來越流行了。一個偶然的機會，由php轉到javascript，不知不覺，已經快兩年了。一直有一種想寫一個webapp應用程式框架的衝動，但是各種原因，終究沒有付出實踐。於是打算從做一個簡單的webapp應用開始，萬事開頭難，今天就搭一個簡單的介面作為開始。
HTML代碼：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>單頁應用</title> <link rel="stylesheet" href="css/common.css" type="text/css"/></head><body><div class="container"> <header> <h3>sameple test </h3> </header> <ul class="root"> <li class="page">1</li> <li class="page">2</li> <li class="page">3</li> <li class="page">4</li> <li class="page">5</li> <li class="page">6</li> <li class="page">7</li> <li class="page">8</li> <li class="page">9</li> <li class="page">10</li> </ul> <div class="left">prev</div> <div class="right">next</div> <footer> <h4>(c)2015 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;}
示範：http://runjs.cn/detail/o4ql6f6a
細心的話，你會發現左上方有一個“亂碼”，其實那是因為所有的頁面都堆疊在一起，造成頁數看不清了。這正是我們下一篇要解決的問題之一。
webapp應用--搭建介面
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
