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 - 页面效果

一个Django项目中实现的简单HTML页面布局的更多相关文章

  1. celery 分布式异步任务框架(celery简单使用、celery多任务结构、celery定时任务、celery计划任务、celery在Django项目中使用Python脚本调用Django环境)

    一.celery简介: Celery 是一个强大的 分布式任务队列 的 异步处理框架,它可以让任务的执行完全脱离主程序,甚至可以被分配到其他主机上运行.我们通常使用它来实现异步任务(async tas ...

  2. Python开发入门与实战2-第一个Django项目

    2.第一个Django项目 上一章节我们完成了python,django和数据库等运行环境的安装,现在我们来创建第一个django project吧,迈出使用django开发应用的第一步. 2.1.创 ...

  3. [翻译]在Django项目中添加谷歌统计(Google Analytics)

    原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...

  4. Django项目中使用Redis

    Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...

  5. dya49:django:wsgrief&模板渲染Jinjia2&django的MTV/MVC框架&创建/启动一个django项目

    目录 1.自定义web框架wsgiref版 2.自定义web框架wsgiref版-优化版 3.模板渲染JinJa2 4.MTV和MVC框架 5.django:下载安装&创建启动 自定义web框 ...

  6. 动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：

    移动前端工作的那些事---前端制作之微信小技巧篇   (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...

  7. 第一个Django项目及部署到Sina App Engine

    Sina App Engine简称SAE,是个比较好的网站托管平台,目前说是全面免费,其实就是每个人分配很小的资源配额,在一定的使用范围内不用消耗云豆(SAE计费方式),对于个人学习和研究足够了,同类 ...

  8. 如何创建一个Django项目

    Django 软件框架 软件框架是由其中的各个模块组成,每个模块负责特定的功能,模块与模块之间相互协作来完成软件开发. MVC简介 MVC框架的核心思想是:解耦,让不同的代码块之间降低耦合,增强代码的 ...

  9. 创建第一个Django项目

    第一个Django项目 命令行下使用如下命令创建一个名为"mysite"的Django项目: django-admin startproject mysite 这将会在当前位置创建 ...

随机推荐

  1. GhostScript 沙箱绕过（命令执行）漏洞（CVE-2018-19475）

    影响范围 Ghostscript 9.24之前版本 将POC作为图片上传,执行命令,抓包 POST /index.php HTTP/1.1 Host: target Accept-Encoding: ...

  2. markdown文档编写基础

    Markdown快速入门教程 ###########来源:https://zhuanlan.zhihu.com/p/84918488 ###########来源:https://github.com/ ...

  3. 【GCC编译器】Swing Modulo Scheduling

    1. SMS 在 GCC 中的实现 1.1. 一些基本概念 (1)软流水(Software pipelining )是一种通过重叠不同迭代的指令,使其并行执行,从而改进循环中指令调度的技术.关键思想是 ...

  4. 第3篇-CallStub新栈帧的创建

    在前一篇文章 第2篇-JVM虚拟机这样来调用Java主类的main()方法  中我们介绍了在call_helper()函数中通过函数指针的方式调用了一个函数,如下: StubRoutines::cal ...

  5. 痞子衡嵌入式：恩智浦i.MX RT1xxx系列MCU启动那些事（11.B）- FlexSPI NOR连接方式大全(RT1160/1170)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是恩智浦i.MXRT1160/1170两款MCU的FlexSPI NOR启动的连接方式. 这个 i.MXRT FlexSPI NOR 启动 ...

  6. 【Unity3D】Android App Bundle（aab）打包上架Google Play介绍

    总体说来,Android App Bundle打包有3种方式,每种方式都有成功上架Google Play进行测试通过,因此实用程度还是挺高的.能够理解以下内容的前提是会打apk包,知道如何生成Asse ...

  7. Linux线程简单介绍

    1.进程与线程 2.使用线程的理由 3.有关线程操作的函数 4.线程之间的互斥 5.线程之间的同步 6.试题最终代码 1.进程与线程 进程是程序执行时的一个实例,即它是程序已经执行到何种程度的数据结构 ...

  8. 目录已存在导致Jenkins项目构建失败的解决方法

    Jenkins中的项目在下载源代码时,如果Working Directory中存在未加入版本控制的文件或者目录已经存在于SVN库中,会导致更新失败,整个构建终止,解决方法是将SVN的检出策略由&quo ...

  9. Markdown常用的格式

    一级标题 Markdown # Markdown 二级标题 Markdown ## Markdown 三级标题 Markdown ### Markdown 四级标题 Markdown #### Mar ...

  10. S3C2440—6.串口的printf实现

    文章目录 一.框架 二.printf函数原理 2.1 printf的声明 2.2 参数解读 2.3 如何得到可变参数的值 2.4 解决变参的宏定义 2.5 完成printf函数的封装 三.结合UART ...