爲離子應用程序創建着陸頁

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

如果你需要任何額外的功能，請讓我知道嗎？謝謝