嘿嘿嘿，前端小白来画静态界面

画这个界面期间其实遇到的问题还挺多，真让人抓耳挠腮的。

真的，大家一定要注意布局！！！注意布局！！！

这个图是整体静态页面

 点击跳转其他页面

这段代码主要是整体页面的布局代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="index.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <div class="left-header">
            <div class="img"><img class="img-logo" src="javaenginer/img/logo.png" alt=""></div>
            <div class="title">
                <h2>左侧导航栏右侧内容区域</h2>
            </div>
        </div>
    </div>
    <!-- 主体 -->
    <div class="container">
        <!-- 左侧导航 -->
        <div class="left_daohang">
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
            <div class="menu">
                <i class="fa fa-bars"></i>
                <span class="menu-title" aria-hidden="true">一级菜单</span>
                <ul class="menu-content">
                    <li class="two">二级菜单</li>
                    <ul class="menu-content-third">
                        <li src="1.html">三级菜单</li>
                        <li src="2.html">三级菜单</li>
                        <li src="3.html">三级菜单</li>
                    </ul>
                </ul>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="right_content">
            <iframe name="mainFrame" id="mainFrame" frameborder=" 0 " style="width:90%;height:100% " src="1.html "></iframe>
        </div>
    </div>
    <!-- iframe跳转 -->
    <script type="text/javascript ">
        let menus = document.querySelectorAll('.menu-content-third')
        let lis = document.querySelectorAll('.menu-content-third li')
        let iframe = document.querySelector('iframe')
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].removeAttribute('class', 'dot')
                }
                iframe.setAttribute('src', lis[i].getAttribute('src'))
                this.setAttribute('class', 'dot')
            }
        }
    </script>
    <!-- 导航栏 -->
    <script>
        $(function() {
            //第一步，隐藏子菜单项//找到每一个菜单项，用each循环    
            $(".menu ").each(function() {
                $(this).children(".menu-content ").hide();
            });
            //给所有的主标题添加点击事件    
            $(".menu-title ").each(function() {
                $(this).click(function() {
                    //弹出当前主标题下的子标题列表          
                    var mList = $(this).parents(".menu ").children(".menu-content ");
                    //展开、收起导航栏        
                    mList.slideToggle();
                });
            });
            //找到二级标签，给他注册点击事件，收展它下面的三级标题组  
            $(".two ").click(function() {
                $(".two ").next().slideToggle();
            });
        })
    </script>
</body>

</html>

 1.html包含table表单

<body>
    <div class="content con1">
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题1</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题2</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题3</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="table">
            <table id="tab_table" cellpadding="0" cellspacing="0">
                <caption>
                    <h3>标题</h3>
                </caption>
                <thead>
                    <tr>
                        <th>1</th>
                        <th>2</th>
                        <th>3</th>
                        <th>4</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a href="#">文档.docx</a></td>
                        <td>qq</td>
                        <td>qq</td>
                        <td>qq</td>
                    </tr>
                    <tr>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                        <td>web</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>

可以随便写内容的2.html页面


<div class="content con2">
22222222222222222222222222222222
</div>

可以随便写内容的3.html页面


<div class="content con3">
3333333333333333333333333333333333333
</div>

代码可以直接使用。

附上css样式，嘿嘿嘿

* {
    margin: 0;
    padding: 0;
}

body {
    max-width: 1920px;
    min-width: 1024px;
    box-sizing: border-box;
}


/* 头部 */

.header {
    height: 3rem;
    background-color: #053796;
    color: #fff;
    display: flex;
    justify-content: space-between;
}

.left-header {
    font-size: 1.2rem;
    line-height: 3rem;
    display: flex;
    justify-content: space-between;
}

.img {
    margin: .5rem;
    height: auto;
    width: auto\9;
    /* width:90%;
    text-align: center;
    padding:  0 0.2rem ; */
}

.title h2 {
    font-size: 1.5rem;
}

.right-header {
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    width: 4rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
}


/* index页面容器 */

.container {
    height: 93vh;
    width: 100%;
    display: flex;
    flex-direction: colum;
    overflow-y: auto;
}

.left_daohang {
    /* 定位 */
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 0;
    width: 10%;
    height: 95vh;
    min-width: 200px;
    /* 设置最小宽度防止文字被压缩 */
    background-color: #ececec;
    overflow-x: scroll;
}

.menu {
    width: 100%;
    margin-left: 1rem;
    margin-top: 1rem;
    overflow: hidden;
}

i {
    color: #053796;
}

.menu-img {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    margin: auto 1rem;
}

.menu-title {
    height: 1.5rem;
    cursor: pointer;
    font-size: 1.25rem;
    color: #000;
    overflow: hidden;
    border-bottom: 1px #000;
}

.content-content {
    display: block;
    font-size: .875rem;
}

ul {
    width: 100%;
}

.menu-content li {
    margin: 1rem auto;
    margin-left: 2.5rem;
    text-align: left;
    list-style: none;
}

li:hover {
    text-decoration: none;
    color: #00aae3;
    cursor: pointer;
}

.menu-content-third .java li:hover {
    color: #00aae3;
    cursor: pointer;
}

.menu-content-third {
    margin-left: 3.5rem;
    font-size: .875rem;
}


/* iframe跳转内容 */

.right_content {
    width: 90%;
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 10%;
    /* 隐藏 */
    overflow-y: auto;
    overflow-x: hidden;
}


/* 跳转子页面样式 */

.content {
    width: 100%;
    position: fixed;
    top: 3rem;
    bottom: 0;
    left: 15%;
    overflow-y: auto;
    overflow-x: hidden;
}

.con2 {
    background-color: aquamarine;
}

.con3 {
    background-color: #419aff;
}

a {
    text-decoration: none;
}

table {
    margin: 1rem 0 1rem;
    font-size: 1rem;
    line-height: 2rem;
    text-align: center;
    width: 100%;
}

caption {
    margin: 1rem 0 1rem;
    text-align: left;
    font-size: 1.5rem;
    line-height: 2rem;
}

.table {
    width: 80%;
    border-bottom: 3px solid #000;
}

th,
td {
    height: 3rem;
    border-collapse: collapse;
    border: 1px solid rgb(79, 242, 3);
}

table thead th:nth-child(),
tbody td:nth-child() {
    width: 20%;
}

thead>tr>th {
    padding: 1px;
    color: #419aff;
    font-weight: normal;
}

# html5 # css3
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