图书管理系统之登陆注册页面布局(一)
图书管理系统之登陆注册页面布局(一)
相关源码下载连接:https://download.csdn.net/download/baidu_39378193/85033291
前言,创建一个新的MVC项目,创建第一个控制器【Login】并创建视图,名字也由【Index改为Login】,添加视图,不使用布局页。
创建一个Comtent文件夹,存放一些需要用到的框架文件以及图片素材
一、登陆页面
在Login视图里面写登陆页面代码
登陆页面的布局代码不多,引入框架,复制下面的代码即可
1.1、html布局
<div class="container"><div class="title text-center mt-5"><h1><a href="#">图书管理系统</a></h1></div><div class="login_bg"><form autocomplete="off" class=""><h4 style="color: #00d0ff;">请选择登录身份</h4><!-- 身份选择 --><div class="text-right mb-4 row ml-auto justify-content-around"><div class="student"><label style="color: #00d0ff;">我是学生</label><input type="checkbox"></div><div class="student"><label style="color: #00d0ff;">我是管理员</label><input type="checkbox"></div></div><!-- 用户名 --><div class="row form-group mb-5 ml-auto"><label class="mr-4" style="color: #00d0ff;font-size: 20px;">用户名</label><div class="col-7 borders"><input type="text" class="user" placeholder="用户名"><!-- 左上 --><i class="inputI" style="background-image: url('~/Content/img/矩形2.png'); top: 0px; left: 15px;"></i><!-- 右上 --><i class="inputI" style="background-image: url('~/Content/img/右.png'); top: 0px; right: -63px;"></i><!-- 左下 --><i class="inputI" style="background-image: url('~/Content/img/左下.png'); top: 28px; left: 15px;"></i><!-- 右下 --><i class="inputI" style="background-image: url('~/Content/img/右下.png'); top: 28px; right: -63px;"></i></div></div><!-- 密码 --><div class="row form-group mb-5 ml-auto"><label class="mr-4" style="color: #00d0ff;font-size: 20px;">密   码</label><div class="col-7"><input type="password" class="user" placeholder="密码"><!-- 左上 --><i class="inputI" style="background-image: url('~/Content/img/矩形2.png'); top: 0px; left: 15px;"></i><!-- 右上 --><i class="inputI" style="background-image: url('~/Content/img/右.png'); top: 0px; right: -63px;"></i><!-- 左下 --><i class="inputI" style="background-image: url('~/Content/img/左下.png'); top: 28px; left: 15px;"></i><!-- 右下 --><i class="inputI" style="background-image: url('~/Content/img/右下.png'); top: 28px; right: -63px;"></i></div></div><!-- 验证码 --><div class="row form-group mb-4 ml-auto"><label class="mr-4" style="color: #00d0ff;font-size: 20px;">验证码</label><div class="col-6 int"><input type="text" class="user" placeholder="验证码" style="width: 170px;"><!-- 左上 --><i class="inputI" style="background-image: url('~/Content/img/矩形2.png'); top: 0px; left: 15px;"></i><!-- 右上 --><i class="inputI" style="background-image: url('~/Content/img/右.png'); top: 0px; right: 15px;"></i><!-- 左下 --><i class="inputI" style="background-image: url('~/Content/img/左下.png'); top: 28px; left: 15px;"></i><!-- 右下 --><i class="inputI" style="background-image: url('~/Content/img/右下.png'); top: 28px; right: 15px;"></i></div><div class="code"></div></div><!-- 注册账号 --><div class="text-right mb-4 row ml-auto justify-content-between"><div><input type="checkbox" class="mr-2"><a style="color: #00d0ff;" href="#">记住密码</a></div><a style="color: #00d0ff;" href="#">没有账号?免费注册!</a></div><!-- 登录按钮 --><div class="btn"><h4><a href="#">登   录</a></h4></div></form></div></div>
1.2、css样式代码
<style>body {/* 背景不重复 */background: url('../../Content/img/bg.png') no-repeat bottom;background-size: cover; /* 背景缩放 */height: 100vh; /* 必须要有宽度 */position: relative;padding: 2rem 0;}a {color: #fff;}a:hover {color: #fff;text-decoration: none;}.login_bg { /* 登录区域 */ text-align:center; width: 573px; height: 470px; position: absolute; padding: 94px; padding-top: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("../../Content/img/dengl.png") }.title > h3 a {/* 标题 */color: #fff !important;}.user { /* 用户名 */ width: 281px; height: 38px;position: relative; background: url("../../Content/img/bj2.png");border: none; outline-style: none; color: #ccc; padding-left: 15px; }.inputI { /* 输入框的I标签 */ width: 10px;height: 10px; display: block; background-image: url('../../Content/img/矩形2.png');position: absolute; }.code { /* 验证码 */ width: 92px; background: url("../../Content/img/bj2.png"); }.btn { /* 登录 */ width: 182px; height: 45px;background: url("../../Content/img/dl.png"); }input::-webkit-input-placeholder { /* 设置占位符的颜色 */color: #cccccc;}</style>
注意修改相关素材图片的路径
1.3、修改默认的路由
二、注册页面
1.1、html布局代码
<div class="container"><div class="row justify-content-end"><h1 style="color: #fff;">图书管借阅用户注册</h1></div><div class="signIn_box mr-auto"><!-- 顶部欢迎语 --><div class="title row ml-auto mr-auto justify-content-between align-items-center"><h1 style="color: #fff;">欢迎注册</h1><h5 class="text-buttom"><a href="http://127.0.0.1:5500/Login.html">返回登陆</a></h5><div class="underline"></div></div><!-- 注册表单 --><div class="signInForm"><form autocomplete="off"><!-- 用户 --><div class="form-group userD"><input type="text" class="user" placeholder="请输入用户名"><i class="signInI" style="background: url('img/2.png') no-repeat;"></i></div><!-- 密码 --><div class="form-group userD"><input type="text" class="user" placeholder="请输入密码"><i class="signInI" style="background: url('img/3.png') no-repeat;"></i></div><!-- 手机号 --><div class="form-group userD"><input type="text" class="user" placeholder="请输入11位手机号"><i class="signInI"></i></div><!-- 验证码 --><div class="form-group userD row ml-auto mb-5"><input type="text" class="user mr-3" placeholder="请输入验证码" style="width: 310px;"><i class="signInI"></i><div class="yam text-center align-items-center"><a href="#">获取验证码</a></div></div><!-- 注册按钮 --><div class="btn mb-lg-2"><a href="#">注册新用户</a></div><!-- 条件 --><a href="#">注册表示阅读并同意《服务协议》</a></form></div></div></div>
1.2、css样式代码
<style>a {color: #fff;}a:hover {color: #fff;text-decoration: none;}body {background: url("img/bg2.png") no-repeat bottom;background-size: cover;height: 100vh;padding: 2rem 0;}.signIn_box {/* 大盒子 */padding: 20px;width: 630px;height: 537px;position: absolute;top: 200px;right: 260px;}.underline {/* 注册下划线 */width: 753px;height: 2px;background-image: url("img/下划线.png");}.signInForm {/* 表单的大盒子 */padding: 54px;}.userD {/* 输入框的父盒子 */position: relative;}.user {/* 输入框 */width: 480px;height: 55px;border-radius: 10px;outline-style: none;padding-left: 50px;color: #fff;background: url("img/bj3.png");}.signInI {/* 图标 */display: block;width: 30px;height: 43px;position: absolute;top: 7px;left: 10px;color: #f39800;background: url("img/1.png") no-repeat;}.yam {/* 获取验证码 */width: 150px;height: 55px;line-height: 55px;border-radius: 10px;font-size: 18px;background: #ed7045;}.btn {/* 注册按钮 */width: 476px;height: 55px;font-size: 24px;background: #f39800;}input::-webkit-input-placeholder{/* 设置占位符的颜色 */color: #cccccc;}</style>
注意修改素材图片的路径问题
现在已经有了两个控制跟视图
三、登陆与注册的切换跳转
跳转页面的方法很简单,在对于的跳转A标签中设置一下需要跳转到的哪一个控制器下的视图就可以了
1.1、登陆跳转注册
1.2、注册跳转登陆
图书管理系统之登陆注册页面布局(一)相关推荐
- java 租车管理系统_jsp+servlet+jdbc实现的java web共享租车信息管理系统,包括登陆注册,页面框架Easy UI...
项目描述 初学java web项目时做的一个课设,基于servlet+jsp+jdbc的后台管理系统,包含5个模块:汽车账户部管理.租车账户部管理.汽车信息管理表.租车记录表.租车租聘表.功能完整,均 ...
- JavaEE学习之jsp编写登陆注册页面
JavaEE学习之jsp编写登陆注册页面 刚开始学习javaee,好多东西需要一点点积累.最近用jsp和简单的JavaScript写的登录注册界面,简单做一下记录. 准备–页面布局 登录和注册界面的H ...
- html制作登陆注册页面
html制作登陆注册页面 源代码如下 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- jsp mysql登录注册实验报告_登陆注册页面实验报告.doc
登陆注册页面实验报告 兰州理工大学 二.数据库设计 本系统采用mysql数据库,只有一个表:数据表userinfoinfo用来存储后台会员名称,密码和基本资料. 2.1用户信息表: 下面是用户信息表表 ...
- 12月11日,12月12日登陆注册页面的进度
12月11日晚 抽出时间读学姐给的登录注册页面代码,有不懂的地方就百度,基本搞清楚了点登陆注册页面的基本框架和元素的作用.重点学习了<input><button><for ...
- python 登陆注册页面练习
文章目录 一.英雄联盟登陆 二.md5盐值登陆注册页面 一.英雄联盟登陆 import random while True:print("\t\t\t英雄联盟商城界面\n")pri ...
- javaweb 登陆注册页面
视图的数据修改,表中也修改 引用工具类用<%@ page import=""%> <%@ page import="java.util.Date&quo ...
- PHP实现简单登陆注册页面
PS:个人学习记录 数据库设置: login.html: <!DOCTYPE html> <html><head><meta charset = " ...
- MVC 登陆注册页面
(一)显示页面的主函数{controller} public class uController : Controller{//// GET: /u/public ActionResult Index ...
最新文章
- Python 标准库之 commands
- Spring+Quartz实现定时任务的配置方法
- 判断控件是否出现了滚动条
- php新浪api,php调用新浪短链接API的方法,php调用新浪api_PHP教程
- 计算机网络实验设计应用题,计算机网络实验三实验报告.doc
- LCS最长公共子序列
- linux 操作系统中的谷歌浏览器google chrome打不开怎么解决
- 游戏中的AI及实用算法逻辑
- Angular问题03 @angular/material版本问题
- xgboost子树可视化
- html中%3c%3e括号,打开关闭大括号检查
- 如何使用ITEXTSHARP将HTML代码字符串写进PDF
- IdentityServer4之Client Credentials(客户端凭据许可)
- wiki(维基)系统
- 安卓终端模拟器的安装和使用
- CSDN:2019年度CSDN博客之星评选竞赛——105号【一个处女座的程序猿】,感谢您,投上的宝贵一票,感谢!感恩!
- mac 卸载pkg安装包
- MIPI RFFE扫盲(1)
- 2022K班结对编程任务
- sdut 4408 这真的是签到题
热门文章
- 项目管理--统筹兼顾
- JS实现HTML实体与字符的相互转换(一)
- 基督教的旧约圣经和新约圣经
- LaTeX插入GIF的标准方法
- 乐视视频”剧“好看 2016海量剧集精彩来袭
- ES6 JavaScript Promise的感性认知
- 【推荐】真正的安卓网络摄像机(Android IPCamera)任意浏览器输入IP地址即可观看视频
- 第1期-通过携程爬取机票价格
- android程序安装空间不足,vivo x9总提示内存不足安装软件失败怎么办?
- 美克美家php面试,(⊙o⊙)细说【美克美家】之待遇