django练手（六）：优化网站导航
在以上几篇，网站的模板功能已经可以使用，但导航的样子还是很原始。在这一篇，我优化一下导航。
一.优化导航的色调
我采用重写bootstrap相关css样式的方式优化导航的色调。知乎上有人给了一个网站：https://work.smarchal.com/twbscolor/css/#css， 可以选定颜色，自动生成重写bootstrap样式的css。我直接使用了这个大神贴出来的css代码。他的代码如下：
.navbar-default {
background-color: #9b59b6;
border-color: #8e44ad;
}
.navbar-default .navbar-brand {
color: #ecf0f1;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #ecdbff;
}
.navbar-default .navbar-text {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav > li > .dropdown-menu {
background-color: #9b59b6;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus {
color: #ecdbff;
background-color: #8e44ad;
}
.navbar-default .navbar-nav > li > .dropdown-menu > li.divider {
background-color: #8e44ad;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #8e44ad;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ecdbff;
background-color: #8e44ad;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #ecdbff;
background-color: #8e44ad;
}
.navbar-default .navbar-toggle {
border-color: #8e44ad;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #8e44ad;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ecf0f1;
}
.navbar-default .navbar-link {
color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
color: #ecdbff;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ecf0f1;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #ecdbff;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #ecdbff;
background-color: #8e44ad;
}
}
在static/css文件夹下新建一个css文件，命名为navbar_color.css，把以上代码粘进去。在引入bootstarp的代码下引入这个css文件。引入的代码如下：
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
<!--引入bootstrap-->
<link rel="stylesheet" href="{% static 'plugin/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<!--引入重写bootstrap的代码-->
<link rel="stylesheet" href="{% static 'css/navbar_color.css' %}">
<!--css代码块开始-->
{% block css %}
{% endblock %}
<!--css代码块结束-->
</head>
引入该代码后导航的样式如下图：
二.优化导航的内容
把导航的文字替换成我想要的文字。这一部分内容相对简单，不再贴出代码，把完成后的导航样式展示如下图：
