web前端的登陆页面制作

   登陆页面中有要登陆系统(网站)的名称,输入账号密码的输入框,以及登陆按钮这几个重要部分,其余的可以随便添加,但是页面布局要合理
标陆页面题
在页面输入框之前的图像是特殊的字体,因此要在制作页面的目录中导入font-awesome-4.7.0,通过调用实现该字体的样式。

根据上面的页面可以将其分为几块:

1.整个大的是一个div将其余各个部分包裹其中;

2.登陆系统的名称是一个标题h1;

3.两个输入框和按钮是一个form;他们各自也是一个div;

4.版权声明是一个标签p;

实现的步骤为:先重置 页面默认的属性(reset.css);再建立html(login.html),在head中写上:

<link rel="stylesheet"  href="font-awesome-4.7.0/css/font-awesome.min.css" />

  <link rel="stylesheet" href="css/reset.css"
/>,font-awesome-4.7.0/css/font-awesome.min.css是导入font-awesome-4.7.0目录中的css,再在body中分配布局;最后写布局的css(
login.css),再写入html的head中。

reset.css代码:
*{ marjn:0; padding: 0; } a{ font-size: 12px; text-decoration: 0; color: #222;
} a, input, buttom{ outline: none; } ul,ol,li{ list-style: none; }
h1,h2,h3,h4,h5,h6{ font-weight: 100; } img{ display: block; border: 0; }
login.html代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport"
content="width=device-width, initial-scale=1"> <title></title> <link
rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" /> <link
rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet"
href="css/login.css" /> </head> <body> <div class="wrap"> <h1>科武管理系统</h1> <form
action="" method=""> <div class="input-group"> <i class="icon-user fa
fa-user"></i> <input type="text" name="" class="form-control"
placeholder="请输入账号" /> </div> <div class="input-group"> <i class="icon-user fa
fa-lock"></i> <input type="text" name="" class="form-control"
placeholder="请输入密码" /> </div> <div class="input-group btn-group"> <button
>按钮</button> </div> </form> <p>©科武集团 版权所有</p> </div> </body> </html>
login.css代码:
body { background: rgba(0, 0, 0, 0.8); } .wrap { position: absolute; left:
50%; top: 50%; margin: -175px 0 0 -250px; padding: 20px; width: 500px; height:
350px; background: rgba(255, 225, 225, 0.8); box-shadow: 0 0 10px rgba(255,
225, 225, 0.5); box-sizing: border-box; } h1 { height: 50px; font-size: 1.6em;
text-align: center; border-bottom: 1px solid rgba(255, 225, 225, 0.5); }
.input-group { margin: 20px auto; height: 40px; width: 300px; border: 1px solid
rgba(0, 0, 0, 0.2); } i { float: left; width: 40px; height: 40px; text-align:
center; line-height: 40px !important; background: rgb(22, 160, 93); color:
#fff; /* font-size: 20px !important; */ } .form-control { float: left; padding:
0 10px; height: 40px; boder: 0; width: 260px; font-size: 18px; box-sizing:
border-box; } .btn-group { border: 0; margin-top: 40px; } button { display:
block; width: 100%; height: 40px; font-size: 1.2em; letter-spacing: 10px;
border: 1px solid rgb(22, 160, 93); color: rgb(22, 160, 93); background: #fff;
cursor: pointer; } button:hover { color: #fff; background: rgb(22, 160, 93); }
p { font-size: 12px; text-align: center; color: #888; }
 

技术
©2019-2020 Toolsou All rights reserved,
html写樱花树,写樱花树的作文java四大函数式接口(重点,简单)某东14薪变16薪,是诚意还是套路?os模块的简单使用HashMap详解让人意想不到的Python之樱花树(turtle库的华丽样式)浏览器内核(理解)