一个Django项目中实现的简单HTML页面布局
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页面布局的更多相关文章
- celery 分布式异步任务框架(celery简单使用、celery多任务结构、celery定时任务、celery计划任务、celery在Django项目中使用Python脚本调用Django环境)
一.celery简介: Celery 是一个强大的 分布式任务队列 的 异步处理框架,它可以让任务的执行完全脱离主程序,甚至可以被分配到其他主机上运行.我们通常使用它来实现异步任务(async tas ...
- Python开发入门与实战2-第一个Django项目
2.第一个Django项目 上一章节我们完成了python,django和数据库等运行环境的安装,现在我们来创建第一个django project吧,迈出使用django开发应用的第一步. 2.1.创 ...
- [翻译]在Django项目中添加谷歌统计(Google Analytics)
原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...
- Django项目中使用Redis
Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...
- dya49:django:wsgrief&模板渲染Jinjia2&django的MTV/MVC框架&创建/启动一个django项目
目录 1.自定义web框架wsgiref版 2.自定义web框架wsgiref版-优化版 3.模板渲染JinJa2 4.MTV和MVC框架 5.django:下载安装&创建启动 自定义web框 ...
- 动端逐渐出了许多的移动端的框架，比如Sencha Touch、JQTouch、Jquery-moblie、jqMobi等等。这些框架都有优缺点，不同的框架应用在不同的项目中。现简单阐述一下各框架的优缺点：
移动前端工作的那些事---前端制作之微信小技巧篇 (2013-11-15 15:20) 转载▼ 标签: it css3/javascript html5 webapp 手机网站搭建 分类: 前端制 ...
- 第一个Django项目及部署到Sina App Engine
Sina App Engine简称SAE,是个比较好的网站托管平台,目前说是全面免费,其实就是每个人分配很小的资源配额,在一定的使用范围内不用消耗云豆(SAE计费方式),对于个人学习和研究足够了,同类 ...
- 如何创建一个Django项目
Django 软件框架 软件框架是由其中的各个模块组成,每个模块负责特定的功能,模块与模块之间相互协作来完成软件开发. MVC简介 MVC框架的核心思想是:解耦,让不同的代码块之间降低耦合,增强代码的 ...
- 创建第一个Django项目
第一个Django项目 命令行下使用如下命令创建一个名为"mysite"的Django项目: django-admin startproject mysite 这将会在当前位置创建 ...
随机推荐
- 【Web动画】科技感十足的暗黑字符雨动画
本文将使用纯 CSS,带大家一步一步实现一个这样的科幻字符跳动背景动画.类似于这样的字符雨动画: 或者是类似于这样的: 运用在一些类似科技主题的背景之上,非常的添彩. 文字的竖排 首先第一步,就是需要 ...
- #使用C#winform编写渗透测试工具--子域名挖掘
使用C#winform编写渗透测试工具--子域名挖掘 这篇文章主要介绍使用C#winform编写渗透测试工具--子域名挖掘.在渗透测试中,子域名的收集十分重要,通常一个网站的主站的防御能力特别强,而他 ...
- linux安装虚拟环境的步骤
1.创建名为env_wcs,python版本为3.6的虚拟环境conda create -n env_wcs python=3.6conda create -n my_ env numpy matpl ...
- 八数码难题之 A* 算法
人生第一个A*算法-好激动-- 八数码难题--又称八数码水题,首先要理解一些东西: 1.状态可以转化成整数,比如状态: 1 2 3 4 5 6 7 8 0 可以转化成:123456780这个整数 2. ...
- DDD随谈
前言 最近再次拜读了Eric的奠基之作[Domain-Driven Design –Tackling Complexity in the Heart of Software],还有Vernon的[In ...
- nmap工具使用随笔
1.nmap主要用途:主机发现,端口扫描,版本检测,os检测 2.Nmap是Linux下的网络扫描和嗅探工具包,它可以扫描大型的网络,获取那台主机正在运行以及提供的服务等信息. 3.nmap语法格式: ...
- C++ 1//设计立方体类 //创建立方体的类 //设计属性和行为 //获取立方体的面积和体积 //分别利用（全局函数 和 成员函数）判断俩个立方体是否相等
1 //设计立方体类 2 //创建立方体的类 3 //设计属性和行为 4 //获取立方体的面积和体积 5 //分别利用(全局函数 和 成员函数)判断俩个立方体是否相等 6 #include <i ...
- 启动Eclipse时，弹出JVM terminated. Exit code=127..错误的解决方案
在Linux环境下,启动Eclipse,会弹出并报如下的错误,且不能启动该工具 JVM terminated. Exit code=127/eclipse/jdk1.7.0_71/bin/java-D ...
- Mybatis源码解析2—— 实例搭建
大家好,我是可乐. 上篇文章给大家撸了一遍用 JDBC 直接操作数据库的实例,还只是简单写了一个查询的接口,其代码量就已经很大了,并且可乐还给大家分析了直接使用 JDBC 带来的一些问题,总之是一种反 ...
- Prometheus alertmanager邮件发送+grafana告警展示
前言 前面一篇博客,我已经介绍了prometheus如何监控mysql. 这一篇我来介绍如何通过alertmanger进行告警邮件发送(微信或钉钉类似,因为需要企业帐户,我就不试了),以及如何通过gr ...