一個web不可能只有一個頁面，所以我們需要超連結去幫助用戶前往其他頁面。所以我們今天來做一個簡單的side bar八
成品長這樣:
簡單的side bar
事前準備:
- 創task.html(以後的todolist就都會在這個檔案裡)
- 創sideBar.css(side bar 的排版都會在這)
- 創一個資料夾image 存放圖片
歐對了，我是從google font(Material Symbols & Icons - Google Fonts)那裡把icon下載下來的，然後放在叫image的資料夾
ps 你下載的時候會看到，PNG跟SVG這兩個選項，一個是點陣圖，另一個是向量圖。
向量圖的缺點是當圖形複雜時檔案會很大，但相對圖片可以動態的更改顏色，以及放大不失會糊掉。
啊我是隨便點一個拉，畢竟我覺得我很久之後才會用到SVG的應用ww。
想先學的我連結放這
SVG-概述 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
html 的部分:
首先，先創一個div
<div class="sidebar"></div>
接著，我們宣告一個超連結<a>
ps 不熟<a> 可以去這看一下
第5天:HTML-網頁間的連結 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天 (ithome.com.tw)
接著將圖片(img)丟進去<a>裡，並設定href(目標網址)
<a href="index.html"><img src="image/menu_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
如法炮製
<div class="sidebar">
<a href="index.html"><img src="image/menu_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
<a><img src="image/home_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
<a href="task.html"><img src="image/task_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
<a><img src="image/settings_24dp_FILL0_wght400_GRAD0_opsz24.png"></a>
</div>
task.html
css的部分:
先在head 裡打這行，連接html與css
<link rel="stylesheet" href="sideBar.css">
大小 顏色
接著將基本的大小跟顏色設定好
*{
/*將預設的padding跟 margin歸零*/
margin: 0px;
padding: 0px;
}
.sidebar{
width: 100vw;
background-color: rgb(224, 102, 15);
}
.sidebar a{
padding: 5px;
}
.sidebar a img{
height: 40px;
width: 40px;
}
排版
我希望四個icon 可以平分整個side bar的空間
所以加這兩行
.sidebar{
display: flex;
}
.sidebar a{
flex-grow: 1;
}
ps 如果不熟flex的話
CSS | 所以我說那個版能不能好切一點？ - Flex 基本用法 | by 神Q超人 | Enjoy life enjoy coding | Medium
並讓icon在<a>的中心
.sidebar a{
display: flex;
justify-content: center;
align-content: center;
}
再將side bar放在底部
.sidebar{
position: absolute;
bottom: 0px;
}
互動
最後讓滑鼠滑過去時，有些反應
.sidebar a:hover{
cursor: pointer;
background-color: rgb(227, 138, 49);
}
將整個task.html的程式複製到index.html就能切換頁面了
