暑期学习日记33：登录页面

今天学习使用html+css制作了登录页面，与之前用js制作的验证码生成可以结合起来成为一个具有验证登录功能的页面。

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登录窗口</title><style>#logindiv{width: 300px;height: 200px;background: white;border-radius: 10px;margin: 100px auto;display: flex;flex-direction: column;overflow: hidden;}body{background: lightblue;}.flex1{flex: 1;text-align: center;line-height: 50px;}.login1{background: darkblue;color: white;}.flex1 input{font-size: 16px;}.flex1 button{font-size: 16px;}</style>
</head>
<body><div id="logindiv"><div class="flex1 login1">登录窗口</div><div class="flex1">用户名：<input type="text"></div><div class="flex1">密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password"></div><div class="flex1"><button>登录</button></div></div>
</body>
</html>

显示效果为：

暑期学习日记33：登录页面相关推荐

Java学习day3——Javaweb登录页面设计（1）（含JSP代码）
写在前面本文主要的内容是完成网页登录页面设计,以及判断用户名密码是否正确,如果正确,进入下一页面,并输出sessionID,若错误,则在登录页面给出用户名或密码错误提示,并在登录页面显示访问次数. ...
暑期学习日记26：js实现支付成功页面跳转
本周学习了用js实现支付页面的跳转功能,逻辑为: 1.在支付界面时,点击确定支付,弹出确认框,确认后跳转到支付成功页面. 2.在支付成功界面时,会在倒计时10秒后自动跳转页面,或者点击立即返回立即跳转 ...
暑期学习日记27：js实现验证码生成与检验
今日学习了验证码的生成与检验,逻辑为: 1.加载页面时自动随机生成数字验证码. 2.点击看不清,更换验证码重新生成验证码. 3.点击确定按钮检验输入框内的值与验证码是否相等,不相等时弹出警告并清空输入 ...
暑期学习日记31：js实现轮播图
本次学习了使用js实现轮播图效果,逻辑为: (1)通过函数autochange()将横向排列的图片列表定时左移,来达到自动轮播的效果. (2)通过imggo(n)函数通过改变marginleft样式移 ...
暑期学习日记35：图片缩放动画
今天学习了使用html+css实现图片缩放动画,将鼠标移动到图片上会使图片放大. 代码如下: <!doctype html> <html> <head> <m ...
暑期学习日记34：js全选功能
今天学习了使用js实现全选功能,点击全选的复选框后会将下面所有的复选框变为被选择状态. 代码如下: <!doctype html> <html> <head> &l ...
暑期学习日记32：导航栏和导航下拉菜单
今天学习了用HTML+CSS制作导航栏和下拉菜单.代码如下: <!doctype html> <html> <head> <meta charset=&quo ...
暑期学习日记30：js数学
1.用Math对象执行数学任务. (1)Math.PI返回圆周率. (2)Math.round(x)返回x四舍五入后最接近的整数. (3)Math.pow(x,y)返回 x 的 y 次幂. (4)Ma ...
暑期学习日记19：CSS表单
通过使用 CSS,可以极大地改善 HTML 表单的外观,如: 使用 width 属性来确定输入字段的宽度. 使用 padding 属性在文本字段内添加空间. 使用 border 属性更改边框的粗细和颜 ...

暑期学习日记33：登录页面

暑期学习日记33：登录页面相关推荐

最新文章

热门文章