個人網站搭建: (第四天) 導航欄與頁腳

時間 2019-11-09

原文原文鏈接

通過觀察能夠發現，基本上每一個網站都會有一個叫導航欄的東西，其目的就是爲了方便用戶找到本身查看的頁面。導航欄能夠本身製做，但我選擇的方法是使用Bootstrap框架，還有給每一個網頁都添加一段導航欄代碼會顯得特別冗餘，因此這裏還涉及到一個模板繼承的知識點，我將模板繼承知識寫在了Django入門: (第八天) 模板定義與繼承，方便查閱javascript

那麼有了模板繼承的知識之後，就能夠給整個站點設計一個公共的代碼部分—導航欄，將模板頁面加入到路徑中，修改settings.py文件，設置TEMPLATES的DIRS值css

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

作完上面這一步，接下來一個知識點就是靜態文件的處理，它包括css，js，圖片，這些都屬於靜態文件，那麼一樣，靜態文件處理部份內容也在Django入門: (第十一天) 處理靜態文件詳細說明，這裏我給出個人路徑html

base.css文件存放路徑   /mainsite/static/blog/css/base.css
bootstap文件存放路徑   /mainsite/static/bootstrap-3.3.7

將這些都準備工做都作好之後，就能夠開始編寫base.html頁面了，由於引入了靜態資源處理，就須要在base.html開頭處加上java

{% load static from staticfiles %}

靜態文件須要在head標籤引入：python

<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中文文檔，內部介紹的更爲詳細還有例子解釋，在組件的右邊有導航欄的使用方法，這個均可以根據本身須要的功能自行分析添加，因此我就直接貼出個人導航欄部分代碼git

<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文件的導航欄，內容，頁腳github

<body>

    <div class='header'></div>
    <div class='container'></div>
    <div class='footer'></div>

</body>

在使用position定位的時候，注意要將body採用絕對定位，並且padding-bottom的高度必定要大於頁腳內容的高度web

body{
    min-height:100%;
    position:absolute;
    padding-bottom: 30px; /*須要 >= footer的height值*/
}

.footer{
    height:30px;
    position:absolute;
    bottom:0px;
}

如下是個人頁腳代碼：bootstrap

<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以下：bash

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;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。