报名拉勾教育“大前端就业集训营”课程已经1月之久了，就想来谈谈我的看法，关于自学，报班学习~
在之前我一直觉得我不会报班的，一方面是因为费用比较高，另一方面我觉得通过我自己的学习可以让我掌握学习内容。我自己的情况是有自学前端课程快一年，在这个自学过程中，先是问同学、看各种前端学习路线来指定自己的学习计划，然后在哔哩哔哩上看课程，大概学到vue框架了，但是发现自己的基础特别不扎实，就属于有的没的都在学，学完之后也不知道实际上班怎么去使用、到底会不会用到这些……心里特别没底气，总觉得自己啥都不会（实际上是有点，学过的东西都遗忘了）
不排除有些人就是适合自学，自己琢磨一些东西，但是最后发现，每个人都学习方法不同接收知识程度也是不同的，在我报完课程之后最大的感受就是，学习是很有系统的，可以节省下你去问、去找资源的时间，花费更多的时间来学习和琢磨一些细节不懂的点。最最关键的就是，你在任何时间任何方面有啥问题都可以找班主任和导师解决。
说到这个就不得来说一下拉勾分配的导师和班主任了，完全就是一整套龙服务，有任何问题都能帮你解决，解决不了后面还有一个团队帮助。在之前学习中，我可能不会去问别人我不懂的地方，但是报了班之后，我就有任何疑难杂症都会去找导师询问，也让我能够独立思考（唠嗑和学习咨询都在线服务）
流式布局_京东项目
原理
-
流式布局就是百分比布局，也称非固定像素布局
-
将盒子的宽度设置为百分比，具体页面可以根据盒子的拉伸进行改变
-
流式布局是移动web常见的布局方式
-
需要定义页面的最大（max-width\min-width）
京东首页
准备工作
- 对css样式中的内容进行初始化
- 其中包括关于浏览器的兼容问题解决方案
tips区域
- 首先先搭建布局，然后再更改内容
- 可以先将所有元素都放在div标签中，然后让其进行float排列在一排显示
- 基线垂直方向的对齐vertical-align：middle
搜索框
-
左右固定宽度高度，只用中间部分可以随着父亲变化而变化（圣杯布局）
- 给左右两边固定定位，并且脱离标准流
- 中间的自适应100%宽度，给一个左右的margin，让中间内容缩小
-
关于添加小图标伪元素
- content:""直接通过content属性
- 伪元素的定位问题：right：-8px；正数表示和属性方向相反，负数表示和属性方向一致
/* 通过伪元素来设置它的边线 */
.search-box .search span::after {
position: absolute;
content: "";
right: -8px;
width: 1px;
height: 15px;
background-color: #ccc;
}
-
二倍精灵图
扫描二维码关注公众号，回复： 12210631 查看本文章
- 在fireworks里面把精灵图等比例缩放为原来的一半
- 之后根据新的大小进行坐标的测量
- 注意代码里面的background-size也要写，精灵图为原来的一半
-
搜索框
- 我们通过CSS3的样式属性来给搜索框内容进行定位
- background-color：transparent可以用来透明input标签背景颜色
- border：none可以不显示搜索框的边框
焦点图布局
-
背景的制作使用的是CSS3样式
-
将border-radius来设置弧度
-
关于fixed固定定位
- 设置了fixed就会脱离文档流，让出位置，才能让后面的元素盖住
-
CSS3背景渐变效果
-
通过MDA来进行新属性的学习
-
linear-gradient
-
background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
轮播图布局
-
图片类型
- dpg图片：京东自主研发的图片压缩术，节省用户50%的浏览流量，极大提高用户的网页打开速度
- webp图片：谷歌开发的一种旨在加快图片加载速度的图片格式，节省大量的服务器宽带资源和数据空间
-
设置盒子的样式
- 我们想要盒子有边框，可以利用CSS3中新增盒子内缩
.banner ul li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 187px;
/* 利用CSS3的样式来进行修改，让盒子进行内缩 */
padding: 44px 3.3% 0;
box-sizing: border-box;
}
活动优惠布局
- 大盒子设置宽度
- 给里面的每个a标签设置float，使其可以在一排显示出来，并且设置对应段都的百分比
- 每个a标签内部的img又是一个单独的块，可以设置宽度100%，让其高度等比例缩小
超市导航
- 外面的大盒子需要设置overflow：hidden
- 图片的大小可以单独设置自定义样式
- 对于下一页内容，我们可以设置一个定位，让它水平排布在100%的位置，然后会被hidden掉
新人专享
将两部分的内容分别设置50%后，给一个margin值让其存在边框
它水平排布在100%的位置，然后会被hidden掉
[外链图片转存中…(img-DTTribkh-1609679064583)]
新人专享
将两部分的内容分别设置50%后，给一个margin值让其存在边框
网课笔记内容均来源于拉勾教育“大前端就业集训营”，有兴趣的小伙伴快加入呀~心动不如行动