首页 > 解决方案 > Django侧栏文本不会出现

问题描述

所以我想在我的网站上添加另一个侧边栏文本,称为“创建”,但它只显示我创建的“主页”,而不是视图图像仍在学习如何制作网站,但一点一点地学习,不知道为什么我有这个问题

sidenav1 是我的创建文本, Sidenav 是我的主页文本

<html>
<head>
    <style type="text/css">
        .sidenav {
            height:15%;
            width:1600;
            position: fixed;
            z-index:1;
            top:0;
            left:0;
            background-color:#2C3E50;
            overflow-x: :hidden;
            padding-top:20px;
        }
        .sidenav a {
            padding:6px 8px 16px 676px;
            text-decoration: none;
            font-size:25px;
            color: #2ECC71;
            display:block;

        }

        .sidenav1 a {
            padding:6px 6px 16px 696px;
            text-decoration: none;
            font-size:25px;
            color: #2ECC71;
            display:block;

        }


        .sidenav a:hover{
            color:#f1f1f1;

        }
        .main{
            margin-left:60px;
            padding: 0px 10px;
        }

        .sidenav1 a {
            padding:6px 8px 16px 676px;
            text-decoration: none;
            font-size:25px;
            color: #2ECC71;
            display:block;
        }       

    </style>
    <title>{% block title %} Habibs Website {% endblock %}</title>

</head>

</body>


<div class="sidenav">
    <a herf="/home">Home</a>
</div>

<div class="sidenav1">
    <a herf="/create">Create</a>
</div>

<div class="sidenav2">
    <a herf="/2">View</a>
</div>





<div id= "content", name="content", class="main">
    {% block content %}
    {% endblock %}
</body>
</html>

标签: javascriptpythonhtmlcssdjango

解决方案


试试这个。

<html>
<head>
    <style type="text/css">
        .nav-wrapper {
            z-index:1;
            top:0;
            left:0;
            background-color:#2C3E50;
            overflow-x: hidden;
            padding: 20px 0px;
            display: flex;
            justify-content: center;
        }
        .nav-wrapper div {
            margin: 0px 20px;
        }
        .nav-wrapper a {
            text-decoration: none;
            font-size:25px;
            color: #2ECC71;
            display:block;
        }
        .nav-wrapper a:hover{
            color:#f1f1f1;
        }
        .main{
            margin-left:60px;
            padding: 0px 10px;
        }

    </style>
    <title>{% block title %} Habibs Website {% endblock %}</title>

</head>

</body>

<div class="nav-wrapper">
    <div class="sidenav">
        <a herf="/home">Home</a>
    </div>

    <div class="sidenav1">
        <a herf="/create">Create</a>
    </div>

    <div class="sidenav2">
        <a herf="/2">View</a>
    </div>
</div>




<div id= "content", name="content", class="main">
    {% block content %}
    {% endblock %}
</body>
</html>

它看起来像这样。

在此处输入图像描述


推荐阅读