(一)总结
这周收获还蛮多的~
1、自身上说，本来比较反感前端了，受同学之拖帮忙安卓，看了Android代码之后…… 啊我前端不论是环境啊轻量级啊奇怪的bug啊什么什么的都好棒（但我不喜欢css嘤嘤嘤 css烂烂 喜欢js~~~）
2、业务上说，做了fcc，感觉到自己在小细节上比较差，然后不知道一些名词，很喜欢那种解题模式~ 希望可以慢慢学吧。很多不熟。
还有精益求精之。官网我觉得都ok了，haibin又吭哧吭哧改了两天，还改了一堆代码。。。各种适配都考虑到了~ 学习~
3、人际上说，上周外面就我1人，挺想辞职的。。现在每天5、6人吧，氛围有一点，虽然我还是每天上班先划一小时并且看股票。。。大家都挺友好的~~ 帮王老板识破了360骗局，一起薅水果的羊毛，cc帮我点的外卖王先生，另外两个王愣了，“你也是王先生了” 2333 ，小姐姐也好好~
4、眼睛还是不太行0 0只能多休息休息。我发现我脊柱什么的 洗衣服都低着头其实可能只是我看不清 啊 嘤嘤嘤 人家洗头怎么不低着头呢
(二)小知识点
前两天官网，周三划水，周四五fcc+地图.
1/ vw
在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。
100%和100vh/vw的区别。
% 是相对于父元素的大小设定的比率。
vh是视窗大小没跑了.
====================================
2/ 学会了cssrem的使用！
css rem 插件重新加载一下, 加载完成可以之后 这个插件方便在可以直接转换~ 写代码的时候写到px，然后就变成rem了
【rem是什么？？】
3/ 但是 楼上这个
设计图是按照750px给的 iPhone 6/7/8宽度大概是375 也就是一半
所以设计图 的字体 基本上3:5应用到项目吧
3(实际代码):5(设计图)
可以直接把蓝湖缩小,手机放在旁边对比,就知道大概字体关系了,(具体多大可以自己思量~)
4 / background这个 , 回看contain.. space round 反正四个组合起来也可以23333
5 / 今天写的媒体查询
还是遵从这个原则 下面的@media把上面的都复制来
改的话不能注释 而是改成0来取消相应的属性.
总之今天写的挺顺的
但是被那个股票和外卖扰乱了心智
这都是小钱 但是如果叫他们牵绊住你就不好了 对不对 嘤嘤嘤
6 / css开头空两格(段落)
p{text-indent:2em;}
7 / 这个很好用!
比如手机端给了图片，手机端的实际
background: url(/images/banner_phone_2.png) space center;
background-size: cover;
8/ 发现在蓝湖 直接按 Alt 就会显示百分比 不用自己算了
9 / 按钮的居中
vertical-align:middle;
10/ jquery的小例子
$("p").html("hello");
这个是把所有的p的内容都改成hello（但是保留<p></p>外面的标签 还有p的class属性什么的.
注意引号，表意为 把<p>的html内容都改成后面这个hello~
【再注意一下：这里会：覆盖.html(****) 括号里面的内容~~
var img=‘<img class="simg" ...>‘这样不会覆盖
var img=$(‘p‘)就不行，因为p里面的内容这样就会被覆盖掉了~
我们理解一下，只要凡是你$(‘p‘)这样一下，就等于这样选取了这个标签符合的所有元素~【应该是返回了个数组~ 很多个】
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
若这样写，就是对数组每个都return一个index。多写写总会知道吧~
11 /
li:nth-child (n+2)
在这个元素下，li的父元素的第几个子元素，并且这个子元素还是li才能满足触发条件。n+2，n可以看做从0开始的，然后这个1 2 3 是“第” 几个 它不是从0而是从1开始的。写的几就是几,n+2就是第2个开始,也就是跳过父元素的第一个子元素去找。
&>div:nth-child(n+2) {
$> 直选.service这些 不然下面div只要满足这个有div的条件，都会把这条语法适应包括进去
&> 是less里面的& >语法
css里面就这样写.service>div:
只选.service下跟着的这一级div.
12 / (相比css还是喜欢js一点)
js 可以用for循环 也可以in~ for的话也是id比较方便嘤嘤嘤
自己直接在console控制台打印即可~~~~~ 要什么代码草稿纸。
in具体是:
【用作循环(let 变量 in 对象) ，①对数组: 取出数组的元素 ②对对象,取出对象的[属性][属性]】
【用作判断 :(变量 in 对象 )这时(1)数组 变量是index序号（是从0开始的 哦！大部分都是从0开始的） (2)对象 变量还是对象的属性。】
1、for...in 对数组或对象的循环/迭代操作
对于数组循环出来的是数组元素；对于对象循环出来的是对象属性
2、判断对象是否是数组/对象的元素/属性
格式：（变量 in 对象）
当‘对象’是数组时：“变量”指的是数组的“索引”；
当‘对象’为对象是，“变量”指的是对象的“属性”。
↑ https://www.cnblogs.com/memphis-f/p/12073013.html
(三)地图小demo
1/
map.add([marker1,marker2,marker3]);
map.add(marker2);
【经验】只是往map里批量添加可以啊，但是你要确保你批量进去的是数组【可以】。
2/ open 不能当函数名啊 嘤嘤嘤
3/ 一些小问题
js动态更改
document.getElementById("alertForm").style.display="block";
这句笨笨！display设成""无效，要有属性值。
js动态打开
window.open(....)新页面
window.location.href=("video.html");本地刷新可回退
4/ 啊 三元表达式和if not 逻辑要自己想清楚~ 不然无穷无尽的调bug鸭
注意小细节。，我发现我
【非常】“差不多得了”
而且由此，非常不注意小细节
5/ 看官方文档!
这里 比乱七八糟搜索百度强多了。。你知道marker，直接看到hide（）show()方法，，。，。。 就可
6/ 自己单独写一个页面~记得body 有默认边距。
*{padding:0;margin:0; }
手机端自适配加上这句话
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
不单单是自适配，简单的字体大小和窗口大小的区分也要用到。！！！！
不加缩放的话谷歌字体极其小，火狐比较正常。
7/ list-style: none; 去掉li的圆点
text-decoration:underline 下划线，但是， 一般用border-bottom更好。下划线太近了
稍微加个小特效 transition: border-bottom .5s, color .5s;
单纯下拉栏目的话，最好有一个已经是re选中已选中的状态。
8/ js控制。显示与隐藏... 直接操作,虽然不太好..
document.getElementById("li2").style.display = "none";
document.getElementById("li3").style.display = "";
【↑感觉这个不是设置成默认，而是给取消。如果原来有，那就是原来的，如果没有，才是默认的。】
display=""有时候会不生效，原因是这句话只是"回到默认css里定义的效果"，不是默认到展示出的效果。默认的是none，那么""的话还是none，这时候对它没用。
问题来了，如果换用visibility，那么会占据空间，做不到隐藏效果。
怎么办呢？
============================补充一些网页上的... 看一下批量使用,表格和自己的demo尽量优化,展示全部,...,,
============================
1 day急速出demo
地图demo,我td tr表格非常不熟、select选中状态不会、radio不会，动画不会，本来稍微加个动画锦上添花吧！！！
能力范围有限，圈在button和onclick里面，项目经验还不够鸭嘤嘤嘤，太不熟
【写不出来了。。。 回去再总结吧if 有】
使用表格蛮好的哦。直接对齐，直接放到元素里自动换行，自己写p和span麻烦一些。但是表格需要再学习：
写一下
(四)啊 那个 img适配的原因(补充)
emmm....background-size contain cover
background-repeat space round
这个试试具体我没看
这里复制一下可用的代码吧
这么写 emmmm 背景适配不了的话就用img
用img要周围没白边 要自适配调整大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> @@include(‘../common/favicon.html‘) @@include(‘../common/link_common_css.html‘) <link rel="stylesheet" href="./css/demo_detail.min.css"> <title>xxxx</title> </head> <body> @@include(‘../common/header.html‘) <div class="content"> <div class="p1 fix-img"></div> <div class="p2 fix-img"></div> <div class="p3 fix-img"></div> <div class="p4 fix-img"></div> <div class="p5 fix-img"></div> <div class="p6 fix-img"></div> </div> @@include(‘../common/footer.html‘) </body> <script src="./js/index.min.js"></script> <script src="./js/common.min.js"></script> <script> var winw = document.body.clientWidth; var simg = ‘<img class="fimg" src="" >‘ $(document).ready(function () { $(‘.fix-img‘).html(simg) var getimg = $(‘.fimg‘) for (i = 0; i < getimg.length; i++) { if (winw > 778) { getimg[i].setAttribute("src", "./images/example_1_0" + (i + 1) + ".png") }else { getimg[i].setAttribute("src", "./images/example_1_mb" + (i + 1) + ".png") } } }) </script> </html>
css(less)
.fix-img { width: 100vw; .fimg { width: 100%; height: 100%; object-fit: cover; vertical-align: middle; } }
vertical-align是为了消除图片之间的白边。
display：block或者font-size line-height都给到0也可以解决，原因是图片默认是基线baseline对齐的，改变对齐方式。（之前遇到过，我好想是margin设负解决的。。一个正常的可以自适配的网页还是需要多探究啊。。←之前我做的官网很多时候会失效。但自己做就没在意。。。因为官网的其他也老是失效，但是吧~~。。）