设计并制作网站登录界面，网页效果如下图1所示。当光标移到按钮上时，光标图案和按钮背景颜色会发生变化

大数据三康

已于 2023-12-26 02:24:39 修改

阅读量536

点赞数 13

文章标签：大数据

于 2023-12-26 01:33:37 首次发布

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

版权

html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>登录页面</title>
<style type="text/css">
*{
   padding:0px;
   margin:0px;
   border:0px;
}
body{
   font-family:"微雅软黑";
}
input:focus{
   outline:none;
}
#login{
   width:450px;
   height:380px;
   border:1px solid #999;
   box-shadow:0px 0px 5px 2px #CCCCCC;
   border-radius:10px;
   margin:40px auto;
}
#login .loginFunc{
   height:48px;
   width:100%;
   margin-bottom:45px;
}
.loginFuncApp,.loginFuncNormal{
   display:inline-block;
   width:100px;
   text-align:center;
   line-height:48px;
   color:#666;
   margin:10px 60px;
}
.loginFuncNormal{
   color:#0a8745;
   border-bottom:2px solid #0a8745;
}
.identity,.password{
   width:328px;
   height:45px;
   margin:10px 60px 10px 38px;
   border:1px solid #CCC;
   padding-left:45px;
}
.identity{
   background:url(../timg1.png) no-repeat 10px center;
}
.password{
   background:url(../timg2.png) no-repeat 10px center;
}
.identity:focus,.password:focus{
   border:1px solid #0A8745;
}
::-webkit-input-placeholder{
   color:#CCC;
}
.info{
   height:20px;
   padding:0 0 10px 40px;
}
.checkbox{
   width:16px;
   height:16px;
   vertical-align:bottom;
}
.info span{
   font-size:14px;
   color:#666;
   vertical-align:bottom;
   margin-left:10px;
}
.info span.help{
   margin-left:190px;
}
.info span a{
   color:#0A8745;
   text-decoration:none;
}
.submit,.button{
   width:172px;
   height:50px;
   border-radius:4px;
   text-align:center;
   font-size:18px;
   cursor:pointer;
}
.submit{
   background:#0A8745;
   color:#FFF;
   margin:20px 20px 0px 40px;
}
.button{
   border:1px solid #a7d4bd;
   color:30a8745;
   background:#E6F3EC;
}
.submit:hover{
   background:#077e3f;
}
.button:hover{
   background:#cee7da;
}
</style>

</head>

<body>
   <div id="login">
   <form name="loginfrom" method="post" action="#">
    <div class="loginFunc">
       <span class="loginFuncApp">二维码登录</span>
       <span class="loginFuncNormal">邮箱账号登录</span>
   </div>
   <input type="text" placeholder="邮箱账号或手机号" class="identity" />
   <input type="password" placeholder="密码" class="password">
   <p class="info">
   <input type="checkbox" class="checkbox" />
<span>十天内免登录</span>
<span class="help">
<a href="#">忘记密码？</a>
</span>
</p>
<input type="submit" value="登录" class="submit">
   <input type="button" value="注册" class="button">
   </form>
   </div>
</body>
</html>