master

分支 (1)

管理

管理

master

xa_iot2402_www
/
index.html

<!DOCTYPE html>
<html>
    <head>
        <!-- 当前文档的字符集编码为utf-8 -->
        <meta charset="utf-8">
        <meta name="author" content="disenQF" >
        <meta name="keywords" content="CGI开发 H5模板 千锋教育 西安物联网">
        <title>HTML5模板-弹性盒子</title>
        <!-- 引入外联样式文件 -->
        <link rel="stylesheet" href="/css/my.css">
        <style>
            /* 弹性盒子: 在盒子模型（width,height,padding,margin,border,border-radiu）基础之上，增强子元素的对齐方式 */

            .img-circle{
                width: 50px;
                height: 50px;
                border-radius: 50%;
            }
            .logo {
                height: 45px;
            }
            /* display: flex; 将一个标签的类型修改为弹性盒子（对齐，自动计算子标签的所占空间-自动排列） */
           /* justify-  主轴的对齐方式(row-水平轴为主, column-垂直轴为主)
              align-items 副轴的对齐方式
              content 代表子元素，items代表文本内容
           */
            #toper{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                border-bottom: 1px solid lightgray;
            }
            /*  flex-wrap: wrap; 一行不足排列时，自动换行,  nowrap 不换行*/
            .row{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
            }
            .row-vcenter{
                align-items: center;
            }
            #userInfo{
                margin: 0 10px;
            }
            #main{
                height: 100%;
            }
            #footer{
                height: 30px;
                border-top: 1px solid lightgray;
                text-align: center;
            }

            #container{
                height: 96%;
                display: flex;
                flex-direction: column;
            }

            #menu{
                width: 240px;
                border-right: 1px solid lightgray;
            }

            #main > iframe {
                height: 100%;
                width: 100%;
            }
            ul,li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            li {
                padding: 10px;
                margin: 10px;
            }
            li>a{
                color: blue;
                text-decoration: none;
            }
            li:hover{
                background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="toper">
                <img class="logo" src="http://www.qfedu.com/images/index2021/logo-edu.png">
                <div class="row row-vcenter">
                    <b id="userInfo">Disen</b>
                    <img id="userHead" src="/images/head.jpg" class="img-circle">
                </div>
            </div>
            <div id="main" class="row">
                <div id="menu">
                    <h3>我的功能模块</h3>
                    <!-- ul 无序列表, ol有序列表，列表项都是li -->
                    <ul>
                        <li>
                            <a target="content_frame" href="page1.html">页面1</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page2.html">页面2</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page3.html">页面3</a>
                        </li>
                        <li>
                            <a target="content_frame" href="page4.html">页面4</a>
                        </li>
                    </ul>
                </div>
                <!-- iframe 网页中的内嵌窗口，a标签的target属性中使用name的属性值
                  <a href="xxx" target="content_frame">xxx</a>
                -->
                <iframe name="content_frame" frameborder="0"></iframe>
            </div>
            <div id="footer">
                <b>版本所有@千锋西安-IoT2402</b><br>
                <i>2024-10-10</i>
            </div>
        </div>

        <script>
            window.onload = function(){
                if(localStorage.getItem("uid") == null){
                    // 未登录
                    location.href = "/login.html";
                }else{
                    userInfo.innerText = localStorage.nickname;
                    userHead.setAttribute("src", localStorage.head);
                }
            }
        </script>
    </body>
</html>