设计会员登录系统表单，如图1所示。当用户输入登录信息时_2)设计下列表单。用户名:密码:验证码:202002请选择会员类型:高级会员会员请选-CSDN博客

本文链接：https://blog.csdn.net/sankang2022/article/details/135212105

index文档

<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>会员登录系统</title>
<style type="text/css">
*{
margin:0;
padding:0;
border:0;
font-family:"微软雅黑";
font-size:14px;
color:white;}
body{
background-color:#02195b;
background-image:url(images/cloud.png);
background-position:bottom;
background-repeat:no-repeat;
width:100%;}
#content{
margin-top:100px;
height:520px;}
#content li{
list-style-type:none;
margin-top:15px;}
.name,.pwd{
width:310px;
height:44px;
line-height:44px;
padding-left:15px;
outline:none;
border-radius:20px;
background-color:#0a3c78;
border:lpx solid #329be0;}
.name:hover,.pwd:hover,#valid:hover,.name:focus,.pwd:focus,#valid: focus{
background-color: #FFFFFF;
}
#login{
background:#3fb9ff;
font-size:18px;
width:329px;
height:44px;
outline:none;
color:white;
background:-webkit-linear-gradient(#3fb9ff,#099be7,#229de3);
background:-o-linear-gradient(#3fb9ff,#099be7,#229de3);
background:-moz-linear-gradient(#3fb9ff,#099be7,#229de3);
background:linear-gradient(#3fb9ff,#099be7,#229de3);
border-radius:20px;}
#login:hover{
background:-webkit-linear-gradient(#229de3,#099be7,#3fb9ff);
background:-o-linear-gradient(#229de3,#099be7,#3fb9ff);
background:-moz-linear-gradient(#229de3,#099be7,#3fb9ff);
background:linear-gradient(#229de3,#099be7,#3fb9ff);}
#valid{
height:44px;
width:170px;
text-indent:1em;
vertical-align:middle;
line-height:46px;
outline:none;
border-radius:20px;
background-color:#0a3c78;
border:lpx solid #329be0;}
#validcode{
display:inline-block;
width:100px;
height:30px;
margin-left:5px;
vertical-align:middle;}
#footer{
text-align:center;position:absolute;bottom:15px;
width:100%;}
#footer a{
color:#000;
text-decoration:none;
cursor:pointer;}

</style>
</head>

<body>
<div id="content">
<form action="#" method="post">
<ul style="text-align:center;">
<li style="font-size:48px;">会员登录系统</li>
<li><input name="username" class="name" required placeholder="请输入用户名"></li>
<li><input type="password" name="password" required placeholder="请输入密码"class="pwd"></li>
<li style="display:block;"><input name="rand" id="valid" required placeholder="请输入验证码"maxlength="4">
<span id="validcode"><img src="images/yz.jpg"></span>换一张</li>

<li><input type="submit"id="login" value="立即登录"></li>
</ul>
</form>
</div>
<div id="footer"><a>关于我们@12345678</a>  |  <a> Copyright ？2019 木木夕保留所有
</a></div>
</body>
</html>