admin管理员组文章数量:1568703
参考视频:https://ke.qq/course/320021
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style>
body {
background-image: url("img/星空.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed; /*图片铺满整个页面*/
}
.main {
width: 500px;
height: 300px;
box-shadow: 0 5px 20px 0 #e8e8e8;
background-color: white;
border-radius: 10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.main h2 {
color: lightseagreen;
margin-left: 150px;
}
.form {
margin-top: 30px;
margin-left: 60px;
}
.form input {
width: 300px;
height: 25px;
border: 1px solid lightgray;
outline: none; /*输入内容时不显示边框*/
}
.form button {
width: 150px;
height: 30px;
color: white;
background-color: lightseagreen;
border-style: none;
border-radius: 5px;
font-size: 15px;
margin-top: 15px;
margin-left: 130px;
outline: none;
cursor: pointer; /*光标放到上面有小手*/
}
</style>
</head>
<body>
<div class="main">
<h2>欢迎访问管理系统</h2>
<form action="" method="get" class="form">
用户名: <input type="text", name="username"><br> <!--输入的用户名保存到username变量,传回后端-->
密 码: <input type="password", name="password"><br>
<button type="submit">登录</button><br>
</form>
</div>
</body>
</html>
效果
版权声明:本文标题:WEB前端实战——制作登录页面 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1727642281a1123366.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论