zoukankan      html  css  js  c++  java
  • (日常记录 高德api)+第二周工作总结+ 三周

    (一)总结

    这周收获还蛮多的~

    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="" alt="">'
    
      $(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 {
       100vw;
    
      .fimg {
         100%;
        height: 100%;
        object-fit: cover;
        vertical-align: middle;
      }
    }

    vertical-align是为了消除图片之间的白边。

    display:block或者font-size line-height都给到0也可以解决,原因是图片默认是基线baseline对齐的,改变对齐方式。(之前遇到过,我好想是margin设负解决的。。一个正常的可以自适配的网页还是需要多探究啊。。←之前我做的官网很多时候会失效。但自己做就没在意。。。因为官网的其他也老是失效,但是吧~~。。)

     
    ================================
    第三周: 论划水

    (后面几周可能都要放在这了... 0 0

    2020/7/20~2020/7/26

    这周的总结哦。
    可能是到了一个必然会经历的阶段。。。。最开始新鲜或者抗拒,然后一周意气风发,然后随大流掉入凡尘

    从周日看了夏洛特烦恼开始就走不出来,掉进大坑,看了两天沈马。然后没什么特别大的事情。。。一直想去看眼睛,非常的犹豫,然后广西那个项目开了个会,前三天好像就,做了一点frc,要么看一下uni app 要么就是划水,回家之后也没有画画,就是不停追王牌里面神马部分。周四就请假一天结果啥都没看出来,这周cc一直在做菜,晚上也基本都是八点开始吃饭洗碗,然后就差不多睡了,上班也是有点晚。

    总之就是,下班也全在玩,几乎放弃努力,无组织无计划..
    周五周六就要调休了,本来是想设计图周五给,周四实在也没事情做,前几天的垃圾状态里出不来,然后公司老王给了我一个官网那我就开始写,下午感觉很难因为他写的好烂,后面终于搞好了sass容易多了,也算是小有收获吧,写多页面也有心得,然后也不是那么觉得菜自己了 我还是会一点的

    不过不错的部分就是因为小米手环,开始走路很多,甚至到了6天68pi的地步。

    frc其实都还蛮好的,发现es6里面都有 其实js部分我要好好补一下
    750的设计图用px写 只要是用二分之一的px就算固定住也问题不大,全是vw的话一睡要自己算,二是 遇到iPad其实vw还会失常,也不是万能的

    关于object 背景cover cotain
    flex理解更深刻了,可以,不过还是需要用的熟练
    有时候直接flex然后居中很棒
    还有。直接在vscode里面安装easy sass
    建立sass文件夹 css文件夹 自动编译 网上也有css less什么转换的插件,理解非常深刻,如果是维护别人的代码,先不说他写的怎么样,每个人命名习惯不同,不用预编译的缩紧和层级关系真的没法活

    [【有时间的话做了js的frc 还有官网的适配iPad还有 】

     
  • 相关阅读:
    Android 2.2 r1 API 中文文档系列(11) —— RadioButton
    Android API 中文 (15) —— GridView
    Android 中文 API (16) —— AnalogClock
    Android2.2 API 中文文档系列(7) —— ImageButton
    Android2.2 API 中文文档系列(6) —— ImageView
    Android 2.2 r1 API 中文文档系列(12) —— Button
    Android2.2 API 中文文档系列(8) —— QuickContactBadge
    [Android1.5]TextView跑马灯效果
    [Android1.5]ActivityManager: [1] Killed am start n
    Android API 中文(14) —— ViewStub
  • 原文地址:https://www.cnblogs.com/lx2331/p/13334845.html
Copyright © 2011-2022 走看看