Question

我正在尝试使用角度材质构建登录表单。但我似乎无法获得所需的效果 - >＆gt; http://gyazo.com/d31f624204524d8b1b6349c89b237be1

到目前为止我有这个 - ＆gt; http://gyazo.com/0ab7343544a3c7992099c30684e062a1

任何人都可以帮助我使用这个弹性箱模型来布局我的应用程序

html的代码是：

<div layout="row" flex layout-padding layout-fill layout-align="center center">
    <div>
        <md-card>
            <md-toolbar>
                <div class="padding-20 text-center">
                    <div>
                        <img src="../images/logo.png" alt="" width="177" height="162">
                    </div>
                    <h1 class="md-headline">Sign Up</h1>
                </div>
            </md-toolbar>

            <md-card-content class="md-padding">
                <form name="login">
                    <md-input-container>
                        <label for="email">Email</label>
                        <input id="email" label="email" name="email" type="email" />
                        <div ng-messages="login.email.$error"></div>
                    </md-input-container>

                    <md-input-container>
                        <label for="password">Password</label>
                        <input id="password" label="password" name="password" type="password" />
                    </md-input-container>
                </form>
            </md-card-content>
        </md-card>
    </div>
</div>

我的css：

body{
    background-image: url("../images/background.png");
    width: 1920px;
    height: 1080px;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x:hidden;
    overflow-y:hidden;
}

.padding-20 text-center{
    text-align: center;
    padding: 20px;
}

Answer 1

这是一个开始

<强> HTML

<html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
  </head>
  <body layout="column" ng-controller="AppCtrl">

    <div layout="row" flex layout-fill layout-align="center center">
        <div class="signup">
            <md-card>
                <div class="header">
                    <div>
                        <img src="../images/logo.png" alt="">
                    </div>
                    <h1 class="md-headline">Login</h1>
                </div>

                <md-card-content class="md-padding">
                    <form name="login">
                        <md-input-container>
                            <label for="email">Email</label>
                            <input id="email" label="email" name="email" type="email" />
                            <div ng-messages="login.email.$error"></div>
                        </md-input-container>

                        <md-input-container>
                            <label for="password">Password</label>
                            <input id="password" label="password" name="password" type="password" />
                        </md-input-container>
                    </form>
                </md-card-content>
            </md-card>
        </div>
    </div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
  </body>
</html>

样式

.signup{
  width: 400px;
  .header{
    text-align: center;
    background-color: #16afca;
    color: white;
  }
}

工作样本。

http://codepen.io/Tmeister/pen/RPJoLZ

使用Angular材料进行布局无法正常响应

1 个答案: