简单后台页面布局

已于 2022-10-23 15:58:21 修改
阅读量1.1k 收藏 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>
微笑伴你而行
关注
专栏目录
HTML基础——网站后台显示页面
anjiukonghe77852的博客
08-16 398
1、框架集标签：（作用：将页面进行区域的划分) 　　<frameset rows="" cols=""> 　　　　<frame src=""/> 　　　　<frame name=""/> 　　</frameset> 　　属性： 　　　　cols:进行垂直切割划分，可以切割为任一块（参数的值相加=100%，其中有一块可以使用...
简易的后台管理系统HTML静态页面
07-02
简易的后台管理系统HTML静态页面，内有基本的文章/图片的增删改查样式!!!!
jsp精简后台模板
11-22
jsp的精简后台管理系统模板、css样式、js模式、mvc模式
简单的后台管理页面框架
11-28
做了一个简单的后台管理的页面架构，下载可以直接使用，参考页面 verycms
电商后台管理HTML源码模版：快速搭建后台管理界面
最新发布
weixin_32005771的博客
08-27 801
本文还有配套的精品资源，点击获取 简介：本HTML源码模版专为电商网站后台管理系统设计，提供登录/注册页、首页、商品管理、订单管理、用户管理、营销活动管理、数据统计等模块的基本页面设计。开发者可结合ThinkPHP框架进行后端逻辑开发，快速搭建出专业、美观且功能完备的后台管理系统。 1. HTML源码模版介绍 HTML（超文本标记语言）是用于创建网页的标准标记语...
html 后台页面
02-02
后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面后台页面
管理后台html页面
07-31
漂亮使用的二级菜单目录，网页代码简单易懂，欢迎下载。
html 后台页面布局
weixin_30786617的博客
08-07 285
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"&gt...
web-页面常见后台布局
09-09
web-页面后台布局,提供简单的布局代码示例，使用display:flex简洁的布局语法实现。目前，display:flex已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
简单通用的后台登录界面html模板
07-14
【标题】：“简单通用的后台登录界面html模板” 在网页设计和开发中，一个简洁而通用的后台登录界面html模板是构建任何Web应用程序的基础部分。它通常包含输入字段，如用户名和密码，以及登录按钮，有时还会有...
使用asp.net实现简单登录界面+网页简单布局
04-13
在本文中，我们将深入探讨如何使用ASP.NET技术创建一个简单的登录界面，并实现基本的网页布局。ASP.NET是Microsoft开发的一个强大的Web应用程序框架，它提供了一种高效、安全的方式来构建动态网站和应用程序。 首先...
漂亮的后台HTML静态页面
02-04
分享一个非常专业、漂亮的后台HTML静态页面，界面采用Frame框架布局，亲测可用，样式在多个浏览器中正常显示。内容丰富几乎包含所有的界面和功能。
简单后台管理登录界面
05-19
初学者学习html+css+js可以看一下，比较好用的后台管理登录界面，还有验证和正则有
后台管理系统模版（jsp页面版）
05-12
列子直接部署在TomCat运行 采用JAVA的jsp页面 登录不用密码，直接可以登录
HTML后台系统界面
06-01
1、有30种HTML整体功能 适合学校、房地产、私营网站、公司门户、个人网站、OA办公系统、新闻发布 等等多种风格 2、里面有html页面 css样式 jsp图片 3、分数要得有点多 也算辛苦分 找了好久才凑齐
简单布局的后台管理模板
06-01
【简单布局的后台管理模板】是一种专为后台管理系统设计的网页模板，其核心特点是界面简洁，布局清晰，便于用户快速理解和操作。这种模板通常适用于各种企业管理软件、内容管理系统（CMS）、电子商务平台等后端界面...
简单有趣的后台登录页面模板
09-29
"简单有趣的后台登录页面模板"正是这样一个面向初学者的设计示例，它融合了HTML、CSS等核心技术，帮助新手快速理解和实践网页制作。 HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的...
后台管理系统html页面模板推荐
m0_46013789的博客
12-27 5060
后台管理系统（Backend Management System）是指用于管理和控制某个系统或应用程序的后端功能和数据的系统。它通常用于管理用户、权限、数据、配置等方面的操作。
如何编辑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、付费专栏及课程。

余额充值