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. nuxt服务部署到云上全程记录

    首先,在使用脚手架nuxt-app中创建项目时,箭头选用不起作用,这是因为git bash在windows中交互问题,临时的解决办法是换用cmd 登录云服务器后,首先安装nodejs yum inst ...

  2. 论文笔记：（CVPR2019）Relation-Shape Convolutional Neural Network for Point Cloud Analysis

    目录 摘要 一.引言 二.相关工作 基于视图和体素的方法 点云上的深度学习 相关性学习 三.形状意识表示学习 3.1关系-形状卷积 建模 经典CNN的局限性 变换:从关系中学习 通道提升映射 3.2性 ...

  3. jdk的下载与安装教程

    最近在学逆向,就是要反编译人家的java代码,在这之前要先安装环境,下面是下载和安装JDK的教程: 1.JDK下载地址: http://www.oracle.com/technetwork/java/ ...

  4. selenium元素定位之 动态id, class元素定位

    1.直接进入正题 如下图, 有些元素每次进入都会刷新, 造成元素无法重复定位 怎么办? "xpath部分属性值"定位方法可以帮到我们 1.包含属性定位 driver.find_el ...

  5. 在CentOS7下的OpenStack中配置使用Spice协议

    在CentOS7下的OpenStack中配置使用Spice协议 by 无若   1. 需要的包 在计算节点上 #yum install spice-html5   注意:使用yum安装spice-ht ...

  6. MobSF移动安全扫描平台本地化部署与简单汉化

    在之前的文章MobSF移动安全扫描平台环境搭建与试用中,我们用docker进行了搭建,那么我们如何在本地直接搭建呢,其实也是很简单的. 本地化部署 我们在本地安装 其实是很简单的,里面有两个文件,在不 ...

  7. shell——if、case例题

    目录 例题一:检查用户家目录中的 test.sh 文件是否存在,并且检查是否有执行权限 例题二:提示用户输入100米赛跑的秒数,要求判断秒数大于0且小于等于10秒的进入选拔赛,大于10秒的都淘汰,如果 ...

  8. rabbitMQ通过@RabbitListener和配置文件XML创建exchange及队列绑定关系

    1.@RabbitListener 2.配置文件 <rabbit:fanout-exchange name="fanoutExchange" xmlns="http ...

  9. SpringBoot-静态资源加载-源码

    目录 静态资源映射规则 什么是webjars 呢? 第二种静态资源映射规则 参考链接 静态资源映射规则 SpringBoot中,SpringMVC的web配置都在 WebMvcAutoConfigur ...

  10. 🏆【Java技术专区】「开发实战专题」Lombok插件开发实践必知必会操作！

    前言 在目前众多编程语言中,Java 语言的表现还是抢眼,不论是企业级服务端开发,还是 Andorid 客户端开发,都是作为开发语言的首选,甚至在大数据开发领域,Java 语言也能占有一席之地,如Ha ...