欧美牲交a欧美牲交aⅴ免费真,2021精品亚洲中文字幕,国产精品毛片va一区二区三区

HTML 21 天入門(mén)：實(shí)現(xiàn)微博首頁(yè)實(shí)例

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2024年10月19日 22:16 本文熱度 1603

嘗試實(shí)現(xiàn)一下微博的首頁(yè)和登錄頁(yè)面，使用我們前面學(xué)過(guò)的知識(shí)進(jìn)行一次實(shí)踐。

要實(shí)現(xiàn)什么

微博首頁(yè)展示

在電腦上打開(kāi)微博的頁(yè)面，能看到如下顯示。

這個(gè)頁(yè)面，我們把它簡(jiǎn)化為兩塊內(nèi)容，即上面標(biāo)注的 1 和 2。

而且很容易看到下面的內(nèi)容，比如 3，其實(shí)是 2 的重復(fù)。

對(duì)于 1 的內(nèi)容，它又分成了兩塊：

logo 加搜索框
菜單鏈接

對(duì)于這一部分的實(shí)現(xiàn)，使用的知識(shí)有學(xué)習(xí)的 form 表單中的 input，以及鏈接。當(dāng)然 logo 的展示是圖片，需要用到 img。

最右邊的圖標(biāo)，如果點(diǎn)擊了會(huì)展開(kāi)更多的內(nèi)容，它們本質(zhì)上也是鏈接，只是樣式上略微有變化。

而對(duì)于 2，它是某個(gè)人發(fā)布了一篇微博的正文展示，它又分成了以下 4 個(gè)部分：

發(fā)布人信息:包括頭像，名稱(chēng)，發(fā)布時(shí)間，使用何種設(shè)備發(fā)布。
發(fā)布信息：文字信息摘要。這里的文字如果過(guò)多的話(huà)，只會(huì)顯示一部分，點(diǎn)擊最下面的全文則可以跳轉(zhuǎn)到詳細(xì)頁(yè)面查看。這也是信息展示中的常用方式。
發(fā)布信息：圖片，列出前三個(gè)圖片，如果過(guò)多，也會(huì)有一個(gè)鏈接跳轉(zhuǎn)到詳細(xì)頁(yè)。
統(tǒng)計(jì)信息：轉(zhuǎn)發(fā)次數(shù)，留言次數(shù)和點(diǎn)贊次數(shù)。

按照這樣的劃分，我們的網(wǎng)頁(yè)結(jié)構(gòu)也基本上就出來(lái)了。

<body>   <header class="header">     <div>頭部信息展示logo和搜索區(qū)域</div>     <div>頭部信息展示展示菜單區(qū)域</div>     <div>頭部信息展示展示全部菜單區(qū)域</div>   </header>   <section class="container">     <article>       <div class="personal">個(gè)人信息</div>       <div class="post">正文信息+圖片</div>       <div class="statics">統(tǒng)計(jì)信息</div>     </article>     <article>       <div class="personal">個(gè)人信息2</div>       <div class="post">正文信息2+圖片2</div>       <div class="statics">統(tǒng)計(jì)信息2</div>     </article>     <article>       <div class="personal">個(gè)人信息3</div>       <div class="post">正文信息3+圖片3</div>       <div class="statics">統(tǒng)計(jì)信息3</div>     </article>   </section>   <footer class="footer">     <p>&copy; 2024 IT從業(yè)指北</p>   </footer> </body>