css - 为 ionic 应用程序创建登陆页面

Question

我正在尝试用 ionic 为移动应用创建登录页面。

Codepen

页面应该是

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

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

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

我已经为你做了一个小demo，

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>

样式.css

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

如果您需要任何其他功能，请告诉我？谢谢