這個是我網站是我這次要報告的作品，這是我學習4年網頁設計的作品之一。

• 製作決定：2021/04/19
• 開發耗時：2021/04/19~2021/04/26 (7天)
• 所使用的語言
  • HTML (超文本標記語言)
  • CSS (階層式樣式表)
  • SCSS (優化CSS的選擇器的傳統費力方式)
  • JavaScript (跟Java 不一樣；是一種進階的、直譯的程式語言)
  • jQuery (基於 JavaScript 的語言簡化網頁開發的套件)

Font Awesome是基於CSS和Less的字體和圖標工具包，可以為選單添加多元的設計感。

• 簡化原生JavaSript複雜的繼承與選擇器的程式碼
• 內建大量便利且能快速計算與排版的函式
• 效能不佳，手機執行有機率造成手機瀏覽器沒有回應

                            $(function () {
    $('.drawer').hide();
    $('svg.fa-angle-double-down', this).data('on', false);

    $('div.item').on({
        click: function () {
            if ($('svg.fa-angle-double-down', this).data('on') == false) {
                $('svg.fa-angle-double-down', this).css({
                    "transform": "rotate(180deg)"
                });
                $('svg.fa-angle-double-down', this).data('on', true);
            } else {
                $('svg.fa-angle-double-down', this).css({
                    "transform": "rotate(0deg)"
                });
                $('svg.fa-angle-double-down', this).data('on', false);
            }
            $('.drawer', this).slideToggle();
        }
    });
})
    語言：jQuery
    

   /*!
    * Initialize.css (v1.3.1) is a complete and customizable collection of CSS best practices based on Normalize.css and HTML5 Boilerplate.
    * http://jeroenoomsnl.github.io/initialize-css
    *
    * HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate
    * Normalize.css: http://github.com/necolas/normalize.css
    */
    audio,
    canvas,
    progress,
    sub,
    sup,
    video {
        vertical-align: baseline
    }
    
    details,
    hr,
    main,
    summary {
        display: block
    }
    
    button,
    hr {
        overflow: visible
    }
    
    pre,
    textarea {
        overflow: auto
    }
    
    body,
    fieldset {
        margin: 0
    }
    
    fieldset,
    hr,
    legend {
        border: 0;
        padding: 0
    }
    
    html {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-family: sans-serif;
        line-height: 1.4;
        font-size: 1em;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%
    }
    
    *,
    :after,
    :before {
        -moz-box-sizing: inherit;
        box-sizing: inherit
    }
    
    audio:not([controls]) {
        display: none;
        height: 0
    }
    
    [hidden],
    template {
        display: none
    }
    
    a:active,
    a:hover {
        outline: 0
    }
    
    abbr[title] {
        border-bottom: none;
        text-decoration: underline;
        text-decoration: underline dotted
    }
    
    b,
    strong {
        font-weight: bolder
    }
    
    dfn {
        font-style: italic
    }
    
    h1 {
        font-size: 2em;
        margin: .67em 0
    }
    
    small {
        font-size: 80%
    }
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative
    }
    
    sup {
        top: -.5em
    }
    
    sub {
        bottom: -.25em
    }
    
    svg:not(:root) {
        overflow: hidden
    }
    
    figure {
        margin: 1em 40px
    }
    
    hr {
        -moz-box-sizing: content-box;
        box-sizing: content-box;
        height: 1px;
        border-top: 1px solid #ccc;
        margin: 1em 0
    }
    
    code,
    kbd,
    pre,
    samp {
        font-family: monospace, monospace;
        font-size: 1em
    }
    
    button,
    input,
    optgroup,
    select,
    textarea {
        font: inherit;
        margin: 0
    }
    
    button,
    select {
        text-transform: none
    }
    
    button,
    html input[type=button],
    input[type=reset],
    input[type=submit] {
        -webkit-appearance: button;
        cursor: pointer
    }
    
    button[disabled],
    html input[disabled] {
        cursor: default
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0
    }
    
    button:-moz-focusring,
    input:-moz-focusring {
        outline: ButtonText dotted 1px
    }
    
    input {
        line-height: normal
    }
    
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        height: auto
    }
    
    input[type=search] {
        -webkit-appearance: textfield
    }
    
    input[type=search]::-webkit-search-cancel-button,
    input[type=search]::-webkit-search-decoration {
        -webkit-appearance: none
    }
    
    textarea {
        resize: vertical
    }
    
    optgroup {
        font-weight: 700
    }
    
    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none
    }
    
    ::selection {
        background: #b3d4fc;
        text-shadow: none
    }
    
    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle
    }
    語言：CSS
                            

• 1994 - December 1996

  CCS 1

  於1994年，哈肯·維姆·萊和伯特·波斯合作設計CSS。他們在1994年首次在芝加哥的一次會議上第一次展示了CSS的建議。

  • 支援字型的大小、字形、強調
  • 支援字的顏色、背景的顏色和其他元素
  • 支援文章特徵如字母、詞和行之間的距離
  • 支援文字的排列、圖像、表格和其他元素
  • 支援邊緣、圍框和其他關於排版的元素
  • 支援id和class

• December 1996 - May 1998

  CSS 2

  絕對的、相對的和固定的定位元素、媒體型的概念、雙向檔案和一個新的字型。CSS2.1修改了CSS2中的一些錯誤，刪除了其中基本不被支援的內容和增加了一些已有的瀏覽器的擴充內容。

• May 1998 - June 2011

  CSS 3

  CSS3標準已部分公布，但仍未全部制訂完畢，還會有其它新內容繼續加入。W3C網站上有專頁展示CSS3發展的進展。 CSS3分成了不同類別，稱為「modules」。而每一個「modules」都有於CSS2中額外增加的功能，以及向下相容。 CSS3早於1999年已經開始制訂。直到2011年6月7日，CSS 3 Color Module終於發布為W3C Recommendation。 CSS3裡增加了不少功能，如：「border-radius」、「text-shadow」、「transform」以及「transition」。 CSS3亦支援動畫（animation）及立體（preserved-3d）。部分屬性（例如旋轉類屬性（如：transform）， 動畫類屬性，立體類屬性），由於現時不同瀏覽器支援程度不同，需要加上不同的瀏覽器前綴來區分。

• June 2011 - Today

  CSS 4

  W3C於2011年9月29日開始了設計CSS4。直至現時只有極少數的功能被部分網頁瀏覽器支援， 如使用在HTML而非SVG上的pointer-events。CSS4增加了一些更方便的選擇器，並簡化了一些現有選擇器的用法。