日本视频免费播放,午夜美女网站,一色屋免费视频

HTML 21 天入門：實現(xiàn)微博首頁實例

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

admin

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

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

要實現(xiàn)什么

微博首頁展示

在電腦上打開微博的頁面，能看到如下顯示。

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

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

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

logo 加搜索框
菜單鏈接

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

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

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

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

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

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