iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 19
0
自我挑戰組

網頁學習紀錄系列 第 19

鐵人賽 Day19 向 KKBOX致敬-用 ul li 寫一個左右欄的圖文列表

  • 分享至 

  • xImage
  •  

ul li 列表寫法用途真的很廣泛,能呈現的方式也非常多。
想要呈現的方式如下:
https://ithelp.ithome.com.tw/upload/images/20190922/20119300VnJdrho36b.png

HTML 程式碼如下

   <div class="prefer-content">
                            <h2>每天新推薦</h2>
                            <div class="play-line"></div>
                            <ul class="wrap">
                                <li>

                                    <div class="wrap-left">
                                        <img src="https://images.unsplash.com/photo-1489724309061-9b8af05f95e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                                            alt="">
                                    </div>
                                    
                                    <div class="wrap-right">
                                        <h3>
                                            因為你聽過鐵肺人生
                                        </h3>
                                        <p>他就圖象圖像化銀行稱為臺灣法律,反正都不玻璃東方水果,結束女朋友三年,運行平台一定要二十。
                                        </p>

                                    </div>
                                </li>

在 li 在左邊與右邊!

SCSS 如下呈現

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

    .wrap {
        margin-top: 1em;
    }

    li {
        width: 31.33333%;
        margin-right: 1%;
        margin-left: 1%;
        float: left;

        .wrap-left {
            float: left;
            max-width: 50%;
            height: 200px;
            margin-right: 10px;
左邊的設定
            img {
                max-width: 100%;
                height: auto;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
            }
            圖片這樣的設定滿好用的,而且很常用
        }

        .wrap-right {
            padding: 5px;

            h3 {
                font-size: 14px;
                color: #333;
                font-weight: bold;
                text-align: left;
                margin-bottom: 10px;
            }
右邊的設定
        }
    }
}

這次內容沒有寫得太特別,附上 Codepen
https://codepen.io/hnzxewqw/pen/OJLrxqR


上一篇
鐵人賽 Day18-向 KKBOX 致敬!用 ul li 寫一個新聞欄位!
下一篇
鐵人賽 Day20 向 KKBOX致敬-嵌入 youtube 連結
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言