1. 程式人生 > >網站搭建 (第04天) 導航欄與頁腳

網站搭建 (第04天) 導航欄與頁腳

targe form 簡單的 back ons com -a 知識 scrip

一、前言

  經過觀察可以發現,基本上每個網站都會有一個叫導航欄的東西,其目的就是為了方便用戶找到自己查看的頁面。導航欄可以自己制作,但我選擇的方法是使用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天) 導航欄與頁腳