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. js 调用json

    url = "/plus/API/"; try { // 此处是可能产生例外的语句 } catch(error) { // 此处是负责例外处理的语句 } finally { // ...

  2. Pdb— Python的调试器

    参考:Pdb- Python的调试器 pdb 模块定义了一个交互式源代码调试器,用于 Python 程序.它支持在源码行间设置(有条件的)断点和单步执行,检视堆栈帧,列出源码列表,以及在任何堆栈帧的上 ...

  3. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  4. Python实现猜数字游戏

    Python中实现猜数字游戏代码如下: import random # 引入随机数标准库-random # 定义数字上下限和最大游戏次数 min_num = 1 max_num = 10 guess_ ...

  5. 阿里面试官：Android中binder机制的实现原理及过程？

    Binder 是 Android 系统中非常重要的组成部分.Android 系统中的许多功能建立在 Binder 机制之上.在这篇文章中,我们会对 Android 中的 Binder 在系统架构中的作 ...

  6. CentOS后台服务管理类

    目录 一.service 后台服务管理(临时,只对当前有效) 二.chkconfig 设置后台服务的自启配置(永久) 三.CentOS7 后添加的命令:systemctl 一.service 后台服务 ...

  7. Terracotta 2.7.2 Admin Console Guide

    http://www.terracotta.org/confluence/display/docs27/Admin+Console+Guide#AdminConsoleGuide-Roots

  8. 剑指 Offer 68 - II. 二叉树的最近公共祖先

    剑指 Offer 68 - II. 二叉树的最近公共祖先 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:"对于有根树 T 的两个结点 p.q,最近 ...

  9. SpringBoot-400-Bad-Request(Request-header-is-too-large)

    错误 Request header is too large 分析 请求头内容过大 解决方案 1.SpringBoot版本1.3.8.RELEASE在配置文件中添加: 如果springboot内置to ...

  10. 什么？都1202年了还不懂k8s和容器的关系？！这份k8s指南快拿走不谢！

    都1202年了,还是有许多人搞不清容器与k8s之间的关系.在开始本篇正文之前,我们先来捋一捋这对"CP"的关系. 你可能已经很熟悉虚拟机了,最常见的莫过于我们拿到macOS却需要用 ...