我的网站搭建: (第四天) 导航栏与页脚

简介:     经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一段导航栏代码会显得特别冗余,...

    经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一段导航栏代码会显得特别冗余,所以这里还涉及到一个模板继承的知识点,我将模板继承知识写在了Django入门: (第八天) 模板定义与继承,方便查阅

    那么有了模板继承的知识以后,就可以给整个站点设计一个公共的代码部分—导航栏,将模板页面加入到路径中,修改settings.py文件,设置TEMPLATESDIRS

'DIRS': [os.path.join(BASE_DIR, 'templates')],

    做完上面这一步,接下来一个知识点就是静态文件的处理,它包括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;
}
相关文章
|
6月前
|
弹性计算 Ubuntu Linux
1分钟畅玩!阿里云一键部署幻兽帕鲁联机服务器图文教学
如何自建幻兽帕鲁服务器?基于阿里云服务器搭建幻兽帕鲁palworld服务器教程来了,一看就懂系列。
190 2
|
6月前
|
弹性计算 Linux 数据安全/隐私保护
一分钱不花免费创建阿里云幻兽帕鲁Palworld服务器,不看后悔
一分钱不花免费创建阿里云幻兽帕鲁Palworld服务器,不看后悔,阿里云幻兽帕鲁服务器免费搭建方案,先在阿里云高校计划「云工开物」活动领取学生专享300元无门槛代金券,幻兽帕鲁专用服务器4核16G配置26元1个月、149元半年,直接使用这个无门槛300元代金券抵扣即可免费搭建幻兽帕鲁服务器
407 5
|
6月前
|
云安全 弹性计算 Linux
【图文教程】0基础1分钟搭建幻兽帕鲁游戏联机服务器,阿里云部署指引
幻兽帕鲁(Palworld)是一款多人在线游戏,为了获得更好的游戏体验,需要搭建一个稳定、高效的游戏联机服务器。阿里云提供了一种简单、快速的方法,让新手小白也能0基础10秒搭建幻兽帕鲁游戏联机服务器!
|
弹性计算 人工智能 分布式计算
初闻不知阿里云,在见已是搬砖人——我的阿里云ECS初体验
由于学校“大数据与云计算”课程实验需要搭建Hadoop环境,而通过在本地搭建虚拟机实现“伪分布式”Hadoop步骤过于繁琐冗长,于是我萌生了在云服务器上搭建环境的想法。经过一番寻找,我发现了“阿里飞天加速计划——高校学生在家实践”这个宝藏活动,经过一番测试,发现此活动中的ECS服务器可以满足我的需要,于是便有了这篇体验报告。笔者水平有限,如有错误烦请指教。
初闻不知阿里云,在见已是搬砖人——我的阿里云ECS初体验
|
存储 弹性计算 关系型数据库
冬季实战营 动手实战-最佳应用实践,使用PolarDB和ECS搭建门户网站 领鼠标 云小宝 背包 无影
单期任务奖励:实战营技能证书+定制鼠标 三期任务奖励:全网首发冬奥限量版云小宝 五期任务奖励:冬季实战营奖牌+定制书包+无影试用
冬季实战营 动手实战-最佳应用实践,使用PolarDB和ECS搭建门户网站 领鼠标 云小宝 背包 无影
|
安全 前端开发 弹性计算
照片墙——学生党的ECS初体验
作为一名学生党,平时的生活费还是比较窘迫的,好在看到了阿里云正在推广面向大学生的免费服务器,在体验了十几天后,在此分享一下我个人的感受。
292 0
照片墙——学生党的ECS初体验
|
弹性计算 负载均衡 关系型数据库
|
弹性计算 安全 Shell
ECS训练营第五天笔记
创建资源,连接ECS服务器,安装MongoDB,安装Leanote
ECS训练营第五天笔记
|
弹性计算 关系型数据库 MySQL
阿里云ECS7天训练营-进阶线-day4笔记
使用PolarDB和ECS搭建门户网站
578 0
阿里云ECS7天训练营-进阶线-day4笔记
|
弹性计算 关系型数据库 数据库连接
ECS训练营第四天笔记
创建资源,创建PolarDB数据库账号,连接ECS服务器,安装LAMP环境,搭建门户网站。
ECS训练营第四天笔记