简单后台页面布局

已于 2022-10-23 15:58:21 修改
阅读量908 收藏 5
点赞数 2
分类专栏： java EE 文章标签： html css 前端
于 2022-10-16 12:47:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52108058/article/details/127339286
版权

文章目录

整体分为顶部头部，左侧菜单，右侧展示栏

一、案例演示

请添加图片描述

二、登录页面

1、登录页面

在这里插入图片描述

2、demo02_login.jsp

<%@page isELIgnored= "false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/jquery02.js"></script>
<script type="text/javascript" src="../js/js_login_demo02.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html{
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background-image: url("Desert.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }a

     .loginDiv{
         width: 37%;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 300px;
         background-color: rgba(75, 81, 95, 0.3);
         box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
         border-radius: 5px;
     }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p {
        margin-top: 30px;
        margin-left: 20px;
        color: azure;
    }

    input {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }
</style>
<body>


<form id="form" class="loginDiv">
    <h1 style="text-align: center;color: aliceblue;">登陆</h1>

   <p> 账号：<input name="username" type="text" id="username"/><br><label id="name_trip"></label></p>
    <p>密码：<input name="password" type="text" id="password"/><br><label id="password_trip"></label></p>

    <div style="text-align: center;margin-top: 30px;">
        <input  type="button" class="button" value="登录" onclick="json()"/>
        <input type="reset" class="button" value="重置">
    </div>
</form>
</body>
</html>

三、注册页面

1、注册页面

在这里插入图片描述

2、demo02_update.jsp

<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2022/10/14
  Time: 9:27
  To change this template use File | Settings | File Templates.
--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored= "false" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/jquery02.js"></script>
<script type="text/javascript" src="../js/js_register_demo02.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: url(background.jpg) no-repeat 0px 0px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #loginDiv {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 650px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;
    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p,
    .sexDiv {
        margin-top: 10px;
        margin-left: 20px;
        color: azure;
    }

    .sexDiv>input,
    .hobby>input {
        width: 30px;
        height: 17px;
    }

    input,
    select {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    .introduce {
        margin-left: 110px;
    }

    .introduce>textarea {
        background-color: rgba(216, 191, 216, 0.5);
        border-style: hidden;
        outline: none;
        border-radius: 5px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #000000;
    }

    b {
        margin-left: 50px;
        color: #FFEB3B;
        font-size: 10px;
        font-weight: initial;
    }
</style>
<body>
<form class="registerlogin" id="registerlogin"  method="post">
    <h1>注册</h1>
    <p>用户姓名：<input name="name" type="text" id="username"/><label id="name_trip"></label></p>
    <p>用户密码：<input name="password" type="text" id="password"/><label id="password_trip"></label></p>
    <p>确认密码：<input id="surePassword" type="password"/><label id="surePassword_trip"></label></p>
    <p style="text-align: center;">
        <input type="button" class="button" value="注册" onclick="register()">
        <input type="reset" class="button" value="重置">
    </p>

</form>
</body>
</html>

四、修改布局页面

1、修改密码页面

在这里插入图片描述

2、demo02_update.jsp

<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2022/10/14
  Time: 10:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="../js/jquery02.js"></script>
<script type="text/javascript" src="../js/js_update_demo02.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: url(img2.jpg) no-repeat 0px 0px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        -moz-background-size: 100% 100%;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    #loginDiv {
        width: 37%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 650px;
        background-color: rgba(75, 81, 95, 0.3);
        box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
        border-radius: 5px;
    }

    #name_trip {
        margin-left: 50px;
        color: red;
    }

    p,
    .sexDiv {
        margin-top: 10px;
        margin-left: 20px;
        color: azure;
    }

    .sexDiv>input,
    .hobby>input {
        width: 30px;
        height: 17px;
    }

    input,
    select {
        margin-left: 15px;
        border-radius: 5px;
        border-style: hidden;
        height: 30px;
        width: 140px;
        background-color: rgba(216, 191, 216, 0.5);
        outline: none;
        color: #f0edf3;
        padding-left: 10px;
    }

    .button {
        border-color: cornsilk;
        background-color: rgba(100, 149, 237, .7);
        color: aliceblue;
        border-style: hidden;
        border-radius: 5px;
        width: 100px;
        height: 31px;
        font-size: 16px;
    }

    .introduce {
        margin-left: 110px;
    }

    .introduce>textarea {
        background-color: rgba(216, 191, 216, 0.5);
        border-style: hidden;
        outline: none;
        border-radius: 5px;
    }

    h1 {
        text-align: center;
        margin-bottom: 20px;
        margin-top: 20px;
        color: #020101;
    }

    b {
        margin-left: 50px;
        color: #FFEB3B;
        font-size: 10px;
        font-weight: initial;
    }
