慢慢帶你了解Flask - Day6 網路相簿(2)：Navigation Bar(RWD) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 6

Modern Web

慢慢帶你了解Flask系列第 6 篇

慢慢帶你了解Flask - Day6 網路相簿(2)：Navigation Bar(RWD)

11th鐵人賽 flask

長風青雲

2019-09-07 02:48:54

6450 瀏覽

分享至

大家好，我是長風青雲。今天是參加鐵人賽的第六天。
今天是要將Navigation Bar變成RWD的樣式～

怎麼把他變成手機也可以看的畫面呢？
這個時候就需要用到所謂的class了，css的class代表的意義，大概就像是群組一樣，是這個class的話怎樣表現、是那個class的話又怎麼表現。
所以我們真正的全部的index.html該長什麼模樣呢？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/navbar.css')}}">
<title>ironman album</title>
</head>
<style>
body{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}


</style>
<body>

<ul class="computer" id="topnav">
	<li><a href="../" class="active">首頁</a></li>
	<li><a href="../album">相簿</a></li>
	{% if user in USERS %}
	<li><a href="../upload">上傳</a></li>
	<li><a href="../logout">登出</a></li>
	{% else %}
	<li><a href="../register">註冊</a></li>
	<li><a href="../login">登入</a></li>
	{% endif %}
	<li style="float:right"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>

<script>
function myFunction() {
  var x = document.getElementById("topnav");
  if (x.className === "computer") {
    x.className = "phone";
  } else {
    x.className = "computer";
  }
}
</script>


</body>
</html>

咳，你或許會想問我，昨天在<style>裡的ul他們呢？
答案就是，我放在另外一個css檔了，這在最後我會說明。

所以首先你看到了，我們的<ul>多出一個id和一個class
id 很明顯是因為script才使用的嘛，所以我們先簡單地看他一眼。
這個function就是說一個icon被按了以後，把ul的class在computer和phone之間切換嘛！
然後class computer又是什麼呢？我們跳轉到css檔～

ul.computer{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: thistle;
	position: fixed;
	width:100%;
}

ul.computer li{float: left;}
ul.computer li a{
	display: block;
	color: black;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
}

ul.computer li a.active{
	color: lavender;
	background-color: darkmagenta;
}

ul.computer li a:hover:not(.active)
{
	background-color: darkviolet;
	color: white;
}

ul.computer li a.icon{display: none;}

@media screen and (max-width: 400px)
{
	ul.computer li a:not(.active) {
		display: none;
	}
	ul.computer li a.icon{
		float: right;
		padding-top: 10px;
		display: inline-block;	
	}
}

@media screen and (max-width: 400px)
{
	ul.phone {
		list-style-type: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: thistle;
		position: fixed;
		width:100%;
	}

	ul.phone li a{
		display: block;
		color: black;
		padding: 8px 16px;
		text-align: left;
		text-decoration: none;
	}

	ul.phone li a.active{
		color: lavender;
		background-color: darkmagenta;
	}

	ul.phone li a:hover:not(.active)
	{
		background-color: darkviolet;
		color: white;
	}

	ul.phone li a.icon{
		position: absolute;
		right: 0;
		top: 0;
		padding-top: 10px;
	}
}

跟之前長得差不多，我就簡單說一下
像ul後面加入.computer意義就代表class為computer的ul
@media screen and (max-width:400px)則是說如果螢幕顯示的寬度不足400pixel則有些參數就會被改變

像這裡，我就以讓原本在電腦上不會顯示的icon顯現，然後把除了主頁之外的連結全部藏起來。如果我點了icon剛剛在script有說，他的class會轉為phone
class為phone的ul 一一設定好後，恭喜！你已經完成了RWD啦！

我剛剛說到，我的CSS放在外邊對吧，在Flask裡，有個資料夾叫做static
他是來放基本不會改變的資料，像是css或圖片之類的。
但其實我受過其中的……堪稱虐待？我還以為我寫錯了之類的。
簡單來說，因為他是幾乎不會變動的檔案，所以他貌似會記錄你過往這個檔案的內容，就算你刪了或修改那個檔案，他還是會讀取到舊的樣子，恐怕要過好一陣子他才會發現那個檔案消失了，他才會意識到他需要被改變。
所以雖然很多人都說static是放css和圖片的，但我都是確認不會需要再修改過後才會放進去。

css怎麼外放呢？就是將<style>中的那些設定全部copy出來放到另外一個檔案，然後檔名命css就好。位置的話如下：

那我們原本的html怎麼去使用他呢？
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/navbar.css')}}">
加入這一行，告訴他說，我要去static的資料夾裡找css資料夾裡的navbar.css
這樣就大功告成啦！