微博用户发言列表
Posted sandraryan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微博用户发言列表相关的知识,希望对你有一定的参考价值。
课程链接 https://www.imooc.com/learn/20
章节 2-1 微博用户发言列表
视频中提供了初级中级高级开发人员可能的不同布局方式。个人觉得,最大的区别是,初级布局方法是div+浮动,高级方法偏向于使用语义化标签。
以下是看完视频后自己写的,与课程提供代码不同。
附上效果图
初级的代码如下:
主要是用DIV布局,左边图像进行浮动。
.div1{ margin:20px; } .left1 img{ float: left; border: 1px solid gray; padding: 5px; margin-left:20px; } .right1{ width: 500px; background-color: rgb(177, 216, 243); border: 1px solid gray; margin-left:100px; padding: 10px; } .right1 h6{ padding: 10px; } .right1 span{ float: right; color: gray; margin-top: -5px; }
<div class="div1"> <div class="left1"> <img src="images/head02.jpg" alt="pthoto"> </div> <div class="right1"> <span>10分钟前</span> <h6>樱桃小丸子</h6> <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点, 2005年4月正式批准运营的远程教育公共服务体系, 为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、 报名、学习辅导、课程考试、交费等7X24小时学习支持服务 400-00000000。</p> </div> </div>
中级代码去掉了左边div,直接修改img属性。
.div2{ margin:20px; } .div2 img{ float: left; border: 1px solid gray; padding: 5px; margin-left:20px; } .right2{ width: 500px; background-color: rgb(177, 216, 243); border: 1px solid gray; margin-left:100px; padding: 10px; } .right2 h6{ padding: 10px; } .right2 span{ float: right; color: gray; margin-top: -5px; }
<div class="div2"> <img src="images/head02.jpg" alt="pthoto"> <div class="right2"> <span>10分钟前</span> <h6>樱桃小丸子</h6> <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点, 2005年4月正式批准运营的远程教育公共服务体系, 为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、 报名、学习辅导、课程考试、交费等7X24小时学习支持服务 400-0000000。</p> </div> </div>
高级的代码是去掉左边,右边div。对整个用户发言区域进行整体布局,随后用浮动吧img(用户头像)叉出去。
这里视频中给右上角发布时间用的是绝对定位。我用的还是修改盒子的方法。
.div3{ margin:20px; width: 520px; background-color: rgb(177, 216, 243); border: 1px solid gray; margin-left:120px; } .div3 img{ float: left; border: 1px solid gray; margin-left:-80px; padding: 5px; } .div3 h6{ padding: 10px; } .div3 span{ float: right; color: gray; margin-top: 5px; } /* 也可以给span用绝对定位 */ .div3 p{ padding: 10px; }
<div class="div3"> <img src="images/head02.jpg" alt="pthoto"> <span>10分钟前</span> <h6>樱桃小丸子</h6> <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点, 2005年4月正式批准运营的远程教育公共服务体系, 为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、 报名、学习辅导、课程考试、交费等7X24小时学习支持服务 400-810-6736。</p> </div>
个人感觉,三种方法从初级到高级逐渐简化,减少对DIV的使用,尽可能地使用语义化标签(本例并没有)。
css有各种不同的实现方法,可以多尝试,打开思路。
第一篇笔记 get√
(●‘?‘●)
以上是关于微博用户发言列表的主要内容,如果未能解决你的问题,请参考以下文章
当我从用户获取数据并将其保存到 SQLite 数据库中时,我应该怎么做才能使列表视图在片段中工作