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. yum 卸载

    # yum list installed | grep [软件名] #yum -y remove [软件名]

  2. noip模拟测试31

    终于有时间写博客了,前面一直咕咕咕都快变成一只公鸡了......这次考试,真的很意外,我在考场上觉得自己打出了T1的正解,样例一拍就过,还跑得嘎嘎快,然后T2,T3码了两个暴力,觉得自己应该能100p ...

  3. QGIS打印布局中绘制多个子图

    QGIS如何绘制多图 数据准备 这是一份英国大曼彻斯特地区的数据,里面包含了教育.收入.人口密度.绿地比例.城市比例等数据,我们准备把这些数据在地图上呈现出来,为此,我们需要做在地图中绘制6幅子图,这 ...

  4. mysql《一》

    一.启动和停止服务器 通过管理员权限打开cmd命令指示符 通过 net stop mysql(自己的服务器名字)  停止服务器 通过 net start mysql(自己的服务器名字)  启动服务器 ...

  5. Java8新特性（三）之方法引用和构造器引用

    1.使用场景 当要传递给Lambda体的操作,已经存在实现的方法了,就可以使用方法引用.(抽象方法的参数列表  必须与方法引用方法的参数列表保持一致) 2. 语法 使用操作符[::]将方法名和对象或类 ...

  6. 披着羊皮的Neo-reGeorg

    混迹 Web 安全行业许久,查杀网站后门已是家常便饭.时间久了,养"马"场也见的多了,Neo-reGeorg 算得上是同类中战斗力超群的"野马"了,也深受黑客和 ...

  7. 手把手和你一起实现一个Web框架实战——EzWeb框架(三)[Go语言笔记]Go项目实战

    手把手和你一起实现一个Web框架实战--EzWeb框架(三)[Go语言笔记]Go项目实战 代码仓库: github gitee 中文注释,非常详尽,可以配合食用 本篇代码,请选择demo3 这一篇文章 ...

  8. Git（7）-- 查看提交历史（git log 命令详解）

    @ 目录 1.git clone 2.git log 3.git log -p 4.git log --stat 5.git log --pretty=oneline 6.git log --pret ...

  9. 支持初始化数据的Zookeeper Docker镜像

    最近在做一个演示项目 https://github.com/cnscud/cavedemo, 自然为了方便, 也做了docker打包, 发现zookeeper的镜像没有导入初始化数据的功能, 于是自己 ...

  10. AWS(amazon ec2)服务器流量查询

    aws ec2流量监控 亚马逊云服务新用户绑定信用卡免费使用一年,相信很多人白嫖过,选用micro最低配置+流量免费15G,包含上下行.这种配置用来测试玩玩还行,生产使用的话容易超标.很多人想知道流量 ...