1 - 基础页面（被继承的模板）

{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>测试</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .navbar{

            background-color: lightskyblue;

            border-radius: 0;

            box-shadow: 10px 10px 5px #888888;

        }

        body{

            padding-top: 80px;

            background-color: whitesmoke;

        }

        ul{

            list-style: none;

            cursor: pointer;

            text-align: center;

        }

        .menu > ul > li > p{

            height: 50px;

            line-height: 50px;

            font-family: 宋体;

            font-size: large;

            margin-bottom: 0;

            margin-top: 0;

            text-align: center;

            color: midnightblue;

            background-color: lightskyblue;

            box-shadow: 10px 10px 5px #888888;

        }

        .menu > ul > li > p:hover{

            background-color: deepskyblue;

            font-size: medium;

        }

        .menu > ul > li > ul{

            height: 100px;

            font-family: 宋体;

            font-size: large;

            display: none;

            background-color: aliceblue;

            box-shadow: 10px 10px 5px;

        }

        .menu > ul > li > ul > li{

            line-height: 30px;

            color: midnightblue;

        }

    </style>

</head>

<body>

    {# 头部区域 #}

    <nav class="navbar navbar-fixed-top">

      <div class="container-fluid">

        <div class="navbar-header">

          <a class="navbar-brand" href="/">

            <img alt="Brand" src="{% static 'imgs/1.jpg' %}" width="40px" height="30px">

          </a>

        </div>

      </div>

    </nav>

    {# 内容区域 #}

    <div class="container-fluid">

        <div class="row">

            {# 左侧菜单 #}

            <div class="col-md-2">

                <div class="menu">

                    <ul class="ul1">

                        <li>

                            <p>菜单一</p>

                            <ul>

                                <li>测试</li>

                                <li>测试</li>

                                <li>测试</li>

                            </ul>

                        </li>

                        <li>

                            <p>菜单二</p>

                            <ul>

                                <li>测试</li>

                                <li>测试</li>

                                <li>测试</li>

                            </ul>

                        </li>

                        <li>

                            <p>菜单三</p>

                            <ul>

                                <li>测试</li>

                                <li>测试</li>

                                <li>测试</li>

                            </ul>

                        </li>

                        <li>

                            <p>菜单四</p>

                            <ul>

                                <li>测试</li>

                                <li>测试</li>

                                <li>测试</li>

                            </ul>

                        </li>

                    </ul>

                </div>

            </div>

            {# 中间内容 #}

            <div class="col-md-8">

                {% block content %}

                {% endblock %}

            </div>

            {# 右侧栏区域 #}

            <div class="col-md-2">

                <div class="panel panel-info">

                    <div class="panel-body">

                        面板

                    </div>

                </div>

                <div class="panel panel-info">

                    <div class="panel-body">

                        面板

                    </div>

                </div>

                <div class="panel panel-info">

                    <div class="panel-body">

                        面板

                    </div>

                </div>

                <div class="panel panel-info">

                    <div class="panel-body">

                        面板

                    </div>

                </div>

                <div class="panel panel-info">

                    <div class="panel-body">

                        面板

                    </div>

                </div>

            </div>

        </div>

    </div>

    <script>

        $('.menu > ul > li > p').click(function(){

            $(this).next('ul').slideToggle()

        })

    </script>

</body>

</html>

2 - 首页

{% extends 'base.html' %}

{% block content %}

    <table class="table table-bordered">

        <thead class="navbar">

            <tr>

                <th>12</th>

                <th>31</th>

                <th>31</th>

                <th>31</th>

                <th>3123</th>

            </tr>

        </thead>

        <tbody class="navbar">

            <tr>

                <td>12</td>

                <td>31</td>

                <td>313</td>

                <td>123</td>

                <td>3131</td>

            </tr>

            <tr>

                <td>12</td>

                <td>31</td>

                <td>313</td>

                <td>123</td>

                <td>3131</td>

            </tr>

        </tbody>

    </table>

{% endblock %}

3 - 页面效果

最新文章

  1. google api autocomplete
  2. 移动应用开发测试工具Bugtags集成和使用教程
  3. Android之Splash页面
  4. C# Emit动态代理生成一个实体对象
  5. Ruby--hash
  6. Xcode工程中全局搜索汉字的方法
  7. VMware ESXi CentOS Linux虚拟机安装VMware Tools教
  8. 【FLYabroad 】微软内部代码检查工具 (Microsoft Source Analysis for C#)[转]
  9. 用JUnit4进行参数化测试
  10. Android学习资料PDF免费大放送，每日更新！有需要的亲看这里
  11. 201521123085《Java程序设计》第4周学习总结
  12. Ceph,TFS,FastDFS,MogileFS,MooseFS,GlusterFS 对比
  13. Oracle使用PLSQL导入数据后中文乱码的解决方法
  14. 对Activity的DecorView的包装(二)
  15. win10 右键添加“在此打开powershell”
  16. MySQL 8 配置文件
  17. [Java] [Singleton] [DCL][happens-before]
  18. Android gradle实现多渠道号打包
  19. jmeter插件使用说明
  20. JAVA记录-redis缓存机制介绍（一）

热门文章

  1. 深度强化学习中稀疏奖励问题Sparse Reward
  2. vue 子目录配置，负载均衡 nginx
  3. Netty基础招式——ChannelHandler的最佳实践
  4. 3、基于Python建立任意层数的深度神经网络
  5. MySQL的函数使用
  6. C++ //构造函数调用规则 //1.创建一个类，C++编译器会给每个类添加至少3个函数 //默认构造（空实现） //析构函数（空实现） //拷贝函数（值拷贝） //2.如果我们写了有参构造函数 编译器就不会提供默认构造函数 但是会提供拷贝构造函数 //3.如果我们写了拷贝函数 编译器就不再提供 默认 有参 构造函数
  7. SpringBoot 如何进行参数校验，老鸟们都这么玩的！
  8. 40k*16 薪，五年Android开发4轮面试拿下腾讯 Offer ！（附真题）
  9. Go语言笔记[实现一个Web框架实战]——EzWeb框架(一)
  10. Notes about multiboot usb creator