一个简单的登陆界面-CSDN博客

本文链接：https://blog.csdn.net/du0m0/article/details/48768205

用html+css做了一个登陆界面
效果图：
这里写图片描述
html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
</head>
<body>
<form action="checked,jsp" method="get">
    <p><span>U</span>SERNAME</p>
    <input type="text" name="username" placeholder="输入用户名" required>
    <p><span>P</span>ASSWORD</p>
    <input type="password" name="psw" placeholder="输入密码" required>
    <p id="rec"><input class="receive" type="submit" name="submit" value="登入"><input class="receive" type="reset"><input class="receive" type="button" name="reighter" value="注册"> </p>

</form>
</body>
</html>

css代码：

html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
*{margin: 0px;padding: 0px;}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
height: 900px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #545454;
background-color: #ffffff;
background-image: url(1.jpg);
background-repeat: no-repeat;
}

p {
color:rgb(93, 190, 206);
margin: 5px 0px 0px 0px;
}

form {
background-color:rgba(62, 62, 62, 0.75);
width: 180px;
height: 160px;
padding: 5px 10px;
float: right;
border-radius: 8px;
box-shadow: 20px 20px 20px #888888;
}

span {
font-size: 28px;
}

input {
width: 13em;
height: 1.2em;
padding: 2px;
}

.receive {
width:3.7em;
height: 1.5em;
margin-right: 10px;
background-color: rgb(88, 88, 88);
color: white;
border: 0px;
}

#rec {
background-color: rgb(88, 88, 88);
margin-top: 10px;
padding: 1px;
border-radius: 5px;

}