图书管理系统之登陆注册页面布局（一）
图书管理系统之登陆注册页面布局（一）
前言，创建一个新的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样式代码
注意修改相关素材图片的路径
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样式代码
注意修改素材图片的路径问题
现在已经有了两个控制跟视图
三、登陆与注册的切换跳转
跳转页面的方法很简单，在对于的跳转A标签中设置一下需要跳转到的哪一个控制器下的视图就可以了
1.1、登陆跳转注册
1.2、注册跳转登陆
