我正在尝试使用 Angular Material 构建一个登录表单。但我似乎无法获得所需的效果 -> http://gyazo.com/d31f624204524d8b1b6349c89b237be1
到目前为止我有这个 -> http://gyazo.com/0ab7343544a3c7992099c30684e062a1
任何人都可以帮助我使用这个 flex 盒模型来布局我的应用程序
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;
}
最佳答案
这是一个开始
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;
}
}
工作示例。
关于css - 使用 Angular Material 进行布局时未按应有的方式响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31363629/