摘要：課程鏈接章節微博用戶發言列表視頻中提供了初級中級高級開發人員可能的不同布局方式。對整個用戶發言區域進行整體布局，隨后用浮動吧用戶頭像叉出去。這里視頻中給右上角發布時間用的是絕對定位。有各種不同的實現方法，可以多嘗試，打開思路。

課程鏈接 https://www.imooc.com/learn/20

章節 2-1 微博用戶發言列表

視頻中提供了初級中級高級開發人員可能的不同布局方式。個人覺得，最大的區別是，初級布局方法是div+浮動，高級方法偏向于使用語義化標簽。

以下是看完視頻后自己寫的，與課程提供代碼不同。

附上效果圖

初級的代碼如下：

主要是用DIV布局，左邊圖像進行浮動。

.div1{
    margin:20px;
}
.left1 img{
    float: left;
    border: 1px solid gray;
    padding: 5px;
    margin-left:20px;
}
.right1{
    width: 500px;
    background-color: rgb(177, 216, 243);
    border: 1px solid gray;
    margin-left:100px;
    padding: 10px;
}
.right1 h6{
    padding: 10px;
}
.right1 span{
    float: right;
    color: gray;
    margin-top: -5px;
}

<div class="div1">
        <div class="left1">
            <img src="images/head02.jpg" alt="pthoto">
        div>
        <div class="right1">
            <span>10分鐘前span>
            <h6>櫻桃小丸子h6>
            <p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
                2005年4月正式批準運營的遠程教育公共服務體系，
                為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
                報名、學習輔導、課程考試、交費等7X24小時學習支持服務
                400-00000000。p>
       div>
div>

中級代碼去掉了左邊div，直接修改img屬性。

.div2{
    margin:20px;
}
.div2 img{
    float: left;
    border: 1px solid gray;
    padding: 5px;
    margin-left:20px;
}
.right2{
    width: 500px;
    background-color: rgb(177, 216, 243);
    border: 1px solid gray;
    margin-left:100px;
    padding: 10px;
}
.right2 h6{
    padding: 10px;
}
.right2 span{
    float: right;
    color: gray;
    margin-top: -5px;
}

<div class="div2">
        <img src="images/head02.jpg" alt="pthoto">
        <div class="right2">
            <span>10分鐘前span>
            <h6>櫻桃小丸子h6>
            <p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
                2005年4月正式批準運營的遠程教育公共服務體系，
                為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
                報名、學習輔導、課程考試、交費等7X24小時學習支持服務
                400-0000000。p>
        div>
    div>

高級的代碼是去掉左邊，右邊div。對整個用戶發言區域進行整體布局，隨后用浮動吧img（用戶頭像）叉出去。

這里視頻中給右上角發布時間用的是絕對定位。我用的還是修改盒子的方法。

.div3{
    margin:20px;
    width: 520px;
    background-color: rgb(177, 216, 243);
    border: 1px solid gray;
    margin-left:120px;
}
.div3 img{
    float: left;
    border: 1px solid gray;
    margin-left:-80px;
    padding: 5px;
}
.div3 h6{
    padding: 10px;
}
.div3 span{
    float: right;
    color: gray;
    margin-top: 5px;
}
/* 也可以給span用絕對定位 */
.div3 p{
    padding: 10px;
}

<div class="div3">
        <img src="images/head02.jpg" alt="pthoto">
        <span>10分鐘前span>
        <h6>櫻桃小丸子h6>
        <p>奧鵬教育是由教育部高等教育司2001年12月批準立項試點，
            2005年4月正式批準運營的遠程教育公共服務體系，
            為遍布全國的學員提供學歷(專升本，高起專)和非學歷教育咨詢、
            報名、學習輔導、課程考試、交費等7X24小時學習支持服務
            400-810-6736。p>
div>

個人感覺，三種方法從初級到高級逐漸簡化，減少對DIV的使用，盡可能地使用語義化標簽（本例并沒有）。

css有各種不同的實現方法，可以多嘗試，打開思路。

第一篇筆記 get√

(●?●)