JAVA EE：（6）功能实现（三）

最新推荐文章于 2024-07-25 23:26:40 发布

风_痕

最新推荐文章于 2024-07-25 23:26:40 发布

阅读量468

点赞数 1

文章标签： java-ee css html

本文链接：https://blog.csdn.net/qq_45915040/article/details/122373312

版权

一、主界面设计（样例）

将页面划分为多个部分，通过<iframe>标签将其他html页面引入到各个部分进行显示

top.html、bottom.html、right.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    我是欢迎页（尾部、头部）
</body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        #container{
            width: 200px;
            height: 100%;
        }
        .menu{
            width: 100%;
        }
        .menu_title{
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 20px;
            padding: 10px 0px;
            background-color: #7abaff;
            font-family: 楷体;
        }
        /*设置标题鼠标悬浮效果*/
        .menu_title:hover{
            cursor: pointer;
            font-style: italic;
            font-size: 21px;
            background-color: #b3d7ff;
        }
        .menu_item ul {
            list-style: none;
        }
        .menu_item a{
            text-decoration: none;
            color: black;
            width: 100%;
            height: 25px;
            background-color: #adb5bd;
            display: block;
            font-size: 14px;
            font-family: 楷体;
            padding: 5px 0px;
            line-height: 25px;
            text-align: center;
            border-bottom: 1px solid white;
        }
        .menu_item a:hover{
            background-color: #b3d7ff;
            color: black;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="menu">
            <div class="menu_title">
               菜单标题
            </div>
            <div class="menu_item">
                <ul>
                    <li>
                        <a href="">菜单一</a>
                    </li>
                    <li>
                        <a href="">菜单二</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="menu">
            <div class="menu_title">
                菜单标题
            </div>
            <div class="menu_item">
                <ul>
                    <li>
                        <a href="">菜单一</a>
                    </li>
                    <li>
                        <a href="">菜单二</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #container{
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        #top{
            width: 100%;
            height: 80px;
            background-color: #007bff;
        }
        #bottom{
            width: 100%;
            height: 30px;
            background-color: #6f42c1;
        }
        #center{
            width: 100%;
            flex: 1;
            display: flex;
        }
        #left{
            width: 200px;
            height: 100%;
            background-color: red;
        }
        #right{
            flex: 1;
            height: 100%;
            background-color: #0f6674;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="top">
            <iframe src="top.html"
                    width="100%" height="100%"
                    frameborder="no"></iframe>
        </div>
        <div id="center">
            <div id="left">
                <iframe src="left.html"
                    width="100%" height="100%"
                    frameborder="no"></iframe>
            </div>
            <div id="right">
                <iframe src="right.html"
                        width="100%" height="100%"
                        frameborder="no"></iframe>
            </div>
        </div>
        <div id="bottom">
            <iframe src="bottom.html"
                    width="100%" height="100%"
                    frameborder="no" scrolling="no"></iframe>
        </div>
    </div>
</body>
</html>

效果图

二、将功能实现（一）中实现的网页整合到主界面中，作为其中的一部分

①用news.html替换right.html

②如何使左右之间存在间隔，需要在main.html中修改，不要再news.html中修改

③top.html中添加注销按钮，并调整它的位置和颜色和字体大小

④

⑴把top.html的跳转设置为跳转整个页面，否则会只有top的那部分跳转，其他部分不跳转

top.location.href = "login.html";可以跳转整个页面。

window.location.href = "login.html";(或者location.href = "login.html";)在自己的frame框架内部跳转。

⑵给<a>添加target="_top"，意思是目标是整个页面

（3）找页面的parent.parent.location。。。啥的

⑤显示用户名

错误：操作要放在跳转前面，否则不会执行。。。。。我也不知道为啥。。。一开始放在后面session死活没有消息，然后发现是没有执行这条语句直接跳转了，改到前面后好了

⑤点击导航栏，右边部分的页面跳转，导航栏不变

在left.html中给<a>加上href=“xx.html” “”target="xxx"，在main.html中给iframe起名叫xxx（名字随便起，只要写的时候一样就行）

风_痕

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVA EE：（6）功能实现（三）

一、主界面设计（样例）top.html、bottom.html、right.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> 我是欢迎页（尾部、头部）&..
复制链接

扫一扫