</style>
<body>
<form class="registerlogin" id="update"  method="post">
    <h1>修改密码</h1>
    <p>指定账号：<input type="text" name="name"><br><label id="name_trip"></label></p>
    <p>修改密码：<input type="text" name="password"><br><label id="password_trip"></label></p>
    <p>确认密码：<input type="text"><br><label id="surePassword_trip"></label></p>
    <p style="text-align: center;">
        <input type="button" class="button" value="修改" onclick="update()">
        <input type="reset" class="button" value="重置">
    </p>

</form>
</div>



</body>
</html>

五、后台页面

在这里插入图片描述

1、mainlogin.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 150px;
            height: 300px;
            border: 1px solid;
            text-align: center;
            float: left;
            background: aqua;
        }
        .div2{
            width: 1300px;
            height: 600px;
            float: left;
        }


        .div2 iframe{
            width: 100%;
            height: 600px;
        }

        a{
            text-decoration: none;
        }
        .title{
            width: 100%;
            height: 70px;
            background: chartreuse;
            text-align: center;
            line-height: 70px;
        }
    </style>

</head>




<body>
<%--标题--%>
<div class="title">
    <h1>欢迎来到后台页面</h1>
    <div >

    </div>
</div>
<%--菜单--%>
<div class="div1">
    <div class="123">
        <a href="#"  style="color: blue">首页</a>
    </div>
    <hr>

    <div>
        <!-- <a> 标签的 target 属性规定在何处打开链接文档-->
        <a href="http://localhost:8080/javaee_war_exploded/jsp/demo02_update.jsp" target="test">修改密码</a>
    </div>
    <hr>

    <div>
        <a href="http://localhost:8080/javaee_war_exploded/jsp/demo02_login.jsp" target="test">登录页面</a>
    </div>
    <hr>

    <div>
        <a href="http://localhost:8080/javaee_war_exploded/jsp/demo02_register.jsp" target="test">注册页面</a>
    </div>
    <hr>
</div>

<%--显示栏--%>
<div class="div2">
    <iframe name="test"></iframe>
</div>


