这篇文章利用CSS绘制了一个漂亮的登陆界面。
1.html部分
<html>
<head>
<title>登陆界面</title>
<link href="css/application.css" rel="stylesheet">
</head>
<body>
<section class="sign-in-up-section">
<div class="container">
<div class="col-md-10"></div>
<section class="sign-in-up-content">
<div class="row">
<div class="col-md-12">
<h4 class="text-center">用户登陆</h4>
<form class="sign-in-up-form" action="./sign-in.html" role="form">
<div class="form-group">
<input class="form-control" id="exampleInputEmail2" type="email" placeholder="Enter email address">
</div>
<div class="form-group">
<input class="form-control" id="exampleInputPassword1" type="password" placeholder="Password">
</div>
<button class="btn btn-success btn-block" type="submit">登陆</button>
</form>
</div>
</div>
</section>
</div>
</section>
</body>
</html>
2.CSS部分
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color:yellow;
}
.sign-in-up-section {
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
width: 420px;
}
.sign-in-up-content {
border-radius: 4px;
margin-bottom: 20px;
padding: 15px;
background-color: white;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: inherit;
font-weight: 500;
line-height: 2px;
color: #1b1f23;
}
.text-center {
text-align: center;
}
h4, .h4 {
font-size: 22px;
}
.sign-in-up-form {
padding-top: 10px;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
display: block;
width: 100%;
height: 45px;
padding: 6px 12px;
font-size: 18px;
line-height: 1.42857;
color: #696f6f;
background-color: white;
background-image: none;
border: 2px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 0;
white-space: nowrap;
padding: 10px 23px;
font-size: 18px;
line-height: 1.42857;
border-radius: 4px;
-webkit-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn-block {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
.btn-success {
color: white;
background-color: #00b6ad;
border-color: #009d95;
}
.col-md-10 {
height: 24%;
};
3.最终效果
2.PNG
