LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

HTML 21 天入门:完成微博首页的布局 2

admin
2024年10月19日 22:17 本文热度 87

接前一部分完成微博首页的布局 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; } 

小结

目前完成的首页部分,可以看到成品如下:

有多条发布的微博时,其实就是正文的重复,不同的人信息内容。

这里复制了个相同的显示内容,就是表达这个意思。

到目前为止,首页部分的实现就结束了,明天继续实现登录页面。


该文章在 2024/10/22 12:22:54 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved