图书管理系统之登陆注册页面布局(一)
相关源码下载连接:
前言,创建一个新的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、注册跳转登陆