手写一个HTML密码登录页面
实践中学习。
手写一个HTML密码登录页面
HTML
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name= "viewport" content = "width=device-width,initial-scale=1.0">
<meta http-equiv = "X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="C:/Users/14768/Desktop/static/css/login.css">
<link rel="stylesheet" href="C:/Users/14768/Desktop/static/css/font-awesome.css">
</head>
<body>
<div id ="login-box" >
<h1>Login</h1>
<div class = "form">
<div class="item">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
<input type="text" placeholder="Username">
</div>
<div class = "item">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="text" placeholder="Password">
</div>
</div>
<button>Login</button>
</div>
</body>
</html>CSS
body{
background: url("E:\\blog\\gallary\\264.jpg");
background-repeat: no-repeat;
background-size: 100% auto;
}
#login-box{
width: 30%;
height: auto;
margin: 0 auto;
margin-top: 15%;
text-align: center;
background: #00000050;
padding: 20px 50px;
}
#login-box h1{
color: #fff;
}
#login-box .form{
margin-top: 50px;
}
#login-box .form .item {
margin-top: 15px;
}
#login-box .form .item i{
font-size: 18px;
color: #fff;
}
#login-box .form .item input{
width: 180px;
font-size: 18px;
border: 0;
border-bottom: 2px solid #fff;
padding:5px 10px;
background: #ffffff00;
color: #fff;
}
#login-box button{
margin-top: 15px;
width:180px;
height: 30px;
font-size: 20px;
font-weight: 700px;
color: #fff;
background-image: linear-gradient(to right, #00dbde 0%, #fc00ff 100%);
border: 0;
border-radius: 15px;
}Relevant
font-awesome.css 链接：http://www.fontawesome.com.cn/
图片自备效果如封面所示
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-04|，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
