为离子应用程序创建着陆页

Question

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

Codepen

页应该

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

我已经部分得到了所有这些工作，但是我不知道我是否正在使用正确的离子技术。

我的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%; 
    } 
} 

有没有更好的方式来做到这一点？

Answer 1

我已经为你一个小演示，

Plunker

HTML

<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> 

的style.css

.view-bg-blue 
{ 
    background-color: lightblue; 
} 
.text-center 
{ 
    text-align: center; 
} 

如果你需要任何额外的功能，请让我知道吗？谢谢