关于登录页⾯的css样式总结，包括⽂字，输⼊框样式的⼀些
基础美化（8）
有图有真相
功能介绍：
第⼀：具有相当的适应性，平板，移动端，pc端
第⼆：背景加格⼦，还算漂亮，
第三：登录，滑⼊时呈现动画效果
总结：
第⼀：输⼊框，⼀般去掉border:none；原装相当丑，尤其是给予圆⾓，看到更加明显，
其次针对需要设置outline:none；选中时的状态，
适当的padding和margin，看起来舒适
第⼆：针对⽂字，调整间距，⼤⼩，粗细，位置，
第三：关于适应性，增加@media ，重点是包裹输⼊框的宽度，
第四：页⾯铺满整屏幕，⽤绝对定位加top:0;bottom:0;
详细代码如下：⼀些注释，保留在，⽅便查看复习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <title></title>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
/*直接决定向你内扩展，在默认情况下是不改变宽度，让元素膨胀变⼤*/  }
/*容器⼀般百分百*/
a {
text-decoration: none;
}
.pages_agile_info_w3l {
background: url(ESTEEM/images/bottom.jpg);
background-size: cover;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.over_lay_agile_pages_w3ls {
background: url(ESTEEM/images/overlay.png) repeat;
padding: 11em 2em 5.5em 2em;
height: 100%;
width: 100%;
}
/*这个根据内容决定的⾼度多少,*/
/*⽂字居中，⾃⾝⽔平居中垂直⼤⼩，样式*/
.
signin-form.profile {
background: #FAFAFA;
text-align: center;
margin: 0 auto;
width: 25%;
padding: 3em 2em;
/*没有改变⾃⾝位置，改变内容位置
因此需要到外套的容器给予合适padding达到效果*/
}
/*标题⿊⾊字体强调，⽂字间距，粗细，⼤⼩，以及位置*/
.signin-form.profile h2 {
font-size: 1.4em;
font-size: 1.4em;
font-weight: 700;
margin: .5em 0 1.5em 0;
letter-spacing: 5px;
}
/*输⼊框怎么样优化，加合适填充，外边距效果好很多*/
.signin-form.profile form>input {
width: 100%;
/*给了box-size:border-box，这⾥内容，填充太多，挤到⽆法左右边距对齐，上右优先级⾼*/    padding: 1em;
margin: 1em 0;
text-align: center;
outline: none;
/*聚焦时外边框不太好看*/
letter-spacing: 1px;
font-weight: 300;
color: #666666;
}
/*此外⽂字居中,*/
/*确认按钮，去掉外边框，和聚焦，*/
.signin-form.profile form input[type=submit] {
width: 100%;
margin-top: 1rem;
padding: 1rem;
font-size: 1.2rem;
font-weight: 500;
outline: none;
border: none;
/*必须去掉外边框，真的⾮常丑*/
background: #e53238;
/*还有变成⽩⾊字体*/
color: #FFFFFF;
letter-spacing: 5px;
-
webkit-transition: .5s all;
transition: .5s all;
}
.signin-form.profile form input[type=submit]:hover {
background: #007ee5;
}
.signin-form.profile p a {
font-size: 0.9em;
color: #10364a;
letter-spacing: 2px;
font-weight: 600;
}
/*max-width从⼤往⼩放，尽量放在样式最后，因为是依次⽣效*/
@media (max-width: 1280px) {
.pages_agile_info_w3l {
min-height: 698px;
}
.signin-form.profile {
padding: 3em 2em;
width: 35%;
}
.over_lay_agile_pages_w3ls {
padding: 8em 3em 5.5em 3em;
}
}
@media (max-width: 1080px) {
.signin-form.profile {
padding: 3em 2em;
width: 45%;
}
.pages_agile_info_w3l {
min-height: 653px;
}
}
@media (max-width: 991px) {
.signin-form.profile {
padding: 3em 2em;
width: 48%;
}
}
@media (max-width: 800px) {
.signin-form.profile {
padding: 3em 2em;
width: 64%;
}
}
@media (max-width: 600px) {
.signin-form.profile {
width: 72%;
}
}
@media (max-width: 480px) {
.signin-form.profile {
width: 78%;
}
}
@media (max-width: 414px) {
.signin-form.profile {
width: 95%;
}
}
@media (max-width: 375px) {
.signin-form.profile {css表格样式
padding: 2em 1.5em;
width: 100%;
}
}
</style>
</head>
<body>
<!--⾸先是整体容器，其次第⼀块区域，⾥⾯分为上下-->
<div class="pages_agile_info_w3l">
<div class="over_lay_agile_pages_w3ls">
<div class="registration">
<div class="signin-form profile">
<!--分成四个区域：标题，表格，第三⽅登录，注册-->
<h2>请登录</h2>
<div class="login-form">
<form action="#" method="post">
<input type="email" name="email" placeholder="邮箱" required="">
<input type="password" name="password" placeholder="密码" required="">        <div class="tp">
<input type="submit" value="登录">
</div>
</form>
</div>
<!--<div class="login-social-grids">
<ul>
<li>
<a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fa fa-rss"></i></a>
</li>
</ul>
</div>-->
<p>
<a href="signup.html"> 没有账号?注册</a>
</p>
<!--<h6><a href="main-page.html">返回⾸页</a></h6>-->      <!--<h6></h6>-->
</div>
</div>
<div class="copyrights_agile">
</div>
</div>
</div>
</body>
</html>