You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Django模板样式优化求助：导航栏、按钮及表单边框设置

avatar
云上老周
2026-7-22
问题：Django表单追踪应用样式修改需求

我用Django开发了FORM TRACKING APP，页面连接SQL Server，展示Live、Report、Planning、Old四类表单，功能正常。已实现登录用户名显示及退出链接，现在需要完成三个样式修改：

  • 创建固定导航栏，中间显示页面名称，右侧显示带头像的用户名及退出链接
  • 将“+ Add Form”链接替换为按钮
  • 为四类表单添加边框

现有代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Homepage</title>
</head>
<body>
    <h1><b><center><u>FORM TRACKING APP</u></center></b></h1>
  
  {% if user.is_authenticated %}
  <div class="topright">User: Hi {{ user.get_username }} !! <br><a href="{% url 'logout' %}?next={{ request.path }}">Logout</a><br></div>
   
    
  {% endif %}

  
  
<!DOCTYPE html>
<style>
.topright {
  position: absolute;
  top: 8px;
  right: 16px;
  font-size: 18px;
}

.blue-bg {
  background-color: rgb(0, 174, 255);
}

.head-button-size {
  height: 66px;
  width: 100px;
  border-radius: 10px;
}

.head-material {
  color: #FFFFFF;
  font-size: 50px;
}

.head-mini-text {
  color: #fff;
  font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial';
  font-size: 12px;
}
.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  width: 100px;
  color: white;
  background-color: #192733;
  padding: 5px;
}

.addform{
  float: right;
  color :rgb(0, 174, 255);
  text-decoration-color: aqua;
  text-emphasis: True;
  font-size: larger;
}

</style>
<html>
<a href="{% url 'add' %}" class="addform">+ Add Form</a>
<h2>Live</h2>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    {% if formversion_list %}
      {% for form in formversion_list %}
      {% if form.get_live %}
          <td style="height:66px;">
            <button class="head-button-size blue-bg" ui-sref="start">
                  <div style="text-align:center">
                    <md-icon class="material-icons head-material">domain</md-icon>
                    <br>
                    <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">{{ form.form_version_nm }} - {{ form.form_version_cd }}</a>
                  </div>
                </button>
          </td>
      {% else %}
      <!--<p> No forms to display in this category</p>-->
    {% endif %} 
    {% endfor %} 
    {% else %}
     <p> No forms to display</p>
    {% endif %}
  </tr>
</table>

<h2>Report</h2>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    {% if formversion_list %}
      {% for form in formversion_list %}
      {% if form.get_formfreeze %}
          <td style="height:66px;">
            <button class="head-button-size blue-bg" ui-sref="start">
                  <div style="text-align:center">
                    <md-icon class="material-icons head-material">domain</md-icon>
                    <br>
                    <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">{{ form.form_version_nm }} - {{ form.form_version_cd }}</a>
                  </div>
                </button>
          </td>
        {% else %}
        <!-- <p> No forms in this category </p> -->
        {% endif %}
      {% endfor %}
    {% else %}
     <p> No forms to display</p>
    {% endif %}
  </tr>
</table>

<h2>Planning</h2>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    {% if formversion_list %}
      {% for form in formversion_list %}
        {% if form.get_planning_formdev %}
        
          <td style="height:66px;">
            <button class="head-button-size blue-bg" ui-sref="start">
                  <div style="text-align:center">
                    <md-icon class="material-icons head-material">domain</md-icon>
                    <br>
                    <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">{{ form.form_version_nm }} - {{ form.form_version_cd }}</a>
                  </div>
                </button>
          </td>
        {% else %}
        <!-- <p> No forms in this category </p> -->
        {% endif %}
        {% endfor %}
    {% else %}
     <p> No forms to display</p>
    {% endif %}
  </tr>
</table>

<h2>Old</h2>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
  <tr>
    {% if formversion_list %}
      {% for form in formversion_list %}
      {% if form.get_retired %}
          <td style="height:66px;">
            <button class="head-button-size blue-bg" ui-sref="start">
                  <div style="text-align:center">
                    <md-icon class="material-icons head-material">domain</md-icon>
                    <br>
                    <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">{{ form.form_version_nm }} - {{ form.form_version_cd }}</a>
                  </div>
                </button>
          </td>
        {% else %}
        <!-- <p> No forms in this category </p> -->
        {% endif %}
        {% endfor %}
    {% else %}
     <p> No forms to display</p>
    {% endif %}
  </tr>
</table>


</html>

