目录
绪论
一、新建一个html项目
二、制作整体框架
三、使用CSS进行修饰
四、更新内容
绪论
html作为一个常用的前端语言,使用的人群范围是很大的;
如果你想要成为一个前端工程师,那必不可少的就要做一个登陆页面;
登录页面一般就是账号和密码,另外还需要验证码验证需求,这三个常见的属性是一个项目登陆界面重要组成要素;
本篇是要做一个简单的登录页面,用来体验Html 的用法和效果,所以就不使用验证码了,因为验证码在一个项目中是放在后端的,这次就不做演示;
一、新建一个html项目
html项目在哪里建都可以,vscode、idea甚至在网页打开一个html在线编译器都可以;
如下面的代码,这一步很简单;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆页面</title> </head> <body> <p>hello world!</p> </body> </html>
复制
二、制作整体框架
1、首先使用form做一个表单,放入Login文件的<body>中,代码如下:
<form action=""> 账号: <input type="text" name="user"><br> 密码: <input type="password" name="password"> </form>
复制
效果如下;
2.账号密码有了之后,下一步就需要登录了,登录是一个按钮,按钮是一个<button>标签
我们现在加上试试;
<form action=""> 账号: <input type="text" name="user"><br> 密码: <input type="password" name="password"> <button> 登录</button> </form>
复制
效果如下:
有了登录按钮后,在我们的认知下,肯定按了登录会跳到下一个页面,但是今天只是展示做一个简单的登陆界面,就不写跳转和账号密码验证了;
但是现在这个登录界面很难看,我们需要对他美化一下;
三、使用CSS进行修饰
不好意思兄弟们,本人没有美感,尽力了,你们自己找好看的点自己修改;
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登陆页面</title> <style> body { background-color: #74aabc; background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http://img.mm4000.com/file/8/d7/6527dce099.jpg?down&ehk=E9+Vucd/ent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0=&risl=&pid=ImgRaw&r=0); background-repeat: no-repeat; background-size: cover; } .login { width: 400px; height: 200px; margin: auto; margin-top: 150px; border-radius: 5px; overflow: hidden; } .input { width: 300px; height: 30px; padding-left: 10px; margin-top: 20px; margin-left: 50px; } .button { width: 300px; height: 35px; width: 300px; height: 40px; margin-top: 20px; margin-left: 50px; border-radius: 5px; background-color: #64a9d9; cursor: pointer; color: #fff; } </style> </head> <body> <div class="login"> <form action="" > <input class="input" type="text" name="user" placeholder="账号"><br> <input class="input" type="password" name="password" placeholder="密码"> </form> <button class="button"> 登录</button> </div> </body> </html>
复制
前端怎么说呢,能做前端的人都是一个有美感的工程师;
很明显,我不是,哈哈哈
看着图一乐就行
四、更新内容
真没想到这个博文的访问量1.5W,所以我又做了一个登陆页面,虽然不算特别好看,但是要比上个好点,哈哈哈。直接上图,上代码。
<!DOCTYPE html> <html> <head> <title>登陆</title> <style> body { background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.8e5e293cae342149832fff96bb4c8caa?rik=dbonSUJuDVqx5A&riu=http://img.mm4000.com/file/8/d7/6527dce099.jpg?down&ehk=E9+Vucd/ent1hsPcwHCre695jRwtoRQJzu1ymZuXJL0=&risl=&pid=ImgRaw&r=0); background-repeat: no-repeat; font-family: Arial, sans-serif; } .container { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 100px; } h1 { text-align: center; } input[type="text"], input[type="password"] { width: 95%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px; } input[type="submit"] { width: 100%; padding: 10px; background-color: #4CAF50; color: #fff; border: none; border-radius: 5px; cursor: pointer; } .forgot-password { text-align: right; margin-bottom: 10px; } .social-login { text-align: center; margin-top: 20px; } .social-login a { display: inline-block; margin: 0 5px; text-decoration: none; color: #333; } </style> </head> <body> <div class="container"> <h1>登录</h1> <form> <input type="text" id="username" placeholder="用户名/邮箱"> <input type="password" id="password" placeholder="密码"> <label> <input type="checkbox" id="remember-me"> 记住我 </label> <div class="forgot-password"> <a href="#">忘记密码?</a> </div> <input type="submit" value="登录"> </form> <div class="social-login"> <a href="#">使用微信登录</a> <a href="#">使用QQ登录</a> <a href="#">使用支付宝登录</a> </div> </div> </body> </html>
复制