media 用list實現


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 10px 0px;
        }
    </style>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
    <ul class="media-list">
        <li class="media">
            <a class="media-left" href="#">
                <img src="images/media.png"/>
            </a>
            <div class="media-body">
                <h4>天氣預報</h4>
                <p>你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                </p>

            </div>
        </li>
        <li class="media">
            <a class="media-left" href="#">
                <img src="images/media.png"/>
            </a>
            <div class="media-body">
                <h4>天氣預報</h4>
                <p>你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                </p>

            </div>
        </li>
        <li class="media">
            <a class="media-left" href="#">
                <img src="images/media.png"/>
            </a>
            <div class="media-body">
                <h4>天氣預報</h4>
                <p>你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                    你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好你好嗎,我很好天氣也很好<br>
                </p>

            </div>
        </li>

    </ul>
</div>

</body>
</html>
發佈了52 篇原創文章 · 獲贊 9 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章