接前一部分完成微博首頁的布局 1實現(xiàn)，今天完成首頁正文的顯示。

要實現(xiàn)什么

同樣的，把實現(xiàn)分成三個部分：

• 第一行個人信息

• 第二行正文

• 第三行統(tǒng)計信息

先看一下實現(xiàn)的效果：

?

可能從樣式上來看，會有細(xì)微差別。目前咱們看的是 HTML 部分實現(xiàn)，樣式部分暫時不要求一模一樣。

第一行個人信息

個人信息部分，有頭像，名稱，還有時間信息。

表示這一篇是誰在什么時間發(fā)布的。

<div class="personal">   <img src="../img/4-2-1-profile-pic.png" />   <div>     <span class="name">楊冪</span>     <span class="date">09-12 19:17</span>   </div> </div> 

.personal {   height: 40px;   padding: 5px 10px;   margin-bottom: 10px; }  .personal img {   float: left;   border-radius: 3em;   height: 40px;   width: 40px;   margin-right: 10px; } .personal div {   padding: 5px; } .personal span {   display: block; } span.name {   font-size: 0.9em; } span.date {   font-size: 0.7em;   color: #aaa; } 

第二行正文

正文，包含了文字和圖片，這里只做簡單實現(xiàn)，沒有考慮復(fù)雜的情況，比如長文本只顯示部分等。

<div class="post">   EP32:歲歲常安 謝謝大家的愛&#x1F9E1;   <div>     <img src="../img/4-2-1-img1.png" />     <img src="../img/4-2-1-img2.png" />     <img src="../img/4-2-1-img3.png" />   </div> </div> 

.post {   padding: 5px 10px; } .post div {   margin-top: 10px; } .post img {   width: 128px;   height: 128px; } 

第三行統(tǒng)計信息

統(tǒng)計信息，也是用到了圖片。

<div class="statics">   <span><img src="../img/4-2-1-forward.png" /> 100萬</span>   <span><img src="../img/4-2-1-comments.png" /> 8.8萬</span>   <span><img src="../img/4-2-1-thumbup.png" /> 111萬</span> </div> 

.statics {   color: #aaa;   padding: 5px 10px;   font-size: 0.8em; } .statics span {   display: inline-block;   margin-right: 20px; } .statics img {   float: left;   width: 24px;   height: 24px; } 

小結(jié)

目前完成的首頁部分，可以看到成品如下：

有多條發(fā)布的微博時，其實就是正文的重復(fù)，不同的人信息內(nèi)容。

這里復(fù)制了個相同的顯示內(nèi)容，就是表達這個意思。

到目前為止，首頁部分的實現(xiàn)就結(jié)束了，明天繼續(xù)實現(xiàn)登錄頁面。