一个简单的web前端静态登录页面
目录
一个简单的web前端静态登录页面
一个简单的web前端登录页面
刚开始学习css ，写的不是很标准
所用技术 html +css
结果展示
输入框前面是 特殊字体
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">直接引用地址
具体参考
菜鸟教程https://www.runoob.com/font-awesome/fontawesome-reference.html
html部分：
<body >
<div class="div1">
<form>
<h2>希望工程登录</h2>
<div class="input1">
<i class="fa fa-user-o" style="font-size: 24px"></i>
<input type="text"placeholder="请输入账号" name="" class="in">
</div>
<div class="input1">
<i class="fa fa-unlock-alt" style="font-size: 24px"></i>
<input type="password"placeholder="请输入密码" name="" class="in">
</div>
<div class="input2">
<input type="checkbox" ><span>记住密码</span>
<input type="checkbox" ><span>自动登录</span>
</div>
<button class="butto">登录</button>
</form>
</div>
</body>css布局部分：
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<style>
*{margin: 0;padding: 0}
body{background: repeat #0a0a0a; }
h2{position: relative ;left: 100px;top: 20px;font-weight: 100;
}
.div1{width: 350px;height: 300px;margin: auto;margin-top: 250px ;background-color: lavenderblush}
.input1{width: 300px;height:40px; margin-left: 15px;margin-top: 25px}
.input2{width: 300px;height:40px; margin-left: 10px;margin-top: 18px}
.intout1 i{margin-left: 50px }
.in{width: 200px;height: 30px; border: 2px solid green;margin-left: 20px}
.butto{width: 100px ;height: 30px;color: green;margin-top: 20px;margin-left: 110px;border-radius: 5px}
.input2 input{margin-left: 45px}
butto:hover {
color: #fff;
background: rgb(22, 160, 93);}
</style>
</head>