我是 Python 新手，正在学习 Dave Gray 的 Django 在线课程。在课程中，我们为导航功能创建 CSS。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: black;
color: whitesmoke;
font-size: 3rem;
display: flex;
flex-flow: column;
}
nav {
padding: 1rem;
background-color: #44B78B;
color: white;
font-size: 2.5rem;
}
main {
flex-grow: 1;
display: grid;
place-content: center;
}
h1,
p {
text-align: center;
}
a {
text-decoration: none;
color: #81dbb8;
}
a:hover {
opacity: .85;
}
我的布局 HTML 是：
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% block title %}
Django App
{% endblock %}
</title>
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/main.js' %}" defer></script>
</head>
<body>
<nav>
<a href="/">🏡</a> |
<a href="/about">😊</a> |
<a href="/posts">📰</a>
</nav>
<main>
{% block content %}
{% endblock %}
</main>
</body>
</html>
我的主页 HTML 是：
{% extends 'layout.html' %}
{% block title %}
Home
{% endblock %}
{% block content %}
<h1>Home</h1>
<p>Check out my <a href="/about">About</a> page.</p>
{% endblock %}
我通常使用 Chrome，它看起来不像他的例子。检查完 CSS 后，我在 Edge 中打开了页面，页面看起来很完美，就像他的视频中一样。在 Chrome 上，它会忽略一些 CSS。如何使我的页面对 Chrome 友好？
这里有 2 个屏幕截图，第一个是它的外观，第二个是它在 Chrome 中的外观。
在 Chrome 中，您可以尝试清除缓存。
In the top right corner press the ellipses
-> Settings
-> Search for cache
-> clear browsing data now
-> change the filter to all time and clear
清除缓存后，刷新页面，您的 CSS 就应该可以工作了