蒋振飞的博客 - 网站搭建 (第04天) 导航栏与页脚   
正在加载蒋振飞的博客...
V3.0
蒋振飞的博客

网站搭建 (第04天) 导航栏与页脚

发布时间: 2018年07月16日 发布人: 蒋振飞 热度: 488 ℃ 评论数: 0

一、前言

经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作,但我选择的方法是使用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.发邮件到jack_970124@163.com</p>
        </div>

        <div class="contact hidden-xs hidden-sm">
            <h4>欢迎联系</h4>
            <p>&nbsp;<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;
}

打赏 蒋振飞

取消

感谢您的支持,我会继续努力的!

扫码支持
一分也是爱     一块不嫌多

点击 支付宝 或 微信 打赏蒋振飞

打开支付宝扫一扫,即可进行扫码打赏哦

评论列表