从懈怠到调整好心态的第十天

已于 2022-07-28 14:31:30 修改
阅读量121 收藏
点赞数 1
分类专栏： 前端 自学前端 html标签 文章标签： css css3 html
于 2022-07-27 21:37:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59201314/article/details/126023421
版权
自学前端 同时被 3 个专栏收录
14 篇文章 0 订阅
订阅专栏
html标签
12 篇文章 0 订阅
订阅专栏
前端
11 篇文章 0 订阅
订阅专栏

今天没学习新的内容，做了另一个案例。

从刚开始学习到现在差不多十天了 每一天按时学习 然后复习总结 这是一个很不容易的过程，这个过程很辛苦，但只要能一直坚定自己的目标就是好的。中途我也迷茫过想过放弃，但你想想 你已经坚持了那么多天努力了那么久 为何不再坚持坚持呢？

鸡汤结束 开始正题
上图：
在这里插入图片描述

这是花礼网的评价晒图区域，也是今天的任务，第一眼看到这一块的时候，我的思绪是很乱的，不知道从哪里下手。

下面是我的思路：
在这里插入图片描述
一个大的container容器，分为红色的两部分 上下两个div；
然后下面的div是八个小块，也就是八个div；
小块里面可以分为左右两个蓝色部分的div；
整体思路和框架清晰之后再去敲就方便多了，最后改一下样式即可。

先看代码 如下：

<body>
    <div class="comments">
        <div class="container">
            <div class="head">
                <h3><a href="">晒单评价</a> <span>用户实拍晒单</span></h3>
            </div>
            <div class="body">
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/3946935.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/452bc80652bc40819bafb44318cf6704.jpeg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花挺新鲜，配送人员很礼貌。
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
                <div class="comments-item">
                    <a href="">
                        <div class="comments-item-l">
                            <div class="comments-item-user">
                                <img src="./img/avatar_default_08.jpg" alt="">
                                <span>李*杰</span>
                            </div>
                            <div class="comments-item-info">
                                <div class="item-info-comment">
                                    花很精致，非常漂亮
                                </div>
                                <div class="item-info-time">
                                    <p>河北石家庄市新华区</p>
                                    <p>2022-07-26</p>
                                </div>
                            </div>
                        </div>
                        <div class="comments-item-r">
                            <img src="./img/8b6cddf7d7ef46e7a881a05796ff0f30.jpg" alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>

因为页面内容较多，所以代码就很多…

下面是css样式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .comments {
            background-color: #E9ECF0;
        }

        .container {
            width: 1216px;
            margin: 0 auto;
            padding: 40px 0 32px;
        }

        .comments .head {
            width: 1200px;
            margin: 0 8px;
        }

        .comments .head h3 {
            font-size: 26px;
            line-height: 30px;
            color: #232628;
            font-weight: bold;
        }

        .comments .head h3 a {
            text-decoration: none;
            color: inherit;
        }

        .comments .head h3 span {
            padding-left: 15px;
            margin-left: 16px;
            font-size: 20px;
            line-height: 24px;
            font-weight: normal;
            border-left: 1px solid #71797F;
        }

        .comments .body {
            margin-top: 14px;
            font-size: 0;
        }
        .comments .comments-item{
            display: inline-block;
            width: 272px;
            height: 160px;
            margin: 0 8px 8px;
            padding: 8px;
            color: #232628;
            background-color: #fff;
            border-radius: 8px;
        }

        .comments .comments-item .comments-item-l{
            display: inline-block;
            width: 138px;
            height: 100%;
            padding: 8px;
            vertical-align: top;
        }
    
        .comments .comments-item .comments-item-l .comments-item-user img{
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            vertical-align: top;
        }
        .comments .comments-item .comments-item-l .comments-item-user span{
            font-size: 12px;
            color: #71797F;
            line-height: 24px;
            padding-left: 12px;
            vertical-align: top;
        }
        .comments .comments-item .comments-item-l .comments-item-info{
            height: 112px;
            padding-top: 8px;
        }
        .comments .comments-item .comments-item-l .comments-item-info .item-info-comment {
            height: 80px;
            font-size: 14px;
            line-height: 20px;
            color: #232628;
        }
        .comments .comments-item .comments-item-l .comments-item-info .item-info-time p{
            font-size: 12px;
            color: #B4BABF;
        }
        .comments .comments-item .comments-item-r{
            display: inline-block;
            width: 118px;
            height: 160px;
            vertical-align: top;
            text-align: center;
        }
        .comments .comments-item .comments-item-r img{
            width: 100%;
            height: 100%;
            border-radius: 8px;            
        }
    </style>

