網站搭建 (第04天) 導航欄與頁腳
阿新 • • 發佈：2019-04-21
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天) 導航欄與頁腳