webapp应用--搭建界面

前言:

     现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势。所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了。一个偶然的机会,由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

细心的话,你会发现左上角有一个“乱码”,其实那是因为所有的页面都堆叠在一起,造成页数看不清了。这正是我们下一篇要解决的问题之一。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。