</body>
</html>
修改后的完整代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Homepage</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /* 固定导航栏样式 */
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 1000;
        }

        .navbar-title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #343a40;
        }

        .user-section {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #00aeff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .logout-link {
            text-decoration: none;
            color: #00aeff;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .logout-link:hover {
            background-color: #e3f2fd;
        }

        /* 主内容区域，避开固定导航栏 */
        .main-content {
            margin-top: 70px;
            padding: 1rem;
        }

        /* Add Form 按钮样式 */
        .add-form-btn {
            float: right;
            background-color: #00aeff;
            color: white;
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
            text-decoration: none;
            display: inline-block;
        }

        .add-form-btn:hover {
            background-color: #0096d6;
        }

        /* 表单分类容器样式，带边框 */
        .form-category {
            margin: 2rem 0;
            padding: 1rem;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            background-color: #ffffff;
        }

        .form-category h2 {
            margin-bottom: 1rem;
            color: #343a40;
            border-bottom: 1px solid #dee2e6;
            padding-bottom: 0.5rem;
        }

        /* 原有按钮样式保留并优化 */
        .blue-bg {
            background-color: rgb(0, 174, 255);
        }

        .head-button-size {
            height: 66px;
            width: 100px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .head-button-size:hover {
            background-color: #0096d6;
        }

        .head-material {
            color: #FFFFFF;
            font-size: 50px;
        }

        .head-mini-text {
            color: #fff;
            font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial';
            font-size: 12px;
            text-decoration: none;
        }

        .tooltip-text {
            visibility: hidden;
            position: absolute;
            z-index: 1;
            width: 100px;
            color: white;
            background-color: #192733;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- 固定导航栏 -->
    <nav class="navbar">
        <div></div>
        <div class="navbar-title">FORM TRACKING APP</div>
        {% if user.is_authenticated %}
        <div class="user-section">
            <div class="user-avatar">{{ user.get_username|first|upper }}</div>
            <span>Hi {{ user.get_username }}!!</span>
            <a href="{% url 'logout' %}?next={{ request.path }}" class="logout-link">Logout</a>
        </div>
        {% endif %}
    </nav>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- Add Form 按钮 -->
        <a href="{% url 'add' %}" class="add-form-btn">+ Add Form</a>

        <!-- Live 表单分类 -->
        <div class="form-category">
            <h2>Live</h2>
            <table>
                <tr>
                    {% if formversion_list %}
                        {% for form in formversion_list %}
                            {% if form.get_live %}
                                <td style="height:66px; padding: 0.5rem;">
                                    <button class="head-button-size blue-bg">
                                        <div style="text-align:center">
                                            <span class="material-icons head-material">domain</span>
                                            <br>
                                            <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">
                                                {{ form.form_version_nm }} - {{ form.form_version_cd }}
                                            </a>
                                        </div>
                                    </button>
                                </td>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <td><p>No forms to display</p></td>
                    {% endif %}
                </tr>
            </table>
        </div>

        <!-- Report 表单分类 -->
        <div class="form-category">
            <h2>Report</h2>
            <table>
                <tr>
                    {% if formversion_list %}
                        {% for form in formversion_list %}
                            {% if form.get_formfreeze %}
                                <td style="height:66px; padding: 0.5rem;">
                                    <button class="head-button-size blue-bg">
                                        <div style="text-align:center">
                                            <span class="material-icons head-material">domain</span>
                                            <br>
                                            <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">
                                                {{ form.form_version_nm }} - {{ form.form_version_cd }}
                                            </a>
                                        </div>
                                    </button>
                                </td>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <td><p>No forms to display</p></td>
                    {% endif %}
                </tr>
            </table>
        </div>

        <!-- Planning 表单分类 -->
        <div class="form-category">
            <h2>Planning</h2>
            <table>
                <tr>
                    {% if formversion_list %}
                        {% for form in formversion_list %}
                            {% if form.get_planning_formdev %}
                                <td style="height:66px; padding: 0.5rem;">
                                    <button class="head-button-size blue-bg">
                                        <div style="text-align:center">
                                            <span class="material-icons head-material">domain</span>
                                            <br>
                                            <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">
                                                {{ form.form_version_nm }} - {{ form.form_version_cd }}
                                            </a>
                                        </div>
                                    </button>
                                </td>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <td><p>No forms to display</p></td>
                    {% endif %}
                </tr>
            </table>
        </div>

        <!-- Old 表单分类 -->
        <div class="form-category">
            <h2>Old</h2>
            <table>
                <tr>
                    {% if formversion_list %}
                        {% for form in formversion_list %}
                            {% if form.get_retired %}
                                <td style="height:66px; padding: 0.5rem;">
                                    <button class="head-button-size blue-bg">
                                        <div style="text-align:center">
                                            <span class="material-icons head-material">domain</span>
                                            <br>
                                            <a class="head-mini-text" href="{% url 'form-detail' form.form_version_id %}">
                                                {{ form.form_version_nm }} - {{ form.form_version_cd }}
                                            </a>
                                        </div>
                                    </button>
                                </td>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <td><p>No forms to display</p></td>
                    {% endif %}
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
关键修改说明

1. 固定导航栏实现

  • 创建.navbar类，设置position: fixed固定在页面顶部，用flex布局实现标题居中、用户区域居右的排列
  • 用户区域包含：用用户名首字母生成的圆形头像、用户名文本、带hover效果的退出链接
  • 添加.main-content类，设置margin-top避开导航栏，防止内容被遮挡

2. 替换Add Form为按钮

  • 将原<a>标签改为带.add-form-btn类的链接按钮，设置背景色、圆角、hover效果，保留原有跳转功能

3. 为四类表单添加边框

  • 为每个表单分类创建.form-category容器，添加边框、内边距、圆角，同时优化标题的底部分隔线样式
  • 调整表格单元格的内边距，提升整体排版美观度

额外修复了原代码的问题：

  • 移除重复的<html>和<link>标签
  • 将md-icon替换为标准的<span class="material-icons">标签
  • 添加全局样式重置，消除默认边距的影响
  • 为原有表单
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.07.22 12:03:50