网站搭建 (第04天) 导航栏与页脚
Posted djcoder
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网站搭建 (第04天) 导航栏与页脚相关的知识，希望对你有一定的参考价值。
一、前言
经过观察可以发现，基本上每个网站都会有一个叫导航栏的东西，其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作，但我选择的方法是使用Bootstrap框架，还有给每个网页都添加一段导航栏代码会显得特别冗余，所以这里还涉及到一个模板继承的知识点，我将模板继承知识写在了Django入门: (第八天) 模板定义与继承，方便查阅。
那么有了模板继承的知识以后，就可以给整个站点设计一个公共的代码部分-导航栏，将模板页面加入到路径中，修改settings.py文件，设置TEMPLATES的DIRS值。
‘DIRS‘: [os.path.join(BASE_DIR, ‘templates‘)],
二、引入bootstrap
做完上面这一步，接下来一个知识点就是静态文件的处理，它包括css，js，图片，这些都属于静态文件，那么同样，静态文件处理部分内容也在Django入门: (第十一天) 处理静态文件详细说明，这里我给出我的路径。
base.css文件存放路径 /mainsite/static/blog/css/base.css bootstap文件存放路径 /mainsite/static/bootstrap-3.3.7
将这些都准备工作都做好以后，就可以开始编写base.html页面了，因为引入了静态资源处理，就需要在base.html开头处加上
{% load static from staticfiles %}
静态文件需要在head标签引入：
<link rel="stylesheet" href="{% static ‘blog/css/base.css‘ %}">
<link rel="stylesheet" href="{% static ‘bootstrap-3.3.7/css/bootstrap.min.css‘ %}">
<script type="text/javascript" src="{% static ‘bootstrap-3.3.7/js/bootstrap.min.js‘ %}"></script>
三、导航栏样式
现在可以编写body体内的代码了，主要是用到bootstap框架，简单的介绍也在移动端库和框架，不过还是建议查看bootstap的文档：Bootstrap中文文档，内部介绍的更为详细还有例子解释，在组件的右边有导航栏的使用方法，这个都可以根据自己需要的功能自行分析添加，所以我就直接贴出我的导航栏部分代码。
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container_fluid">
<div class="navbar-header">
<a class="navbar-brand" href="{% url ‘blog:blog‘ %}">蒋振飞的博客</a>
<button class="navbar-toggle collapsed nav_bar" data-target="#navbar-collapse" data-toggle="collapse">
{# <span class="sr-only"></span>#}
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav base_head">
{# 博客首页 #}
<li class="{% block nav_home_active %}{% endblock %}">
<a href="{% url ‘blog:home‘ %}"><span class="glyphicon glyphicon-home">博客首页</span></a>
</li>
{# 博客列表 #}
<li class="{% block nav_blog_active %}{% endblock %}">
<a href="{% url ‘blog:blog‘ %}"><span class="glyphicon glyphicon-pencil">博客列表</span></a>
</li>
{# 博客分类 #}
<li class="{% block nav_category_active %}{% endblock %}">
<a href="{% url ‘blog:category_list‘ %}"><span class="glyphicon glyphicon-file">博客分类</span></a>
</li>
{# 日期归档 #}
<li class="{% block nav_date_active %}{% endblock %}">
<a href="{% url ‘blog:date_list‘ %}"><span class="glyphicon glyphicon-book">日期归档</span></a>
</li>
{# 关于我 #}
<li class="{% block nav_about_active %}{% endblock %} hidden-sm">
<a href="{% url ‘user:about‘ %}"><span class="glyphicon glyphicon-education">关于我</span></a>
</li>
</ul>
{# 搜索框 #}
<form method=‘get‘ class="navbar-form navbar-left" action="/search/">
<div class="form-group search_box">
<input type="text" name="q" class="form-control" placeholder="搜点啥?">
</div>
<button type="submit" class="hidden-sm btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</div>
这是我的导航栏排布，可以根据功能自己添加相应的模板页面和功能处理，其中用户登录和注册留到后面介绍用户操作再作解释。
四、页脚样式
导航栏已添加成功，那么还缺少页脚功能，如关于本站信息和网站备案号等。页脚其实有很多种方法，而且注意不是将页脚完全固定到窗口底部一直显示，而是可以跟随滚动条滚动。我使用的是position定位的方法，还有一种叫做负margin的方法，比如说下面这个是一个html文件的导航栏，内容，页脚。
<body>
<div class=‘header‘></div>
<div class=‘container‘></div>
<div class=‘footer‘></div>
</body>
在使用position定位的时候，注意要将body采用绝对定位，而且padding-bottom的高度一定要大于页脚内容的高度。
body{
min-height:100%;
position:absolute;
padding-bottom: 30px; /*需要 >= footer的height值*/
}
.footer{
height:30px;
position:absolute;
bottom:0px;
}
以下是我的页脚代码：
<div class="footer">
<div class="website-info">
<div class="about">
<h4>关于本站</h4>
<p>1.基于Django+Bootstrap开发</p>
<p>2.主要发表本人的技术笔记与随笔</p>
<p>3.本站于2018-5-30开始建站</p>
</div>
<div class="response hidden-xs">
<h4>建议反馈</h4>
<p>1.欢迎注册评论</p>
<p>2.可在相应的博文底下评论</p>
<p>3.发邮件到[email protected]</p>
</div>
<div class="contact hidden-xs hidden-sm">
<h4>欢迎联系</h4>
<p> <img src="{% static ‘blog/media/qq.ico‘ %}" alt="qq">：1378482556</p>
<p><img src="{% static ‘blog/media/github.ico‘ %}" alt="github">：<a href="https://github.com/XiaoFei-97">https://github.com/XiaoFei-97</a></p>
</div>
</div>
<div class="copyright">
<span>Welcome to visit my website © Jack Jiang</span>
<span class="hidden-xs"><a href="http://www.miibeian.gov.cn/" target="_blank">赣ICP备18008471号</a></span>
</div>
</div>
?导航栏与页脚部分base.css如下：
body{
margin-top: 50px!important;
background-color: #4cae4c;
margin-bottom: 2em;
font-size: 2em;
min-height:100%;
position:absolute;
width: 100%;
padding-bottom: 10em;
}
.footer{
width: 100%;
position: absolute;
bottom: 0;
}
.website-info{
overflow: hidden;
background-color: #e7e7e7;
padding-left: 10%;
}
.website-info h4{
padding-bottom: 3px;
color: #424242;
font-weight: bold;
border-bottom: 1px solid #aaa;
}
.about, .response, .contact{
float: left;
margin-right: 10%;
margin-left: 2% ;
font-size: 0.75em;
}
.about p, .response p, .contact p{
margin-bottom: 0.2em;
}
.copyright{
text-align: center;
padding: 0.5em 0;
background: #4F5893;
color: #e7e7e7;
bottom: 10em;
}
.copyright a{
color: #fff;
margin-left: 1em;
}
.copyright a:hover{
color: cyan;
}
以上是关于网站搭建 (第04天) 导航栏与页脚的主要内容，如果未能解决你的问题，请参考以下文章