⼀个Django项⽬中实现的简单HTML页⾯布局
1 - 基础页⾯（被继承的模板）
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<script src="cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"
<link rel="stylesheet" href="stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous" <script src="stackpath.bootstrapcdn/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
*{
margin: 0;
padding: 0;
}
.navbar{
bootstrap项目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 - 页⾯效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。