图书管理系统之登陆注册页面布局（一）

图书管理系统之登陆注册页面布局（一）

相关源码下载连接：/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;">密&nbsp&nbsp&nbsp码</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="#">登&nbsp&nbsp&nbsp录</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、注册跳转登陆