慕课网笔记--不同开发人员制作用户发言列表的不同思路

番茄西红柿发布于2019-04-23 11:40 / 359人阅读

摘要：课程链接章节微博用户发言列表视频中提供了初级中级高级开发人员可能的不同布局方式。对整个用户发言区域进行整体布局，随后用浮动吧用户头像叉出去。这里视频中给右上角发布时间用的是绝对定位。有各种不同的实现方法，可以多尝试，打开思路。

课程链接 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√

(●◡●)

混合云 idc机房托管不同的用户间oss 云服务器上的文件怎么设置不同的用户权限 asp 不同用户慕课网

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/999.html

慕课网笔记--不同开发人员制作用户发言列表的不同思路

摘要：章节微博用户发言列表视频中提供了初级中级高级开发人员可能的不同布局方式。对整个用户发言区域进行整体布局，随后用浮动吧用户头像叉出去。这里视频中给右上角发布时间用的是绝对定位。有各种不同的实现方法，可以多尝试，打开思路。章节 2-1 微博用户发言列表视频中提供了初级中级高级开发人员可能的不同布局方式。个人觉得，最大的区别是，初级布局方法是div+浮动，高级方法偏向于使用语义化标签。以下...

番茄西红柿 2019-04-22 16:12 评论0 收藏0
慕课网《十天精通CSS3》笔记——《制作导航菜单综合练习题》

摘要：制作立体导航制作圆制作导航立体风格使用伪元素制作导航列表项分隔线删除第一项和最后一项导航分隔线以下是一个带有hover特效的导航栏HTML+CSS源码。 CSS制作立体导航 body{ background: #ebebeb; } .nav{ widt...

fantix 2019-08-02 18:09 评论0 收藏0
入门级前端开发可能需要的安利列表

摘要：开发篇版本管理工具，无脑的视图操作，功能强大并且支持多账号点我跳转网站篇学习最重要的是经常百度，要始终坚信着你的水平能遇到的坑，别人都帮你踩过了。另外就是开发过程多看文档，很多问题文档都会有相关的解决方案，多看几次就能想到解决方法。 IDE篇程序员最重要的的就是IDE了，一个好的IDE可以帮你省略大量的时间，以及少生很多闷气，下面开始前端的IDE推荐： VSCode 最推荐的IDE...

Flands 2019-08-22 18:28 评论0 收藏0
入门级前端开发可能需要的安利列表

摘要：开发篇版本管理工具，无脑的视图操作，功能强大并且支持多账号点我跳转网站篇学习最重要的是经常百度，要始终坚信着你的水平能遇到的坑，别人都帮你踩过了。另外就是开发过程多看文档，很多问题文档都会有相关的解决方案，多看几次就能想到解决方法。 IDE篇程序员最重要的的就是IDE了，一个好的IDE可以帮你省略大量的时间，以及少生很多闷气，下面开始前端的IDE推荐： VSCode 最推荐的IDE...

wwolf 2019-08-05 14:16 评论0 收藏0
慕课网_《Docker入门》学习总结

摘要：时间年月日星期六说明本文部分内容均来自慕课网。必填用于执行命令，当执行完毕后，将产生一个新的文件层。可选指定此镜像启动时默认执行命令。可选用于指定需要暴露的网络端口号。可选向镜像中挂载一个卷组。时间：2017年09月16日星期六说明：本文部分内容均来自慕课网。@慕课网：http://www.imooc.com 教学源码：无学习源码：无第一章：课程简介 1-1 课程介绍 Docke...

CoorChice 2019-06-28 16:00 评论0 收藏0