总的来说看起来很复杂，当年做完之后会觉得只是麻烦了点，并不复杂。
只要做出里面的一小块div内容即可，其他的模板是一样的。

欢迎各位大佬留言
me一直在努力…
每天更新ing…

桥北丶
关注
专栏目录
【程序员创业指南：一人公司实现财富自由之路】从大厂架构师到“一人公司”创始人：AI 大模型个人生产力工具创业实战指南
AI天才研究院
09-21 37
AI 将继续渗透各个行业，深入理解和应用 AI 技术，将为创业者带来更多机会。从程序员到创业者，是一次挑战也是一次机遇。利用自身的技术优势，抓住时代的潮流，专注于用户价值的创造，就有可能在激烈的市场竞争中脱颖而出，实现财富和人生的自由。“一人公司”不仅是一种商业模式，更是一种生活方式的选择。它代表着对自由、独立和创造力的追求。在这个充满可能性的时代，每一个有梦想的程序员，都有机会通过自己的努力，书写属于自己的创业传奇。希望本文能为正在或准备踏上创业之路的你，提供一些有价值的思考和参考。
从家里到阿里，学弟求职的一年
努力做最接地气的编程干货分享，感谢关注
07-24 3406
一年，从懵懂小白到 BAT 大佬，他都经历了什么？ 大家好，我是鱼皮，今天给大家分享一位学弟小六的 超完整 学习和求职经验，不需要我太多的介绍，他的故事和干货都在文章里了，希望对大家有帮助。 已得到原作者授权 作者：牛客 六分钟热度 写在前面：自我介绍一下，21 届 211 科班菜鸡，在校时学业荒废，技术基础薄弱，成绩一般，保研无望，遂准备工作。 求职战果：阿里、百度、滴滴、OPPO、招银等，BAT TMD 拿到了一半吧。 本文力求在回忆总结、播撒鸡汤的同时多上点对读者有益的干货，对故事没兴趣的同学.
《辛雷学习方法》读书笔记——第二章 心态
专注极致
07-21 7857
第二章 心态   （1）保持良好心态：学习时保持良好心态，你才能比较容易入门、深入掌握知识、灵活运用知识。学习时始终保持着轻松愉悦振奋的心情，你就容易产生学习心得，更容易灵活运用。 （2）爱情对心态影响巨大，对学习的影响巨大。要想学习好，你最好彻底杜绝对爱情的期待，也就是不要“想”爱情。如果不能彻底杜绝对爱情的期待，则尽量减少爱情的影响。 （3）父母、老师、同学从诸多方面影响你的学习，你尽
毕业前三年如何拿到好绩效
Hello World
07-18 1423
毕业前三年战略打法 入职0.5年 入职1.5年 入职2.5年 如何拿到好绩效 居安思危 日常工作 技术成长 总结 毕业前三年战略打法 入职 0.5 年 作为职场新人，目标只有一个，尽快的通过试用期、熟悉技术栈 + 工具 + 业务，要有一定产出。为啥要尽快的熟悉这些呢？核心就是提升工作效率，工作要的是产出，拿的是结果。 开始的时候工作不会很忙，就要利用好空余时间时间，看工作需要的各个平台、工具的使用文档，以及内网大牛的技术文章，自己写小 demo 走通上线流程、以及看各种平台别人怎么设置？怎.
汇总：薪资从千到万是如何炼成的
xiaian的专栏
12-11 1135
本贴为您汇总近两年内，前程无忧论坛5位网友分享的个人薪资路程。 希望你可以静心阅读，总结他们晋升发展的共性，然后找到合适自己的发展道路，期待有一天你也可以像他们一样来这里传授经验！ 虽是旧帖，我觉得有意义再翻出来和您回味。不是因为他们在今天有多么高的薪资，而是因为他们当年都像无数个不知所措的毕业生一样，他们的原点都是零，从懵懂无知开始，摆脱茫然的视界，找到各自的方向，通过努力得到今天的生活。
Java面试必考点第10讲：架构的演进之路与前沿技术
fegus的博客
09-07 368
Service Mesh 在微服务的基础上引入了一个 Sidecar 边车的概念，如图中左下方的放大图所示，每个服务会伴生着部署一个 Sidecar，服务之间的交互不再由服务自身来完成，服务所有的出、入请求都交由这个 Sidecar 来进行处理，通过管理平面对所有的 Sidecar 进行统一管理，由 Sidecar 来实现服务发现、负载均衡、流量调度等能力。通过架构的演进，虽然当下没有消灭复杂度，但可以成功的让问题变的透明化，变的业务无感知，提升服务整体的开发效率与扩展能力，拓宽服务能力的上限。
薪资从千到万是如何炼成的
学无止境
07-31 6851
虽是旧帖，我觉得有意义再翻出来和您回味。不是因为他们在今天有多么高的薪资，而是因为他们当年都像无数个不知所措的毕业生一样，他们的原点都是零，从懵懂无知开始，摆脱茫然的视界，找到各自的方向，通过努力得到今天的生活。你说，他们今天的生活就是幸福吗？当然我也不知道，或者他们还是觉得不满足或者不太幸福。或者已经功成名就的你会对他们的经历不屑一顾，但是他们都曾经历过比较痛苦的人生蜕变，或许这一点值得初入职场
距7月30日PMP考试不足10天，应该做点什么？
才聚PMP的博客
07-22 244
7月30日正好是周六，出行游玩的人比较多，可能会出现交通拥堵，如果是在本地考试的同学，大家一定要提前规划好路线和出行方式，如果是在异地考试，建议大家预订酒店时选择距离考点近一些的（最好不超过1公里）。异地考试的同学一定要注意提前了解考试地的防疫政策，按照要求提前申请考试地健康码，做好自己的健康状况监测，如果考试地要求核酸三天两检的话，大家一定要计算好时间，确保自己的健康码状态正常且在有效期内。所以，对于这次考试，大家以平常心对待就好，不必过于计较得失，踏实备考，然后等待结果即可。...
话说《蜗居》：从房奴到小三
12-04 2913
话说《蜗居》：从房奴到小三  年轻人从来都是社会中压力最大的族群，面对就业、结婚、生子等重重人生关卡如过山车般呼啸而来，面对从学校到社会、孩子到成人的质的跨越，理想与现实的差距，爱情和面包的不可兼得，都让处于水深火热中的“奔奔族”困惑而焦虑。面对高攀的房价、工资不涨、预算有限的现状，擅长精打细算，用小钱和小空间活出大生活的“虾米族”群体随之出现，其生活方式被越来越多的人推崇
初中第十一周国旗下演讲稿.docx
02-21
- **心态调整**：面对失败不要灰心丧气，而是要调整心态，重新出发。 ### 5. 学习习惯的重要性 - **日常行为**：关注日常生活中的小事，如仪表整洁、捡拾垃圾等，培养良好的个人习惯。 - **校园行为**：在校期间...
河南省商丘市第三高级九年级政治 拥抱美好的未来说课稿.doc
11-19
整个教学过程注重实践与互动，以游戏、案例分析和自我反思等方式，帮助学生在面临中考时，学会调整心态，合理应对压力，提高心理素质，从而更好地迎接美好的未来。通过这样的教学策略，期望每一位学生都能放下负担，...
2018年高考生物二轮复习第三部分专题二给考生的30条建议规范训练新人教版
08-05
在2018年高考生物二轮复习中，针对专题二，以下是对考生的30条核心建议，旨在帮助学生更好地规范训练，提高复习效率，科学应对高考。 1. **挖掘潜能**：考生应相信自己具备巨大的潜能。即使当前成绩平平，仍有很大...
使用html写一个能发起请求的登录界面
2301_79431343的博客
10-03 1533
这是文档类型声明，告诉浏览器这是一个 HTML文档。这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。
CSS——文字打字机效果
懒羊羊大王的博客
10-06 1747
本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。基本思路：使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。
高频CSS总结
qq_51384850的博客
10-10 1409
盒模型、BFC、选择器权重计算方式、清除浮动、垂直居中、CSS3新特性、隐藏页面元素、em/px/rem/vh/vw区别、flex布局、CSS提高性能、画一个三角形、两栏布局：左边定宽，右边自适应方案
CSS常用声明（属性）
2302_81659011的博客
10-08 1019
CSS常用声明（属性）:文本、图像、背景、表格、表单
关于css文字下划线动画实现
梦雨的博客
10-10 562
【代码】关于css文字下划线动画实现。
QD1-P23 CSS 基础选择器
最新发布
qq_38641599的博客
10-13 226
本节学习：CSS 基础选择器（5种）
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值