阅读 40 SEO

一个Django项目中实现的简单HTML页面布局

一个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 - 页面效果


文章分类
后端
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 gxwowoo@163.com 举报,一经查实,本站将立刻删除。
相关推荐