一個網頁的產生，除了跟消費者介紹產品與提供資訊外，最重要的就是要提供下單服務啦!!
這次要寫的樣式如下

這次要用 ul li 的清單方式來寫一個產品下單的列表，HTML 如下，說明直接寫在裡面

<section2>
        <div class="product">
            <div class="container">
                <div class="pro-header">
                    <h3>
                        付費方案
                    </h3>
                </div>
<!--                 先命名一個 product 標籤，知道這是產品的開始，一樣限制寬度，所以每次都會加一個 container ，之後就不再說明，先寫一個 pro-header 標示下方是可以付費的方案。 -->
                <ul>
                    <li>
                        MIL Prime
                        <h4>超級娛樂包</h4>
                        <p>
                            MIL music + MIL TV<br>
                            超值享樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>
<!-- 利用 ul li 的清單方式，列出裡面需要的標題與內容，為了強調價格，所以加上一個 strong 標籤，最後加上一個button 按鈕，其他以此類推。 -->
                    <li>
                        MIL simple
                        <h4>簡易娛樂包</h4>
                        <p>
                            MIL music + MIL TV<br>
                            簡易娛樂價<br>
                            NT$<strong>60/週</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>

                    <li>
                        MIL music
                        <h4>獨享音樂包</h4>
                        <p>
                            MIL music<br>
                            獨享音樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>

                    <li>
                        MIL TV
                        <h4>無敵追劇包</h4>
                        <p>
                            MIL TV<br>
                            超值享樂價<br>
                            NT$<strong>199/月</strong>
                            <button class="btn">了解更多</button>
                        </p>
                    </li>
                </ul>

            </div>
        </div>
    </section2>

這次 SCSS 比較多，分段來說明一下

h3{
    font-size: $font-l;
    padding:1em 0;
    color: $lead-color;
    margin-top:20px;
    font-weight:bold;
    text-align:center;
}

首先看到 h3，我在最前面會設定變數，為了之後修改方便，有設定 font-m、font-l、color的變數，設定變數有一個好處，因為網頁如果內容很多，會使用到相同的數值也會很多，要一行一行程式碼修改太大費周章，可以設定變數，統一管理是一個好方法。

.product{
    li{
        padding:1em;
        margin:1%;
        float:left;
        width:23%;
        border: 1px solid #8b8b8b;
        box-shadow:0 0 5px #a0a0a0;
        line-height:1.3;
        text-align:center;
    }
   // li 的統一設定所有的文字內容都 padding 向內推擠，因為需要並排，所以要使用 float:left，這邊用一個小技巧，因為要規劃成四個併排的表格另外又要有間格，所以 width 照理講要設定成 25%，但因為中間要有間格，將間隔設定成 1%，因為 margin 是設定上下左右都推 1%，所以實際上是推 2%，這邊 width 的就要 25%-2%=23%，才會平均讓四個表格在同一排。
    // 外框用 border 設定 1px 的線條，solid 實心線，顏色，
    // 這邊有使用陰影的效果，box-shadow 的排列是 X 軸、Y 軸、模糊值、顏色。
    // 讓 li 內的文字行高為 1.3 行距，然後都 text-align 置中對齊。
    h4{
        font-size:$font-l;
        padding:1em 0;
        color:$lead-color;
    }
    產品清單內的標題都用一致的設定。
    .btn{
        display:block;
        margin:0 auto;
        padding:10px 60px ;
        color:$lead-color;
        border: 2px solid $lead-color;
        background-color:#f3f3f3;
        font-size: 18px;
        margin-top:1em;
        text-align:center;
        cursor:pointer;
        // 為了讓 btn 可以自己一排，所以設定 display: block，
        // 讓按鈕置中 margin: 0 auto，
        // padding 的左右部分是邊用 chrome 裡面的 CSS 直接設定到我要的寬度，有點偷懶，因為不知道怎麼算...
        // 這邊有用一個 cursor:pointer 的小技巧，讓滑鼠油標移到按鈕時，會變成手指的符號
        &:hover{
            background-color:$lead-color;
            color:#fff;
            transition:all .3s;
            border-radius: 3px;
            // 優化按鈕，
        // 這邊用了一個漸變的效果 transition ，滑鼠點過去會有 0.3 秒的變化，看起來比較有互動性，
        // 按鈕邊角有設定圓角 3px。
           
        }
    }
}

今天就是一個 ul li 的延伸練習，
附上 codepen 連結 https://codepen.io/hnzxewqw/pen/JjPpMoY