</body>
</html>
微笑伴你而行
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web-页面常见后台布局
09-09
web-页面后台布局,提供简单的布局代码示例，使用display:flex简洁的布局语法实现。目前，display:flex已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
后台管理系统模版（jsp页面版）
05-12
列子直接部署在TomCat运行 采用JAVA的jsp页面 登录不用密码，直接可以登录
jsp课程项目（一）·后台管理系统设计与实现
Huangxu_MIKU的博客
05-20 6596
1、功能设计 后台系统作为管理人员控制web后台的重要手段之一，最主要的功能（相对于较简陋的后台管理系统而言）即是实现与数据库的交互。作为模板的手机商城有一库四表，其中比较重要的是user（用户表）、mobileForm（商品表）和outForm（订单表）这三个表，在反复斟酌之后我的设计思路如下： 用户管理：增删改查，以及用户权限的设置，比如用户禁用、启用等。 商品管理：增删改...
JSPServlet实现后台管理
qq_45686696的博客
11-26 1448
后台管理（用户管理） 1.主界面（userList.jsp） <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="com.weihai.dao.*" %>' <%@ page import="com.wei...
轻量化后台管理HTML设计页面
风海之家
11-03 1733
轻量化设计后台管理系统UI
html 后台页面
02-02
后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面
简单的后台管理页面框架
11-28
做了一个简单的后台管理的页面架构，下载可以直接使用，参考页面 verycms
管理后台html页面
07-31
漂亮使用的二级菜单目录，网页代码简单易懂，欢迎下载。
html 后台页面布局
weixin_30786617的博客
08-07 255
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"&gt...
HTML基础——网站后台显示页面
anjiukonghe77852的博客
08-16 349
1、框架集标签：（作用：将页面进行区域的划分) 　　<frameset rows="" cols=""> 　　　　<frame src=""/> 　　　　<frame name=""/> 　　</frameset> 　　属性： 　　　　cols:进行垂直切割划分，可以切割为任一块（参数的值相加=100%，其中有一块可以使用...
简易的后台管理系统HTML静态页面
07-02
简易的后台管理系统HTML静态页面，内有基本的文章/图片的增删改查样式!!!!
漂亮的后台HTML静态页面
02-04
分享一个非常专业、漂亮的后台HTML静态页面，界面采用Frame框架布局，亲测可用，样式在多个浏览器中正常显示。内容丰富几乎包含所有的界面和功能。
简单后台管理登录界面
05-19
初学者学习html+css+js可以看一下，比较好用的后台管理登录界面，还有验证和正则有
HTML后台系统界面
06-01
1、有30种HTML整体功能 适合学校、房地产、私营网站、公司门户、个人网站、OA办公系统、新闻发布 等等多种风格 2、里面有html页面 css样式 jsp图片 3、分数要得有点多 也算辛苦分 找了好久才凑齐
后台管理-基础布局.png
07-08
这是一张适合大部分系统的后台管理页面总布局，简单明了的展示一个后台管理系统最基础的样子、希望能够帮助到你您。
后台h5界面
04-26
后台界面，包括各种样式表单，时间，图形，分页等，以及登录注册锁屏等页面
原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件
01-21
使用SYSUI开发一个后台管理系统界面，支持左侧菜单，右侧内容的界面模式，以及仿桌面的形式的页面，包含一个基本的后台操作页面。界面通过js配置实现效果展示。内涵文档说明手册，及其其他插件，同样使用原生js开发...
简单通用文章系统后台管理模板.zip
05-27
简单通用文章系统后台管理模板，DIV CSS布局设计，全套模板，包括登录、首页、新增作品、作品管理、系统设置等HTML后台模板页面。
如何编辑django后台的页面布局
最新发布
06-07
要编辑 Django 后台的页面布局，您需要使用 Django 的模板系统和 CSS 样式表。 首先，您需要创建一个名为 `base_site.html` 的模板文件，该文件应该位于您的应用程序的 `templates/admin/` 目录中。在这个模板文件中，您可以定义整个后台的页面布局和样式。 在模板文件中，您可以使用 Django 的模板系统来包含其他模板文件和动态内容。例如，您可以使用 `{% block %}` 标签来定义一个可替换的块，供其他模板文件扩展使用。 例如，以下是一个简单的 `base_site.html` 模板文件，它包括一个页眉和一个侧边栏： ```html {% extends "admin/base.html" %} {% block extrahead %} <link rel="stylesheet" type="text/css" href="{% static 'admin/custom.css' %}"> {% endblock %} {% block header %} <div id="header"> <img src="{% static 'admin/logo.png' %}" alt="My Site"> <h1>My Site</h1> </div> {% endblock %} {% block sidebar %} <div id="sidebar"> <ul> <li><a href="{% url 'admin:index' %}">Home</a></li> <li><a href="{% url 'admin:auth_user_changelist' %}">Users</a></li> <li><a href="{% url 'admin:auth_group_changelist' %}">Groups</a></li> </ul> </div> {% endblock %} ``` 在模板文件中，我们使用 `{% extends %}` 标签继承了 Django 的默认 `admin/base.html` 模板文件。然后，我们定义了一个 `{% block %}` 标签来替换页眉和侧边栏的内容。我们还包括了一个 `{% block extrahead %}` 标签来包含自定义 CSS 样式表。 要进一步自定义后台的页面布局和样式，您可以在 `custom.css` 文件中定义自己的 CSS 样式。例如，您可以使用 CSS 样式来更改后台的颜色方案、字体、边框等。 通过使用 Django 的模板系统和 CSS 样式表，您可以轻松地编辑 Django 后台的页面布局和样式，以满足您的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

微笑伴你而行

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值