iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 18
0
自我挑戰組

網頁學習紀錄系列 第 18

鐵人賽 Day18-向 KKBOX 致敬!用 ul li 寫一個新聞欄位!

這次要寫一個新聞欄位,是用 ul li 做成的圖文並茂,標題為連結,可以點擊的樣式
畫面如下呈現:
https://ithelp.ithome.com.tw/upload/images/20190921/20119300D0v3IZ7raD.png

其實寫道今天有發現到 ul li 相當常被使用到,只是內容有不同的變化,
HTML 如下,因為有很多個,就用一個來當例子

 <section1>
                        <h2>音樂頭條</h2>
                        <div class="play-line"></div>
                        <div class="music-content">
                            <ul>
                                <li>
                                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                                        alt="">

                                    <a href="#">
                                        <h3>
                                            發燒點播歌曲
                                        </h3>
                                    </a>
                                    <p>掌握利潤商機校園歌詞這次穿著指出範圍內關鍵字有一種,反應你說場所該公司,東京每日自由幽默改變賓館,美女出版隊伍兩位沉默體育字元發佈日期,多次其實銷售任何家庭請。
                                    </p>
                                </li>

有發現到跟之前有寫過的【用 ul li 寫一個三欄式表單】的內容差不多
這邊只做了一點不同的元素而已,這次在 li 裡面一樣先放上圖片,標題改為 a連結裡面放上一個h3標題,在 a 連結外面才加入一個p,這樣才能確保只有標題是連結可以點選,當然如果要把圖片放入 a 連結也是可以,增加點及的範圍。

SCSS 如下

.music-content {
    margin-top: 1em;

    li {
        width: 31.33333%;
        margin-right: 1%;
        margin-left: 1%;
        float: left;
        h3 {
            font-size: 18px;
            color: #333;
            font-weight: bold;
            text-align: center;
            margin-bottom:10px;
        }
    }

    img {
        max-width: 100%;
        height: auto;
        margin-top: 2em;
    }
   
}

其實設定的樣式跟之前寫過得差不多,但這邊是否有發現怎麼沒有 a 連結跟 p 的設定,原因是在整個程式碼最上方已經將 a 連結獨立設定了,所以這邊就不再重複設定。

a {
    text-decoration: none;
}

p {
    font-size: 12px;
    color: #b3b3b3;
    line-height: 1.5;
}

如果網頁中有幾個重複會使用到的樣式,建議可以寫在整個網頁 layout 的起點,這樣就不用一直重工囉!!

附上 codepen
https://codepen.io/hnzxewqw/pen/jONXVPr


上一篇
鐵人賽Day17-突如其來的電腦當機
下一篇
鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表
系列文
網頁學習紀錄30

尚未有邦友留言

立即登入留言