HTML：Boostarp设计登录页面

Hello，大家好，我是wangzirui32，今天我们来学习如何使用Boostarp设计登录页面，开始学习吧！
HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><!-- 引入Boostarp 和 jQuery --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><style>.login {text-align: center;opacity: 0.8;     /* 设置透明度*/}body {background-repeat: no-repeat;/* 背景图来自百度 */background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2%2F59127f93d178d.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651550338&t=5f1a964803c792708bebc8de9502f409");}</style>
</head>
<body>
<div class="login"><h1>登录账户</h1>   <!-- 标题 --><div class="modal-dialog"><form method="POST" method="."> <!-- 表单 --><div class="modal-content"><div class="modal-header"><!-- 登录面板标题 --><h3 class="modal-title text-center" id="myModalLabel">登录账户</h3></div><div class="modal-body" id="model-body"><!-- 错误信息可以在这个p标签中输出 --><p style="color: red;" class="error"></p><div class="form-group"><input type="text" id="username" class="form-control" placeholder="用户名" autocomplete="off"></div><div class="form-group"><input type="password" id="password" class="form-control" placeholder="密码" autocomplete="off"></div><p>登录完成后，您就可以享受用户基本的权益了。</p></div><div class="modal-footer"><!-- 操作按钮 --><div class="form-group"><button type="button" class="btn btn-primary">登录</button><a class="btn btn-default" href="#">注册</a><button type="button" class="btn btn-danger" onclick="window.location.href='/'; return false;">取消</button></div></div></div></form></div>
</div>
</body>
</html>

效果如下：

好了，今天的课程就到这里，我是wangzirui32，喜欢的可以点个收藏和关注，我们下次再见！

HTML：Boostarp设计登录页面相关推荐

bootstrap设计登录页面_前端小白如何在10分钟内打造一个爆款Web响应式登录界面？...
对于前端小白(例如:专注后端代码N年的攻城狮),自己编写一个漂亮的Web登录页面似乎在设计上有些捉襟见肘,不懂UI设计,颜色搭配极度的混乱(主色,辅助色,配色,色彩渐变,动画效果等等,看起来一堆乱七八 ...
设计登录页面测试用例，页面包括账号、密码和验证码，账号字符长度小于20，密码字符长度小于30，验证码数字和字母组合，长度为4
1. 正确输入账号.密码和验证码,登录成功. 2. 账号为空,应提示"请输入账号". 3. 账号长度为19个字符,符合要求. 4. 账号长度为20个字符,符合要求. 5. 账号长度 ...
使用IDEA设计登录页面完成假登录
第一步:创建web项目,部署到tomcat服务器中第二步:在index.jsp首页中添加一个a标签,跳转到登录页面第三步:创建一个login.jsp作为登录页面,书写form表单指定提交地址和提 ...
用IDEA设计登录页面完成假登录
1.检查web项目是否部署到tomcat服务器 2.在index.jsp首页中添加一个a标签,跳转到登录页面. 注意:ctrl+超链接标签可以跳转到登录页面 3.创建一个login.jsp作为登录页面 ...
JavaWeb（用IDEA设计登录页面，完成假登录）
1．创建web项目,部署到tomcat服务器中 2．在index．jsp首页中添加一个a标签,跳转到登录页面 3．创建一个login．jsp作为登录页面,书写form表单指定提交地址和提交方式 4． ...
用IDEA设计登录页面，完成假登录
1.在index．jsp首页中添加一个a标签,跳转到登录页面 2. 创建一个denglu．jsp作为登录页面,书写form表单指定提交地址和提交方式 3. 在web．xml中配置servlet的映射关 ...
Java学习day3——Javaweb登录页面设计（1）（含JSP代码）
写在前面本文主要的内容是完成网页登录页面设计,以及判断用户名密码是否正确,如果正确,进入下一页面,并输出sessionID,若错误,则在登录页面给出用户名或密码错误提示,并在登录页面显示访问次数. ...
figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
figma下载 I enjoy looking at website designs that are on platforms like Behance, Dribble, etc. as they ...
【HTML5】登录页面制作简易版
刚开始学习Java.文件的命名,讲道理应该以英文为主,但是英语又不好,所以只好用拼音,最痛苦的应该算是那些英语又不好,又想秀一下的程序员,一半英语一半拼音,如mainFangFa~~~你说看了糟心不糟 ...
拒绝平庸--浅谈WEB登录页面设计
用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说 ...

HTML：Boostarp设计登录页面

HTML：Boostarp设计登录页面相关推荐

最新文章

热门文章