我用外部CSS文件替换了<style>
中的base.html
标签。在base.html
中,有一个菜单链接到不同的HTML页面。当我单击任何菜单项时,页面正在加载,但CSS正在加载。
我尝试在<link>
中使用homealter.html
标记来使CSS正常工作,但这没用。
base.html
<link href="../static/css/base_style.css" rel="stylesheet" type="text/css">
<div class="menu">
<table>
<tr>
{% with request.resolver_match.url_name as url_name %}
<td class="{% if url_name == 'home' %}active{% endif %}"><a href="{% url 'home' %}">Resource Wise Analysis</a></td>
<td class="{% if url_name == 'homealter' %}active{% endif %}"><a href="{% url 'homealter' %}">Land Distance Analysis</a></td>
<td class="{% if url_name == 'graphsone' %}active{% endif %}"><a href="{% url 'graphsone' %}">Water Type Based Analysis</a></td>
<td class="{% if url_name == 'graphstwo' %}active{% endif %}"><a href="{% url 'graphstwo' %}">Land Distance Analysis</a></td>
<td><a href="{% url 'logout' %}">Logout</a></td>
{% endwith %}
</tr>
</table>
</div>
{% block mains %}
{% endblock %}
</body>
homealter.html
{% extends 'base.html' %}
{% block mains %}
{% load staticfiles %}
<link href="../static/css/base_style.css" rel="stylesheet" type="text/css">
<div class="contnt">
<table>
<tr>
<th>Land Size</th>
<th>Land Distances Count</th>
<!--<th>Details</th>-->
</tr>
{% for index, row in yeye.iterrows %}
<tr>
<td><p>{{index}}</p></td>
<td>{{row.Distance}}</td>
<!--<td><a href="{% url 'yearwise' index %}">View Details</a></td>-->
{% endfor %}
</tr>
</table>
<img src="{% static 'images/im1.jpg' %}">
</div>
{% endblock %}
它之所以奏效是因为base.html
中有内部CSS。每当选择菜单项时(即在其他页面中),我都需要base_style.css
才能工作。
答案 0 :(得分:2)
您应该只在base.html中使用它,但应使用完整路径(不是相对路径):
<link href="/static/css/base_style.css"...
或更好:
{% load static %}
<link href="{% static 'css/base_style.css' %}"...