欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

要實現什么

同樣的，把實現分成三個部分：

• 第一行個人信息

• 第二行正文

• 第三行統計信息

先看一下實現的效果：

?

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

第一行個人信息

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

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

<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; } 

第二行正文

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

<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; } 

第三行統計信息

統計信息，也是用到了圖片。

<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; } 

小結

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

有多條發布的微博時，其實就是正文的重復，不同的人信息內容。

這里復制了個相同的顯示內容，就是表達這個意思。

到目前為止，首頁部分的實現就結束了，明天繼續實現登錄頁面。