• 移动京东项目练习记录


    移动京东项目练习记录

    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{
                  /*设置浮动和宽度*/
      				 100px;
      				height: 100px;
      				background-color: pink;
      				float: left;
      			}
      			.box2{
      				/*可以清楚浮动,可以让自己绝对绝缘 bfc*/
                      /*不让其他浮动元素影响自己*/
                  /*不让自己的浮动去影响别的元素*/
      				overflow:hidden;
      			}
      

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

       a{
           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{
          /*占满剩余的高度*/
           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消除下边距
  • 相关阅读:
    axure 用中继器实现下拉多选框
    excel 常用全局变量
    win10 x64 python3.6 pycharm 安装statsmodels
    Oracle 10进制转36进制
    概念数据模型设计与逻辑数据模型设计、物理数据模型设计的关系
    does not support ASP.NET compatibility 错误
    Oracle日志文件管理与查看
    oradmin相关用法
    Oracle Standby Database 实现方案
    c# 调用zebra打印指令 打印到USB端口
  • 原文地址:https://www.cnblogs.com/bystander-ry/p/11993701.html
Copyright © 2020-2023  润新知