html网页设计一个简单的用户登录页面

结果

代码

login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用户登录页面</title><link rel="stylesheet" href="./css/login.css"><script src="js/jquery-3.1.0.min.js"></script><script>$(function () {// 初始时刻隐藏手机号验证码，显示用户名密码$('.login-box').hide();$('.login-box').first().show();// 显示或隐藏登录方式$('.login-method').each(function (i) {$(this).click(function () {$('.login-box').hide();$('.login-box').eq(i).show();})})})
</script>
</head>
<body>
<div class="login-bg">
</div>
<div class="login-box-wrapper"><div class="login-title"><span class='login-method'>用户名|密码</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class='login-method'>手机号|验证码</span></div><div class="hr-line-div"></div><form action="" class="login-box"><p class="paragraph">用户名：</p><p><input type="text" placeholder="请输入用户名" name="username"></p><p class="paragraph">密码：</p><p><input type="password" placeholder="请输入密码" name="password"></p><p><input type="submit" class="login-btn" value="立即登录"><input type="button" class="login-btn" value="返回首页"></p></form><form action="" class="login-box"><p class="paragraph">手机号：</p><p><input type="text" placeholder="请输入手机号" name="phone"></p><p class="paragraph">验证码：</p><p><input type="text" placeholder="请输入验证码" name="checkcode" id="checkcode"><input type="button" id="mybtn" value="获取验证码"></p><p><input type="submit" class="login-btn" value="立即登录"><input type="button" class="login-btn" value="返回首页"></p></form>
</div></body>
</html>

login.css

/*去除浏览器默认样式*/
*{padding: 0;margin: 0;
}
/*设置背景颜色*/
.login-bg{height: 300px;background-color: #1C2327;
}
/*设置登录容器*/
.login-box-wrapper{border-radius: 8px;background-color: #ffffff;box-shadow: 0 0 5px rgba(10,10,10,.5);width: 350px;padding: 20px;margin: 0 auto;margin-top: -100px;margin-bottom: 100px;
}
/*设置登录标题*/
.login-box-wrapper  .login-title{width: 350px;height: 28px;/*文字水平居中*/line-height: 28px;cursor: pointer;
}
.login-box-wrapper  .login-title span{color: black;font-size: 20px;
}
/*设置分割线样式*/
.login-box-wrapper .hr-line-div{width: 350px;border-top: 1px solid #e4e3e3;margin-bottom: 20px ;margin-top: 10px;
}
/*设置login-box样式*/
.login-box .paragraph{line-height: 28px;margin: 20px 0;font-size: 18px;
}
.login-box input{padding-left: 10px;width:328px;height: 36px;outline: none;
}
.login-box .login-btn{width: 150px;line-height: 36px;margin-top: 20px;background-color:#009688;border: none;color: white;padding: 0;
}
/*设置返回首页按钮样式*/
.login-box .login-btn:nth-child(2){margin-left: 38px;
}
/*设置验证码标签的样式*/
#checkcode{width: 238px;
}
#mybtn{float: right;width: 74px;height: 36px;box-sizing: content-box;color: white;background-color: blue;border:none;padding: 2px 1px;margin-right: 6px;
}

html网页设计一个简单的用户登录页面相关推荐

【html】【一个简单的用户登录页面代码】
结果代码 <!DOCTYPE html> <html><head><title>用户登录.html</title><meta htt ...
一个简单的用户登录界面
今天我们学习了如何实现一个简单的用户登陆界面,具体要用到两个jsp和一个servlet,具体操作如下: 首先创建一个用户登录界面,inputview.jsp,其源代码如下所示: <!DOCTYP ...
一个简单的ASP登录页面
一个简单的ASP登录页面成品首页登陆后的主页,中间的竖线框可自由调动哦!! 具体步骤: 将解压文件放到这个路径内:(很重要!!!) 上图中的work文件夹,即为解压后的文件夹,然后在浏览器的网页 ...
python 搭建登陆系统,用Python连接操作MySQL数据库，做一个简单的用户登录注册系统...
我们可以很容易地用Python实现一个用户登录系统,相信这即使是对编程新手来说也是小菜一碟. 作为Python的小萌新,今天我想记录下来的是如何实现一个连接了MySQL数据库的用户登录注册系统,它的效 ...
mfc 窗体不可点击的原因_如何设计一个简单的Access登录窗体（2）
书接上回~ 上回书中提到了如何从零开始设计一个Access的窗体.经过简单的操作,我们已经造出了一个登录窗体,但是这个窗体是空白的,需要向其中增加一些元素,以增加登录窗体的功能性. 因此,接下来我们要 ...
子窗体记录选择_如何设计一个简单的Access登录窗体（1）
Access是一个对数据库新手相当友好的软件. Access的窗体功能确实是一种独一无二的前端设计平台,很多常见的人机交互用法,可以用Access的窗体来轻松实现,同时Access的查询和计算功能,也 ...
access 知乎窗体_如何设计一个简单的Access登录窗体（1）
Access是一个对数据库新手相当友好的软件. Access的窗体功能确实是一种独一无二的前端设计平台,很多常见的人机交互用法,可以用Access的窗体来轻松实现,同时Access的查询和计算功能,也 ...
php网页制作代码_如何制作一个简单的HTML登录页面（附代码）
几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 制作登录页面需要用到很多CSS属性和HTML ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...

html网页设计一个简单的用户登录页面

结果

代码

login.html

login.css

html网页设计一个简单的用户登录页面相关推荐

最新文章

热门文章