摘要：課程鏈接章節(jié)微博用戶發(fā)言列表視頻中提供了初級(jí)中級(jí)高級(jí)開發(fā)人員可能的不同布局方式。對(duì)整個(gè)用戶發(fā)言區(qū)域進(jìn)行整體布局，隨后用浮動(dòng)吧用戶頭像叉出去。這里視頻中給右上角發(fā)布時(shí)間用的是絕對(duì)定位。有各種不同的實(shí)現(xiàn)方法，可以多嘗試，打開思路。

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

章節(jié) 2-1 微博用戶發(fā)言列表

視頻中提供了初級(jí)中級(jí)高級(jí)開發(fā)人員可能的不同布局方式。個(gè)人覺(jué)得，最大的區(qū)別是，初級(jí)布局方法是div+浮動(dòng)，高級(jí)方法偏向于使用語(yǔ)義化標(biāo)簽。

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

附上效果圖

初級(jí)的代碼如下：

主要是用DIV布局，左邊圖像進(jìn)行浮動(dòng)。

.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月批準(zhǔn)立項(xiàng)試點(diǎn)，
                2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，
                為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
                報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
                400-00000000。p>
       div>
div>

中級(jí)代碼去掉了左邊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月批準(zhǔn)立項(xiàng)試點(diǎn)，
                2005年4月正式批準(zhǔn)運(yùn)營(yíng)的遠(yuǎn)程教育公共服務(wù)體系，
                為遍布全國(guó)的學(xué)員提供學(xué)歷(專升本，高起專)和非學(xué)歷教育咨詢、
                報(bào)名、學(xué)習(xí)輔導(dǎo)、課程考試、交費(fèi)等7X24小時(shí)學(xué)習(xí)支持服務(wù)
                400-0000000。p>
        div>
    div>

高級(jí)的代碼是去掉左邊，右邊div。對(duì)整個(gè)用戶發(fā)言區(qū)域進(jìn)行整體布局，隨后用浮動(dòng)吧img（用戶頭像）叉出去。

這里視頻中給右上角發(fā)布時(shí)間用的是絕對(duì)定位。我用的還是修改盒子的方法。

.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用絕對(duì)定位 */
.div3 p{
    padding: 10px;
}

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

個(gè)人感覺(jué)，三種方法從初級(jí)到高級(jí)逐漸簡(jiǎn)化，減少對(duì)DIV的使用，盡可能地使用語(yǔ)義化標(biāo)簽（本例并沒(méi)有）。

css有各種不同的實(shí)現(xiàn)方法，可以多嘗試，打開思路。

第一篇筆記 get√

(●?●)