移动京东项目练习记录

移动京东项目练习记录

  1. 流式布局与移动端适配的基本要求

    /*流式布局:就是百分比布局,非固定像素,内容向两侧填充,理解成流动的布局,称为流式布局*/
        /*视觉窗口:viewport,是移动端特有。这是一个虚拟的区域,承载网页的。
          承载关系:浏览器---->viewport---->网页
        */
        /*适配要求:
            1. 网页宽度必须和浏览器保持一致(因为只要横向不出现滚动条就好)
            2. 默认显示的缩放比例和PC端保持(缩放比例为1.0时和网页上一致)
            3. 不允许用户自行缩放网页(否则破坏了网页的显示方式)
            满足这些要求达到了适配,国际上通用的适配方案,标准的移动端适配方案。
        */
         /*防止内容溢出  不出现滚动条  提供用户体验*/
                box-sizing: border-box;
     /*手机端的浏览器大多数都是使用webkit内核,故要这么适配*/
     -webkit-box-sizing: border-box;
     /*点击高亮效果的清除*/
     tap-highlight-color: transparent;
     -webkit-tap-highlight-color: transparent;
  2. 绑定事件的几个方式

    • on 只能绑定一次事件,但是可以兼容各种浏览器

    • addeventlistener 适合各种谷歌相关的浏览器,可以绑定多次事件

    • attachEvent 适合IE浏览器,可以多次绑定 但是里面事件名有on

      eg:touch事件

      var div=document.querySelector(".div1");
                 div.addEventListener("touchstart",function(){
                     console.log("start!")
                 });
                 div.addEventListener("touchmove",function(){
                     console.log("start move!")
                 });
                 div.addEventListener("touchend",function(){
                     console.log("end move!")
                 });
  3. 关于触摸事件的补充,注意几个坐标的差异

    在每一个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点

    clientX clientY 基于浏览器窗口(视口)

    pageX pageY 基于页面(视口)

    screenX screenY 基于屏幕

  4. 倒计时 设置时分秒

    var timeDown = function() {

    var time = 2 * 60 * 60;

    setInterval(function() {
     time--;//使用定时器,自动减时间,更新时间
     var h = Math.floor(time / 3600);//小时
     var m = Math.floor(time % 3600 / 60);//分钟
     var s = time % 60;//秒
     var spans = document.querySelectorAll(" .all-time span");
     spans[0].innerHTML = Math.floor(h / 10);//向下取整得到十位数
     spans[1].innerHTML = Math.floor(h % 10);//取余得到个位数
     spans[3].innerHTML = Math.floor(m / 10);
     spans[4].innerHTML = Math.floor(m % 10);
     spans[6].innerHTML = Math.floor(s / 10);
     spans[7].innerHTML = Math.floor(s % 10);
    }, 1000)
  5. 两栏自适应

    </head>
     <body>
         <div class="box1">
         </div>
         <div class="box2">
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         我是内容我是内容我是内容我是内容我是内容我是内容我是内容
         </div>
    .box1{
                /*设置浮动和宽度*/
                 width: 100px;
                 height: 100px;
                 background-color: pink;
                 float: left;
             }
             .box2{
                 /*可以清楚浮动,可以让自己绝对绝缘 bfc*/
                    /*不让其他浮动元素影响自己*/
                /*不让自己的浮动去影响别的元素*/
                 overflow:hidden;
             }

  6. 图标的裁切提升响应面积

    a{
        width: 40px;
        height: 44px;
        padding: 12px 10px;
        position: absolute;
        top: 0;
        /*让背景从内容开始平铺*/
        background-origin: content-box;
        /*没有做背景裁剪 背景图默认就是从边框显示*/
        /*默认的就是
        border-box  边框以外被裁剪掉
        padding-box 内边距以外被裁剪掉
        content-box 内容以外被裁剪掉
        */
        background-clip: content-box;
    }
  7. 两个盒子,设置上面盒子高度之后,在设置下面盒子占据剩余高度

    .jd_main{
        /*占满剩余的高度*/
        width: 100%;
        height: 100%;
        padding-top: 45px;
    }
  8. 图片下间隙的处理方法

    body{
            /*font-size: 0px;*/
        }
        /*img{
            display: block;
        }*/
        img{
            vertical-align: middle;
        }
  9. 实现一个盒子的居中,使用margin:0 auto ; 是在父容器中居中,因此要设置宽度。但是如果该盒子设置了定位,margin居中将不可用。

  10. 行内元素,只要设置行高和高度,使得文本水平垂直居中即可

  11. 关于选择器加空格问题

    • 没有加空格表示同级元素 li.now

    • 当两个选择器之间有空格的情况下,代表的是子类选择器

      .a .b{}
      /*代表的是a类的b子类 */
      <div class="a b"></div>
      /*.a.b{}两个选择器之间没有空格的情况下,代表的是同时拥有两个类名的标签*/
  12. 清除浮动 (当子元素设置了float属性之后,且父元素的高度和宽度没有进行设置,而是由子元素支撑起来,则会导致父元素的高度塌陷(原本的height后来被置为0))

    即子元素要浮动,则其父元素就要清除浮动,否则子元素不在里面。

    清除浮动的方式:

    • 在父元素内添加冗余元素clear:both;
    • 在父元素中设置属性overflow:hidden||auto
    • after 方法(伪元素选择器的方法)
    .clearFix::before,
    .clearFix::after{
        content: "";
        display: block;
        visibility: hidden;
        height: 0;
        line-height: 0;
        clear: both;
    }

    13 . 设置精灵图公共样式,之后再为每个图标单独设置位置

    [class^="icon-"],[class*=" icon-"]{
        background-repeat: no-repeat;
        background-image: url("../images/sprites.png");
        background-size: 200px 200px;
    } ```

    14 . 伪元素可以替代一些span,用于设置小图标,默认行内元素,要设置为block

    15 . 一些小细节

  • 设置h3不是粗体font-weight:normal
  • 包含多个内容使用div,比如里面放多个span
  • 背景图不需要设置位置就写center
  • 设置浮动会转化为块级元素
  • a中有图,设置为block,可不设置宽
  • a img 设置margin居中 设置宽度 设置block消除下边距
我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章