iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
1
自我挑戰組

網頁學習紀錄系列 第 15

鐵人賽Day15-向 KKBOX 致敬!寫個右邊欄位的 header!

  • 分享至 

  • xImage
  •  

左邊的欄位已經寫完了,這篇開始從右側欄位開始撰寫內容,
預計 header 會長這樣,左邊是一排選單,右邊有一個按鈕,給客戶做意見回饋用,
如下圖:
https://ithelp.ithome.com.tw/upload/images/20190918/20119300wD9xuktDc6.jpg

為了要讓兩欄的可以同時出現在畫面上,有一個地方稍微做了調整,
之前有設定 .container-left 跟 .container-right 兩個 Class,
但少寫了一些東西,補充優化 SCSS,如下方程式碼所示:

.container-left {
    width: 20%;
    float: left;
}
左邊我設定為佔 container 的 20%,並靠左對齊。
.container-right {
    width: 80%;
    float: right;
}
右邊設定佔 container 的 80%,並靠右對齊。

這樣才會正常顯示左邊 aside 跟右邊的 content,

而右側欄位先寫上一個 header,裡面要放一排清單跟按鈕,
HTML 會長這樣:

<div class="container-right">
                <div class="header">
                    <ul class="menu">
                        <li><a href="#">精選</a></li>
                        <li><a href="#">頭條</a></li>
                        <li><a href="#">排行榜</a></li>
                        <li><a href="#">新發行</a></li>
                        <li><a href="#">曲風情境</a></li>
                    </ul>
                    <button class="btn">意見回饋</button>
    
                </div>
            </div>

應該不難發現,只要是清單類的,都可以用 ul li 來解決,而且樣式萬變不離宗...

而 SCSS 是這樣撰寫


.header {
    height: 50px;

    .menu {
        float: left;
讓 menu 靠左對齊
        li {
            float: left;
使之變成併排
            a {
                display: block;
                margin-right: 30px;
                font-size: 18px;
                color: #333;

                &:hover {
                    color: $lead-color;
                }
            }
        }
    }

    .btn {
        border: 1px solid #333;
        background: #fff;
        color: #333;
        float: right;
        padding: 5px;
        margin-top: 10px;
        cursor: pointer;
讓按鈕靠右對齊,
margin-top 是嘗試幾次出來的空間,純粹覺得視覺上是對齊清單的
        &:hover {
            background: $lead-color;
            color: #fff;
            border: 1px solid $lead-color;
        }
    }滑鼠經過按鈕的效果
}

今天的寫法也很簡單,一個網站到目前為止最常出現,而且重複的就是 ul li 的技法,
附上 Codepen https://codepen.io/hnzxewqw/pen/JjPmyPr


上一篇
鐵人賽Day14-向 KKBOX 致敬,寫一個 aside 側邊欄位吧!播放器!
下一篇
鐵人賽 Day16-向 KKBOX 致敬!來一個滿版主視覺吧!!
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言