iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
Modern Web

慢慢帶你了解Flask系列 第 5

慢慢帶你了解Flask - Day5 網路相簿(1):Navigation Bar

大家好,我是長風青雲。
今天是參加鐵人賽的第五天了,同時今天是我們的第一個實例。
但首先我要先說一個觀念,關於Modern Web,而我們這次在鐵人賽裡所設計的每個網站都會依照這件事去設計。
所以我先說明一下什麼是Modern Web

在現今,我們極多數人都人手一支手機,但手機的網頁和電腦的網頁適合顯示的方式並不同。
主要不同的地方有兩點:

  1. 一頁書式網站
    當你在操作手機時,你一定不喜歡又要上下滑又要左右滑對吧?
    所以現今你大部分看到的網頁顯示的方式都只有上下滑動。
    這也就是一頁書的意思。
  2. RWD
    頁面會隨著你所使用的螢幕大小更改他的顯示方式。
    也就是說,電腦的網站還是維持原本的樣子,但當你用手機打開此網站時顯示方式會有所不同。

好,介紹完了,是不是很明瞭?
那接下來我們就來公布今天的主題:Navigation Bar 的 RWD
嗯,對,今天講的是CSS。
如果很了解這塊的人……今天的可能對你而言是廢話XD
然後我算是個CSS新手,所以如果有寫的不好的地方也希望能夠得到指教~

首先,我們先做出平常的Navigation Bar。
在你的body 內加入

<ul>
	<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 %}
</ul>

顯示效果如下,很醜對吧,所以這時就需要我們的css了。
https://ithelp.ithome.com.tw/upload/images/20190904/20120116tUv6Tmrtwy.png
<body>前加入<style></style>然後開啟我們的CSS之旅~

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

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

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

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

我們要告訴我們的HTML,我們的ul、我們的li、我們的a要長什麼樣子。
background-color和color就是背景顏色和字體顏色,我想這就看大家想要什麼顏色就什麼顏色好了~
然後我呢……剛剛抽籤抽到紫色,所以我這次的相簿發展主要底色定為紫色。
然後我來說一下剛剛的css程式碼
list-style-type是指這個list的mark,我就截個圖你們就知道了
https://ithelp.ithome.com.tw/upload/images/20190904/20120116tRMhpuziL8.png
https://ithelp.ithome.com.tw/upload/images/20190904/20120116yMcxGwLg5M.png
懂了吧?其實就是前面的mark長什麼樣,但我們是navigation bar所以用none
margin是用來定義一個區域與外邊的距離,像我們定義0,其實就是跟外邊的<body>一樣
overflow如果元素超過設定範圍的話,該如何顯示(雖然我們這次的設計不會出這樣的狀況拉,因為我們有RWD,但是我們還是寫說那就直接隱藏不管。)
position意思是他的位置,我們設定fixed的話,當我們往下滑,他就會隨著我們的螢幕一起移動,一直保持他出現在我們的界面上方。
display 來,上圖
https://ithelp.ithome.com.tw/upload/images/20190904/20120116Zb3p6EfhDE.png
padding 跟margin很像,但他是自己的框與元素的距離
text-decoration
https://ithelp.ithome.com.tw/upload/images/20190904/20120116x7UbpUYduU.png
於是我們的顯示結果是:
https://ithelp.ithome.com.tw/upload/images/20190904/20120116TNkKxS8P5o.png
嗯?你問我為什麼沒有貼齊邊線?那是因為body沒有貼齊邊線啊!
所以我們在<style>裡面加上

body{
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
}

https://ithelp.ithome.com.tw/upload/images/20190904/20120116yQq4QfEIj1.png
完成~
但是!我們還沒做手機螢幕顯示的話要怎麼呈現呢!
這部分就留等明天再告訴你們吧~
https://ithelp.ithome.com.tw/upload/images/20190904/201201165SngifInuy.png


上一篇
慢慢帶你了解Flask - Day4 網頁之間傳值
下一篇
慢慢帶你了解Flask - Day6 網路相簿(2):Navigation Bar(RWD)
系列文
慢慢帶你了解Flask30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
阿瑜
iT邦研究生 4 級 ‧ 2019-09-07 17:15:04

簽到 #5
剛剛抽籤抽到紫色 // 笑翻
阿瑜 指定要黃色 /images/emoticon/emoticon41.gif

0
boym888
iT邦新手 5 級 ‧ 2021-10-25 22:06:09

版主好
請教一個問題
我的users 為甚麼會顯示對定義呢?

@@ 抱歉有點晚回,但我看不懂你的意思。你可以附圖嗎?還是你已經解決了XDDD

我要留言

立即登入留言