iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

網頁學習紀錄系列 第 6

鐵人賽Day6-寫一個 用 ul li 產生的 product 產品表吧!

一個網頁的產生,除了跟消費者介紹產品與提供資訊外,最重要的就是要提供下單服務啦!!
這次要寫的樣式如下
https://ithelp.ithome.com.tw/upload/images/20190908/20119300itOCWA3nyO.png

這次要用 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


上一篇
鐵人賽Day5-寫一個 三欄式 ul li 吧!
下一篇
鐵人賽Day7-來嵌入 map 與 寫一個 form 吧!
系列文
網頁學習紀錄30

尚未有邦友留言

立即登入留言