這次要寫一個新聞欄位，是用 ul li 做成的圖文並茂，標題為連結，可以點擊的樣式
畫面如下呈現:

其實寫道今天有發現到 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