本日小作品：
https://codepen.io/linchinhsuan/pen/oNxaXJw

練習重點摘要：

z-index: 2;

點擊【聯絡我們】可以打開一個選單，這裡因為ul使用了position: absolute;，而父層的li使用了position: relative;所以會定在【聯絡我們】原本的位置上，再用top: 36px;把選單推到正確的位置即可。但是因為與下方的<div class="container">區塊重疊，又後者的程式碼在後，後面覆蓋前面的結果就是會導致點擊不到選單。所以這裡使用z-index: 2;確保選單在最上層。

$(document).ready(function () {"要做的事"}

jQuery的起手式，白話文的意思是當整個網頁都準備好的時候才能跑裡面的程式碼，目的是要確保瀏覽器已經讀完jQuery的檔案，不然如果瀏覽器沒有先讀到jQuery本體，那裡面寫的code就沒有意義。

$(".sns").click(function (e) {"要做的事"});

$(".sns")是選取這個dom元素節點，後面則是為其加上點擊事件。完整的白話文就是點擊了選取的物件就會執行要做的事。這裡我們要執行的是$(".header .list").slideToggle(800);讓選單以下滑的方式出現，slideToggle代表在關閉的情況下下滑出現，反之則上滑關閉，是可以點擊同個元素達到兩個效果的語法。括號內的則是動畫秒數，1000等於一秒，所以這裡是0.8秒。

$(".smallCar").css("right","700px");

一樣是點擊事件，然後這個語法是控制車子的css屬性，括號內的左邊是屬性名稱，右邊是值。所以這裡就是將車子的right從原先css寫的0改成700px。再透過transition達到達到動畫的效果。

$(".smallCar").css("right","0px");

跟上面一樣，這個則是讓小車回去的設定。

$(".day span").toggle();

toggle是雙向的，slideToggle就是包含slideUp和slideDown。若只寫toggle則是包含show跟hide兩個語法。在<span>顯示的時候會執行.hide()效果，反之則是執行.show()。兩者的原理都是在標籤上寫inline-style，使用display:none;來達成。

－－－

備註：
本小作品使用了Pure.css的按鈕

－－－

本日結語：
今天是第六天，邊學習新東西的同時，也複習之前學過的jQuery，並做成了今天的小作品。這次參賽本來就是希望能夠藉此機會好好的練習過往所學，希望自己能夠順利完賽並能有所收穫！