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

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

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