为离子应用创建目标网页

时间:2015-10-20 17:43:12

标签: css ionic

我正在尝试使用离子版为移动应用创建一个登录页面。

Codepen

页面应该

  1. 有蓝色背景
  2. 在页面中央显示应用标题
  3. 在App-title
  4. 下方显示登录按钮

    我已经部分完成了所有这些工作,但我不确定我是否使用了正确的离子技术。

    我的css看起来像这样:

    .login-page {
      background-color: lightblue;
      width: 100%;
      height: 100%;
      position: relative;
      h1{
         position: relative;
         top: 100px;
         left: 40%;
         font-size: 24px;     
         margin: auto 0;
      }
      a {
        position: relative;
        top: 150px;
        left: 45%;
      }
    }
    

    有更好的方法吗?

1 个答案:

答案 0 :(得分:1)

我为你制作了一个小型演示,

Plunker

<强> HTML

#include <atomic>
std::atomic<uint64_t> pCnt; // Made uint64 for bigger range as @IgnisErus mentioned
std::atomic<uint64_t> icounter;

int getNext() {
    return ++icounter; // Pre increment is faster 
}

void primeCnt() {
    ++pCnt;
}

<强>的style.css

<ion-view hide-nav-bar="true " class="view-bg-blue">
  <ion-nav-buttons side="left">
    <button class="button button-icon button-clear ion-navicon" ng-click="openMenu()"></button>
  </ion-nav-buttons>        
  <ion-content padding="true">
    <h3 class="text-center">Welcome To Landing Page</h3>
       <div class="row">
        <div class="col">
                <div class="text-center">
                    <h4 >My App</h4>
                     <a class="button icon-right ion-chevron-right button-calm" ng-click="open()">Lets Go</a>

                </div>
            </div>
        </div>
  </ion-content>
</ion-view>

如果您需要任何其他功能,请告诉我们?谢谢