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

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>测试</title>
  7.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  9.     <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">
  10.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  11.     <style>
  12.         *{
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.         .navbar{
  17.             background-color: lightskyblue;
  18.             border-radius: 0;
  19.             box-shadow: 10px 10px 5px #888888;
  20.         }
  21.         body{
  22.             padding-top: 80px;
  23.             background-color: whitesmoke;
  24.         }
  25.         ul{
  26.             list-style: none;
  27.             cursor: pointer;
  28.             text-align: center;
  29.         }
  30.         .menu > ul > li > p{
  31.             height: 50px;
  32.             line-height: 50px;
  33.             font-family: 宋体;
  34.             font-size: large;
  35.             margin-bottom: 0;
  36.             margin-top: 0;
  37.             text-align: center;
  38.             color: midnightblue;
  39.             background-color: lightskyblue;
  40.             box-shadow: 10px 10px 5px #888888;
  41.         }
  42.         .menu > ul > li > p:hover{
  43.             background-color: deepskyblue;
  44.             font-size: medium;
  45.         }
  46.         .menu > ul > li > ul{
  47.             height: 100px;
  48.             font-family: 宋体;
  49.             font-size: large;
  50.             display: none;
  51.             background-color: aliceblue;
  52.             box-shadow: 10px 10px 5px;
  53.  
  54.         }
  55.         .menu > ul > li > ul > li{
  56.             line-height: 30px;
  57.             color: midnightblue;
  58.         }
  59.     </style>
  60.  
  61. </head>
  62. <body>
  63.     {# 头部区域 #}
  64.     <nav class="navbar navbar-fixed-top">
  65.       <div class="container-fluid">
  66.         <div class="navbar-header">
  67.           <a class="navbar-brand" href="/">
  68.             <img alt="Brand" src="{% static 'imgs/1.jpg' %}" width="40px" height="30px">
  69.           </a>
  70.         </div>
  71.       </div>
  72.     </nav>
  73.  
  74.     {# 内容区域 #}
  75.     <div class="container-fluid">
  76.         <div class="row">
  77.             {# 左侧菜单 #}
  78.             <div class="col-md-2">
  79.                 <div class="menu">
  80.                     <ul class="ul1">
  81.                         <li>
  82.                             <p>菜单一</p>
  83.                             <ul>
  84.                                 <li>测试</li>
  85.                                 <li>测试</li>
  86.                                 <li>测试</li>
  87.                             </ul>
  88.                         </li>
  89.                         <li>
  90.                             <p>菜单二</p>
  91.                             <ul>
  92.                                 <li>测试</li>
  93.                                 <li>测试</li>
  94.                                 <li>测试</li>
  95.                             </ul>
  96.                         </li>
  97.                         <li>
  98.                             <p>菜单三</p>
  99.                             <ul>
  100.                                 <li>测试</li>
  101.                                 <li>测试</li>
  102.                                 <li>测试</li>
  103.                             </ul>
  104.                         </li>
  105.                         <li>
  106.                             <p>菜单四</p>
  107.                             <ul>
  108.                                 <li>测试</li>
  109.                                 <li>测试</li>
  110.                                 <li>测试</li>
  111.                             </ul>
  112.                         </li>
  113.                     </ul>
  114.                 </div>
  115.             </div>
  116.  
  117.             {# 中间内容 #}
  118.             <div class="col-md-8">
  119.                 {% block content %}
  120.                 {% endblock %}
  121.             </div>
  122.  
  123.             {# 右侧栏区域 #}
  124.             <div class="col-md-2">
  125.                 <div class="panel panel-info">
  126.                     <div class="panel-body">
  127.                         面板
  128.                     </div>
  129.                 </div>
  130.                 <div class="panel panel-info">
  131.                     <div class="panel-body">
  132.                         面板
  133.                     </div>
  134.                 </div>
  135.                 <div class="panel panel-info">
  136.                     <div class="panel-body">
  137.                         面板
  138.                     </div>
  139.                 </div>
  140.                 <div class="panel panel-info">
  141.                     <div class="panel-body">
  142.                         面板
  143.                     </div>
  144.                 </div>
  145.                 <div class="panel panel-info">
  146.                     <div class="panel-body">
  147.                         面板
  148.                     </div>
  149.                 </div>
  150.  
  151.             </div>
  152.  
  153.         </div>
  154.     </div>
  155.  
  156.     <script>
  157.         $('.menu > ul > li > p').click(function(){
  158.             $(this).next('ul').slideToggle()
  159.         })
  160.     </script>
  161. </body>
  162. </html>

2 - 首页

  1. {% extends 'base.html' %}
  2.  
  3. {% block content %}
  4.     <table class="table table-bordered">
  5.         <thead class="navbar">
  6.             <tr>
  7.                 <th>12</th>
  8.                 <th>31</th>
  9.                 <th>31</th>
  10.                 <th>31</th>
  11.                 <th>3123</th>
  12.             </tr>
  13.         </thead>
  14.         <tbody class="navbar">
  15.             <tr>
  16.                 <td>12</td>
  17.                 <td>31</td>
  18.                 <td>313</td>
  19.                 <td>123</td>
  20.                 <td>3131</td>
  21.             </tr>
  22.             <tr>
  23.                 <td>12</td>
  24.                 <td>31</td>
  25.                 <td>313</td>
  26.                 <td>123</td>
  27.                 <td>3131</td>
  28.             </tr>
  29.         </tbody>
  30.     </table>
  31. {% 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. java继承基础详解

    java继承基础详解 继承是一种由已存在的类型创建一个或多个子类的机制,即在现有类的基础上构建子类. 在java中使用关键字extends表示继承关系. 基本语法结构: 访问控制符 class 子类名 ...

  2. Fast Run：提高 MegEngine 模型推理性能的神奇功能

    作者:王博文 | 旷视 MegEngine 架构师 一.背景 对于深度学习框架来说,网络的训练/推理时间是用户非常看中的.在实际生产条件下,用户设计的 NN 网络是千差万别,即使是同一类数学计算,参数 ...

  3. anyRTC SDK 5月迭代：优化自定义加密功能，让通信更安全

    anyRTC SDK 5月上新,新增多种加密类型,让实时音视频通信更安全:新增移动端推流支持1080P分辨率的支持:此外还对事件上报.日志详情.数据统计.网络传输等多项功能进行了优化改进. 以下为更新 ...

  4. webRTC的标准与发展

    Web实时通信(WebRTC)是标准,协议和JavaScript API的集合,两者的组合可实现浏览器(对等)之间的对等音频,视频和数据共享.WebRTC无需依赖第三方插件或专有软件,而是将实时通信转 ...

  5. Nginx 解析漏洞

    目录 漏洞复现 漏洞成因 修复方案 参考链接 该漏洞与Nginx.php版本无关,属于用户配置不当造成的解析漏洞. 漏洞复现 访问http://172.17.0.1/uploadfiles/nginx ...

  6. C++ //继承中构造和析构顺序

    1 #include <iostream> 2 #include <string> 3 using namespace std; 4 5 class Base 6 { 7 pu ...

  7. （2）用 if语句 区间判断

    1 /*此例子只作为演示*/ 2 3 #include <stdio.h> 4 int main() 5 { 6 printf("请问贵公司给出的薪资是:\n"); 7 ...

  8. 关于shell脚本——条件测试、if语句、case语句

    目录 一.条件测试 1.1.表达说明 1.2.test命令 文件测试 1.3.整数值比较 1.4.字符串比较 1.5.逻辑测试 二.if语句 2.1.单分支结构 2.2.双分支结构 2.3.多分支结构 ...

  9. Python实现AI图像识别-身份证识别

    图像识别说白了就是把一张照片上面的文字进行提取,提供工作效率 需求分析 身份证识别主要是把一张身份证照片上面的文字信息进行提取,不用再使用人工去手动抄写了,下面给大家说的这个身份识别主要是使用pyth ...

  10. [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader

    [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader 目录 [源码解析] PyTorch 分布式(2) --- 数据加载之DataLoader 0x00 摘要 0x01 ...